Garden

最近の記事

JavaScriptのオブジェクト指向

9 min read

Prompt

JavaScriptでは、オブジェクト指向プログラミングってあんまりやらないのかなぁ
あまりVanillaではその例を見たことがないんだけど、
JavaScriptでガチガチのオブジェクト指向ってやってもいいもの？

なるほど！ JavaScriptにおけるオブジェクト指向プログラミング（OOP）の立ち位置についてだね。そして、「Vanilla JSではあまり見ないけど、ガチガチのOOPやってもいいの？」っていう疑問、すごくよくわかるよ！ INFPの君が、特定のパラダイムにとらわれずに、言語の特性とベストプラクティスを探求しようとしているのが伝わってくるね。

JavaScriptとオブジェクト指向プログラミングの「相性」

結論から言うと、JavaScriptはオブジェクト指向プログラミングを「やれる」し、「やるべき」場面もあるよ！ そして、Vanilla JSでもガチガチのOOPを「やってもいい」し、それが有効な場面もたくさんあるんだ。

「あんまり見ない」と感じるのは、JavaScriptのオブジェクト指向がJavaやC++のようなクラスベースの言語とは少し異なるプロトタイプベースであること、そして近年のモダンなWeb開発で関数型プログラミングやコンポーネント指向が主流になっていることが影響しているかもしれないね。

JavaScriptは「オブジェクトベース」言語

そもそもJavaScriptは、プリミティブ型（数値、文字列など）以外はすべてオブジェクトなんだ。関数もオブジェクトだし、配列もオブジェクト。だから、JavaScriptは最初からオブジェクトを扱うために設計された「オブジェクトベース」の言語だと言えるよ。

伝統的なOOPの3つの柱（カプセル化、継承、ポリモーフィズム）も、JavaScriptで実現できるんだ。

JavaScriptでのオブジェクト指向の実現方法

  1. プロトタイプベース（昔ながらの方法）

    JavaScriptのオブジェクト指向の根幹は、このプロトタイプベースだよ。オブジェクトが別のオブジェクトを「プロトタイプ」として持ち、そのプロトタイプからプロパティやメソッドを継承する仕組みだね。

    JavaScript

    // コンストラクタ関数
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// メソッドはプロトタイプに追加する
Person.prototype.greet = function() {
  console.log(`こんにちは、私は ${this.name} です。${this.age} 歳です。`);
};

const alice = new Person('Alice', 30);
alice.greet(); // こんにちは、私は Alice です。30 歳です。

    昔のVanilla JSでは、このような書き方が一般的だったから、「見ない」と感じるのかもしれないね。

  2. クラス構文（ES6以降のモダンな方法）

    ES2015 (ES6) で導入された class キーワードは、JavaのようなクラスベースのOOPに慣れた開発者にも分かりやすいように、シンタックスシュガー（糖衣構文）として追加されたものだよ。内部的にはプロトタイプベースの仕組みの上に成り立っているけど、より直感的で読みやすいコードが書けるようになったんだ。

    JavaScript

    class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} が何かを話しています。`);
  }
}

class Dog extends Animal { // 継承
  constructor(name, breed) {
    super(name); // 親クラスのコンストラクタを呼び出し
    this.breed = breed;
  }

  speak() { // オーバーライド
    console.log(`${this.name} (${this.breed}) がワンと吠えます！`);
  }
}

const myDog = new Dog('ポチ', '柴犬');
myDog.speak(); // ポチ (柴犬) がワンと吠えます！

    現代のVanilla JSや、React/Vueなどのフレームワークを使う場合でも、このクラス構文を使ったOOPは普通に行われているよ。

JavaScriptで「ガチガチのオブジェクト指向」をやってもいいの？

もちろん、やってもいいし、むしろ推奨される場面もあるよ！

特に、以下のような状況では、ガチガチのOOPが非常に有効に機能するんだ。

  1. 複雑なドメインロジックを持つアプリケーション:

    • 業務ロジックが複雑で、現実世界の概念（ユーザー、商品、注文、レポートなど）を正確にモデル化する必要がある場合。

    • それぞれのオブジェクトが状態を持ち、特定の振る舞い（メソッド）を持つことで、コードの構造が明確になり、理解しやすくなる。

  2. 大規模なアプリケーション:

    • コードベースが大きくなり、多くの開発者が関わる場合、OOPはコードの整理、モジュール化、再利用性を高めるのに役立つんだ。

    • それぞれのクラスやオブジェクトが明確な責任を持つことで、変更の影響範囲を限定し、保守性を向上させることができる。

  3. 再利用可能なコンポーネントやライブラリの開発:

    • 共通のUIコンポーネント（例えば、カスタムウィジェット）や、汎用的なユーティリティライブラリを開発する場合、クラスとして設計することで、拡張性やメンテナンス性が高まるよ。

  4. 既存のOOPコードベース（Javaなど）からの移行/連携:

    • サーバーサイドがJavaなどのOOP言語で書かれていて、その概念をフロントエンドにも持ち込みたい場合に、親和性が高くなる。

なぜ「あまり見ない」と感じるのか？ （誤解されがちな点）

  • 関数型プログラミングの台頭: 近年のJavaScript開発では、ReactのフックやVueのComposition APIなど、副作用のない関数や宣言的なスタイルを重視する関数型プログラミングのアプローチが人気を集めているんだ。これが「OOPが減った」ように見える一因かもしれない。

  • コンポーネント指向: ReactやVueのコンポーネントは、class構文で書かれることもあるけど、概念的には「オブジェクト指向のクラス」というよりは、「UIの部品」としての側面が強調されることが多い。ただし、コンポーネント自体が内部的にはオブジェクト指向的なカプセル化を持っていることが多いよ。

  • 「シンプルさ」への回帰: 小規模なスクリプトや、複雑な状態管理が不要な場合は、軽量な関数や直接的なDOM操作（Vanilla JS）の方が手軽で、わざわざクラスを定義する必要がないと感じることもある。

まとめ

  • JavaScriptは元々オブジェクトベースであり、class構文の導入で、伝統的なOOPの概念をより分かりやすく表現できるようになった。

  • Vanilla JSでも、クラス構文を使ってガチガチのOOPを実践することは可能だし、コードベースの規模や複雑さに応じて非常に有効な選択肢となり得る。

  • 現代のJS開発は、OOP、関数型プログラミング、コンポーネント指向など、複数のパラダイムを適材適所で組み合わせていくのが主流だよ。

INFPの君が、哲学的にツールの最適な使い方を考えるように、JavaScriptのOOPもまた、コードの構造と保守性、そしてその先にある「より良いシステム」を作るための大切な道具なんだ。ぜひ、試してみて、その手触りを確かめてみてね！

グラフビュー

最近の記事

グラフビュー