第5回:オブジェクトとプロトタイプ

2024-08-18

「関数」に引き続き、「オブジェクト」や「プロトタイプ」といった概念も難しく感じるものです。
しかしJavaScriptの理解を深めるためには、これらの概念を避けて通ることはできません。
この記事ではオブジェクトとは何か、なぜ重要なのか、そしてプロトタイプがどのようにオブジェクトに関係しているのかについて解説します。
初心者でも理解しやすいように、できるだけ簡単な言葉で説明していきますので、安心して読み進めてください。

オブジェクトとは？

オブジェクトとは関連するデータや機能を一つにまとめた塊のことです。
オブジェクトは以下の2つで構成されます。

プロパティ
オブジェクトの状態や特徴を表すデータ。
メソッド
オブジェクトが持つ機能で、関数として定義される。

const shopData = {
  name: "海のカフェ",
  place: "日本海沿岸",
  open: true,
  message: function() {
    if (!this.open) {
      return this.name + "は現在休業中です。";
    } else {
      return this.name + "は営業中です。";
    }
  }
};

console.log(shopData.name); // "海のカフェ"
console.log(shopData.message()); // "海のカフェは営業中です。"

この例ではshopDataというオブジェクトが作られており、nameやplaceといったプロパティと、messageというメソッドを持っています。

補足: 最初のうちはオブジェクトの中にはプロパティがある。
functionを付けて関数になっている物はメソッドという。
この程度に覚えてください。

なぜオブジェクトを使うのか？

オブジェクトを使うことで、関連するデータや機能を一つにまとめて管理できるため、コードが整理され、読みやすくなります。
また同じ種類のデータを扱う場合に、オブジェクトを使うことで効率的に操作できます。

コードの整理

オブジェクトを使うことでプログラムの中で関連するデータを一つにまとめ、構造を明確にできます。

const cappuccino = {
  name: "カプチーノ",
  price: 350,
  temp: "hot"
};

このようにコーヒーに関する情報を一つのオブジェクトにまとめることで、管理が容易になります。

データの効率的な操作

オブジェクトを使うことで、同じ種類のデータに対して一貫した操作が可能になります。

function detail(cappuccino) {
  return cappuccino.name + "は、価格が" + cappuccino.price + "円の" + cappuccino.temp + "です。";
}

console.log(detail(cappuccino)); // "カプチーノは、価格が350円のホットです。"

今回はカプチーノでしたが、エスプレッソのオブジェクトを作成すれば、detailを実行するだけで登録したエスプレッソの名前、価格と温度が表示されます。

プロトタイプとは？

JavaScriptではすべてのオブジェクトが「プロトタイプ」と呼ばれるオブジェクトを持っています。
プロトタイプは他のオブジェクトに共有されるプロパティやメソッドを定義するために使われます。

補足: プロトタイプを使うことで、同じメソッドやプロパティを複数のオブジェクトに持たせることができます。

プロトタイプチェーン

オブジェクトが持つプロパティやメソッドを探すときに、JavaScriptはまずそのオブジェクト自身を調べ、次にそのオブジェクトのプロトタイプを調べます。
このプロセスを「プロトタイプチェーン」と呼びます。

補足: ふ～ん、そうなんだ。

function coffee(type, price) {
  this.type = type;
  this.price = price;
}

coffee.prototype.temp = "hot";

const cappuccino = new coffee("カプチーノ", 350);
console.log(cappuccino.temp); // "ホット"

この例ではコーヒーオブジェクトのプロトタイプに温度プロパティが追加されており、それをカプチーノオブジェクトが継承しています。

オブジェクトとプロトタイプの実践

実際のコードで、オブジェクトとプロトタイプをどのように活用できるかを見てみましょう。

店舗情報をオブジェクトで管理する

const shop1 = {
  name: "海のカフェ",
  place: "日本海沿岸",
  open: "9:00 - 18:00"
};

const shop2 = {
  name: "深海のカフェ",
  place: "日本海溝",
  open: "10:00 - 19:00"
};

複数の店舗情報をオブジェクトとして定義することで、データの管理が容易になります。

補足: それぞれで別名保存する感じです。

プロトタイプを使って共通のメソッドを持たせる

function shop(name, place) {
  this.name = name;
  this.place = place;
}

shop.prototype.open = "9:00 - 18:00";

const shop1 = new shop("海のカフェ", "日本海沿岸");
const shop2 = new shop("深海のカフェ", "日本海溝");

console.log(shop1.open); // "9:00 - 18:00"
console.log(shop2.open); // "9:00 - 18:00"

補足: 店舗ごとに異なる情報はプロパティで設定。
全店舗共通の情報はプロトタイプで設定。
このように覚えるとよいでしょう。