学ぶ JavaScriptにおけるクラス宣言の理解 | JavaScriptクラスと継承の習得

メニューを表示するにはスワイプしてください

このセクションでは、JavaScriptのクラスに焦点を当てます。

なぜJavaScriptでクラスを学ぶのか？

JavaScriptのクラスは、特に大規模なアプリケーションでオブジェクトを作成するための整理された、よりクリーンな方法を提供。コードの再利用性や構造を促進し、継承を簡素化。必須ではないが、クラスを使うことで複雑さの管理が容易になり、コードの可読性、保守性、拡張性が向上。特にオブジェクト指向プログラミングで作業する際に有効。

JavaScriptにおけるクラスとは

クラスは、建築家が家を設計する際に使う設計図のようなもの。設計図自体は家ではありませんが、家を建てるための指示を提供します。新しい家を建てるたびに同じ設計図に従いますが、それぞれの家には異なる色や素材、カスタム機能など、独自の特徴を持たせることができます。

同様に、JavaScriptのクラスはオブジェクトを作成するための設計図です。クラスはそのオブジェクトの構造（プロパティ）と動作（メソッド）を定義します。クラスからオブジェクト（インスタンス）を作成するたびに、同じ設計に従いますが、値は異なる場合があります。これは、家ごとに見た目が異なるのと同じです。

クラスの宣言方法

JavaScriptでクラスを宣言するのは簡単です。classキーワードの後にクラス名を記述します。プロパティやメソッドを定義するクラス本体は、中括弧{}で囲みます。

class Animal {
  // Properties and methods go here
}

この例では、Animalという名前のクラスを宣言しています。JavaScriptのクラスは巻き上げ（hoisting）されないため、使用する前に宣言する必要があります。

コンストラクターメソッド

クラスが設計図であるなら、constructorはその設計図をもとに家を組み立てる建設チームのようなものです。家を建てる（オブジェクトを作成する）とき、建設チーム（constructor）は設計図に従って基礎や壁、屋根などを組み立てます。

同様に、constructor内のclassは、渡された引数に基づいてオブジェクトのプロパティを初期化します。これは、家の塗装色や床材をカスタマイズするのと同じです。新しいインスタンスを作成するたびに、constructorが正しい詳細でオブジェクトを構築します。


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

const lion = new Animal('Lion', 'Wild');
console.log(lion.name); // Output: Lion
console.log(lion.type); // Output: Wild

const pig = new Animal('Pig', 'Domestic');
console.log(pig.name); // Output: Pig
console.log(pig.type); // Output: Domestic