2.3 第１章のプロトタイプベースを検証してみよう
1. 作業フォルダを作成する
はじめに、作成するファイルを保存するためのフォルダを新しく作成します。前の手順に従って、「ch02」フォルダを作成しましょう。「ch02」は、「2 章」のことを表しています。まずは、先ほど作成した作業プロジェクトの中の「public」フォルダを開き、以下の手順に従って作業を進めてください。
① 図 2.2.4 の手順で［ファイル］→［新規］→［フォルダー］をクリックする
② ［public］フォルダを選択した状態で、フォルダー名に「ch02」に入力し、［完了］をクリックします。
これで、本サンプルで作成するファイルを保存するための「ch02」フォルダができました。
今後、各章ごとに、「ch03」「ch04」・・・という具合に、新しくフォルダを作成していきます。
2. HTML ファイルと js ファイルにプログラムを記述
フォルダの準備ができたので、サンプルプログラムを作成していきましょう。
今、作成した ch02 フォルダに、prototype.html と prototype.js を作成し、記述をしていきます。
ソースフォルダ：public/ch02
ファイル名：prototype.html
➢ prototype.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScriptの練習: prototype.jsを実行中</title>
</head>
<body>
<h1>JavaScriptの練習</h1>
<p>prototype.jsを実行しています。ブラウザのポップアップ（アラート）を確認してください。</p>
<script src="prototype.js"></script>
</body>
</html>
また、JavaScript 入門では、HTML に直接 JavaScript を記述していましたが、今回の JavaScript 入門では同じ名前の「prototype.js」という名前で JavaScript ファイルを作成し、そこに JavaScript コードを記述するようにして下さい。
ファイル名：prototype.js
➢ prototype.js
// prototype.js
// 1. 元となる「animal」オブジェクトを生成します
const animal = {
eat: function () {
return "食事をします。";
}
};
// 2. animalをプロトタイプ（見本）として「dog」オブジェクトを生成します
const dog = Object.create(animal);
// 3. dogオブジェクト独自の動作「bark」を定義します
dog.bark = function () {
return "ワンワン！";
};
// 4. 結果を表示します
alert("動物の動作（継承）: " + dog.eat()); // プロトタイプから引き継いだ機能
alert("犬の動作（独自）: " + dog.bark()); // 自身で定義した機能
Eclipse で記述すると、下図のようになります。
3. ブラウザで表示する
作成したファイルをブラウザで表示してみましょう。
使用するブラウザは、システムに登録されたデフォルトブラウザ（本書では Google Chrome）を使用します。
Eclipse 上で prototype.html を選択し、右クリックします。
コンテキストメニューから「次で開く」→「Web ブラウザー」を選択し、クリックします。
するとブラウザが立ち上がり、プログラムが実行されます。
実行結果
解説
このプログラムは動作確認が主目的で、記述内容の仕組みについては、第 5～6 章で詳しく学習します。
現時点ではソースコードの細かな理解は不要ですが、Java との対比も含めて簡単に見てみましょう。
このプログラムでは、JavaScript 特有の書き方で「オブジェクトの継承」を行っています。
4 行目で食事をする機能（eat）を持った「animal（動物）」というオブジェクトを作成します。
4: const animal = {
5: eat: function() {
6: return "食事をします。";
7: }
8: };
11 行目で、この「animal（動物）」オブジェクトをプロトタイプにして、「dog」オブジェクトを生成します。
Object.create(animal)命令を使うことで、animal の機能をすべて引き継いだ新しいオブジェクト「dog（犬）」を作成できます。これが「プロトタイプベースの継承」です 。
11: const dog = Object.create(animal);
14 行目で、この「dog」オブジェクトに独自の動作「bark」を定義します。
14: dog.bark = function() {
15: return "ワンワン！";
16: };
19 行目と 20 行目で、結果を alert で表示しています。
dog.eat()を実行すると、自分自身には定義されていないはずの「食事をします。」というメッセージが表示されます。これは、親である animal から機能を借りてきているためです。
19: alert("動物の動作（継承）: " + dog.eat()); // プロトタイプから引き継いだ機能
20: alert("犬の動作（独自）: " + dog.bark()); // 自身で定義した機能
Java で学んだ継承によく似ていますが、プロトタイプからオブジェクトを生成して継承しただけで、Java ほど明確な型宣言を行っている訳ではありません。これがプロトタイプベースの継承と呼ばれるものです。