オブジェクトを改造する

既にあるオブジェクトを自分好みに作り変えることを、プログラミングの世界では 「拡張（かくちょう / Extension）」 や 「カスタマイズ」 と呼びます。

これは 「買ってきた自転車（じてんしゃ）に、ライトをつけたり色をぬったりして改造（かいぞう）すること」 に例たとえることができます。

I. オブジェクトを改造する

1. 既にあるオブジェクトを改造する2つの方法

JavaScriptでは、すでに動いているオブジェクトに後から「新しいパーツ」を追加したり、「古いパーツ」を新しいものに取り替えたりできます。

a) 追加する

特定の1人（1つのオブジェクト）だけに、新しいプロパティやメソッドを追加します。

イメージ： 自分の自転車だけに、特別なステッカーを貼る。
書かき方かた： オブジェクト名.新しい名前 = 値;

const myCar = { brand: "Toyota" };

// 後からプロパティを追加
myCar.color = "Red";

// 後からメソッドを追加
myCar.horn = function() {
  console.log("プップー！");
};

myCar.horn(); // 実行できる！

Note

myCar.horn = function() {... の部分は、myCar.horn に関数かんすうを代入だいにゅうしていいます。このように、JavaScriptでは関数かんすうも変数へんすうのようにあつかうことができます。 代入だいにゅうしたり、関数かんすうの引数ひきすうにしたり、返り値にしたりできるのです。

b) オーバーライド（上書うわがき）する

親から受うけ継ついだ機能を、自分流のやり方かたに書かき換かええます。

イメージ： お父さんからもらったカメラだけど、レンズを最新さいしんのものに交換して使いやすくする。
書かき方かた： 同じ名前で新しく定義ていぎし直す。

// 1. robotオブジェクトを作成
const robot {
  name: "ロビー",
  greet() {
    console.log("ハロー、ロボットです。");
  }
}

// 2. 実行
robot.greet(); // "ハロー、ロボットです。"（元のまま）

// 3. robot のメソッドを上書（うわが）き（オーバーライド）する
robot.greet = function() {
  console.log("こんにちは！ 私は特別なロボットです。");
};

// 4. 実行して比較（ひかく）する
robot.greet(); // "こんにちは！ 私は特別な..."（上書（うわが）きされた！）

Note

robot.greet = function() {... の部分は、robot の　greet というメソッド（関数かんすう）に別の関数かんすうを再代入だいにゅうしています。

2. 例たとえ話：スマホ

JavaScriptのオブジェクトは、一度作ったら終わりではありません。

直接追加： スマホに『お気きに入いりのストラップ』をつけるようなもの。

オーバーライド： 決まった『着信音（ちゃくしんおん）』を、自分の好きな音楽に変えるようなものだよ。

こうやって、元の形を壊さずに自分らしく使いやすくするのが、JavaScriptの面白いところなんです。

II. プロトタイプとプロトタイプチェーン

JavaScriptの「プロトタイプ（Prototype）」と「プロトタイプチェーン」は、多くの学習者がつまずく難むずかしいところです。

これを皆さんがイメージしやすいように、 「家系図かけいず」 や 「秘密のレシピの受うけ継つぎ」 に例たとえて説明します。

1. プロトタイプ（Prototype）とは？

JavaScriptでは、多くのオブジェクトが「親（プロトタイプ）」を持っています。もし自分の中に必要な道具（メソッドやプロパティ）がなくても、**「親の持っている道具を借りて使う」**ことができる仕組しくみです。

2. プロトタイプチェーン（Prototype Chain）とは？

「自分になければ親、親になければそのまた親…」と、さかのぼって探しに行く「鎖（くさり）」のようなつながり のことです。

身近みじかな例たとえ：秘密のカレーレシピを求めて

あなた（インスタンス）： カレーを作ろうとします。
自分のキッチン： レシピがありません。
お父さんの家（自分のプロトタイプ）： 「カレーのレシピある？」と聞きます。「持っていない」と答えが返ってきました。
おじいさんの家（自分の親のプロトタイプ）： お父さんも持っていなければ、さらにおじいさんに聞きに行きます。「カレーのレシピある？」
先祖の家： そんな風に、レシピを持っている人を見つけるまで、先祖をたどって聞きに行きます。誰かがレシピを持っていれば、あなたはそれを使ってカレーが作れます。

3. なぜこの仕組しくみがあるの？

もし100人の学生オブジェクトを作るとき、全員に「自己じこ紹介メソッド」を持たせると、メモリー（コンピューターの脳のう）をたくさん使ってしまいます。

プロトタイプを使わない： 全員が自分の辞書（じしょ）を持っている（重い！）
プロトタイプを使う： 教室に1冊だけ辞書を置き、全員でそれを共有きょうゆうする（軽い！）

4. コードで見る「探しに行く流れ」

const animal = {
  eats: true
};

const dog = {
  barks: true
};

// dog の親（プロトタイプ）を animal に設定（せってい）
Object.setPrototypeOf(dog, animal);

console.log(dog.barks); // true (自分の中にある)
console.log(dog.eats);  // true (自分にはないが、親にあるので借りてきた！)
console.log(dog.fly);   // undefined (家系図（かけいず）を最後まで探したけど、どこにもない)

5. プロトタイプを使って新しいプロパティやメソッドを追加する

ひとつのオブジェクトだけでなく、そのプロトタイプから生まれた「全員」に、新しい機能を持たせることができます。

イメージ： マンションの住人全員が使える「共有きょうゆうのラウンジ」に、新しいテレビを置く。
書かき方かた： クラス名.prototype.メソッド名 = function() { ... };

// 全ての配列（はいれつ）（Array）に「2倍にする」という新しい機能を追加してみる
Array.prototype.double = function() {
  return this.map(n => n * 2);
};

const numbers = [1, 2, 3];
console.log(numbers.double()); // [2, 4, 6]

注意： ここではわかりやすい例れいとしてArrayにメソッドを追加しましたが、ふつう、 Array や Object などの、皆が使う標準（ひょうじゅん）の道具を勝手に改造はしません。他の人の書いたブログラムに影響する可能性があるからです。

まとめテーブル

用語	やさしい日本語	英語のイメージ
Prototype	共通の道具箱 / 秘密のレシピ	Blueprint / Shared assets
Prototype Chain	先祖（せんぞ）をたどる鎖	Search link / DNA
Inheritance	継承けいしょう（親の機能を使えること）	Inheritance

「自分にないものは、先祖から借りればいい」。この考え方がJavaScriptの根本（こんぽん）にあります。

📝 留学生へのアドバイス

改造はとても便利だけど、やりすぎると『元の形がどうだったか』が分からなくなって、他の人が困ることがあります。特に Array.prototype などを改造するときは、『みんなの共有きょうゆうスペースに勝手に私物を置かない』 というマナーがあることも、一緒に覚えておきましょう！

いかがでしょうか？「後から自由に変えられる」というJavaScriptの柔軟じゅうなん（じゅうなん）な性格が伝わればバッチリです。

Keyboard shortcuts

留学生のためのJavaScript学習ガイド