学ぶパラメーターオブジェクトの使用 | JavaScriptクラスと継承の習得

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

クラスがオブジェクトを初期化する際に複数のデータが必要な場合、個別のパラメータを管理するのは複雑になりやすく、ミスも発生しやすくなります。

単一のオブジェクトをパラメータとして使用

複雑なオブジェクトを作成する際、クラスのコンストラクタに複数のパラメータを渡すのは手間がかかり、ミスも起こりやすくなります。これを解決する方法として、必要なプロパティをすべて含むパラメータオブジェクトを1つ渡す方法があります。このアプローチにより、コードが整理され、パラメータ数が増えてもミスのリスクを減らせます。

これは、カスタムカーを注文する場合に例えることができます。色やエンジンタイプ、内装素材などの詳細を1つずつ伝えるのではなく、仕様書（オブジェクト）として一度にすべての情報を提供するイメージです。この方が効率的で、ミスも少なくなります。

constructorで複数のパラメータを定義する代わりに、初期化に必要なデータをすべて含む単一のオブジェクトを受け取ります。


              12345678910111213141516171819202122
            
class Animal {
  constructor({ name, type, age, diet }) {
    this.name = name;
    this.type = type;
    this.age = age;
    this.diet = diet;
  }

  // Method to describe the animal
  getInfo() {
    return `${this.name} is a ${this.age}-year-old ${this.type} animal that follows a ${this.diet} diet.`;
  }
}

const lion = new Animal({
  name: 'Lion',
  type: 'Wild',
  age: 12,
  diet: 'Carnivore',
});

console.log(lion.getInfo()); // Output: Lion is a 12-year-old Wild animal that follows a Carnivore diet.

この例では、name、type、age、diet を個別のパラメータとして渡す代わりに、1つのオブジェクトを constructor に渡しています。この方法により、プロパティの数が増えてもクラスの管理が容易になります。

パラメータオブジェクトを渡す利点

1. 可読性と明確さ

オブジェクトを渡すことで、関数呼び出しがより読みやすくなります。パラメータの順序に依存せず、どの値がどのプロパティに対応しているかをすぐに確認できます。

const pig = new Animal({
  name: 'Pig',
  type: 'Domestic',
  age: 18,
  diet: 'Omnivore',
});

比較として：

const pig = new Animal('Pig', 'Domestic', 18, 'Omnivore');

2つ目の例のように複数の値を渡す場合、constructorの定義を参照しないと、どの値がどのプロパティに対応しているのかすぐには分かりません。パラメーターオブジェクトを使う方法は、可読性を向上させます。

2. 柔軟性

パラメーターオブジェクトを使用すると、特定のプロパティを省略したり、新しいプロパティを追加したりしても関数シグネチャを変更する必要がありません。これにより、特にオプションのパラメーターを扱う場合に、コンストラクターの適応性が高まります。

const racoon = new Animal({
  name: 'Raccoon',
  age: 2,
});

この例では、nameとageのみを渡しており、typeやdietは指定していません。これらのプロパティがクラス内でオプションの場合、デフォルト値を設定したり、未定義のままにしたりして簡単に管理できます。

1. 次のうち、`constructor`でパラメーターオブジェクトを使用している例として正しいものはどれですか？

2. 次のクラス定義が与えられています。パラメータオブジェクトを使用して、`Animal` と `rabbit` のみを指定した新しい `name` オブジェクト `age` をどのようにインスタンス化しますか？

すべて明確でしたか？

フィードバックありがとうございます！

セクション 1. 章 6

AIに質問する

何でも質問するか、提案された質問の1つを試してチャットを始めてください