自分のオブジェクトを作る

以前、「オブジェクトの中を見てみてみよう」のセクションで見たように、JavaScriptでは、波括弧 { } を使って、自分だけのオブジェクトを作る ことができます。

また、「配列はいれつ」セクションの「連想配列はいれつ」で見た通り、ドット.やブラケット[]を使って、中のデータを取り出すことができます。

Note

思い出してください。「連想配列はいれつ」はオブジェクトの一種でしたね。

このセクションでは、これまでに説明したオブジェクトの特徴を振ふり返かえりながら、自分のオブジェクトを作る方法をまとめます。

I. 「ユーザー定義ていぎオブジェクト」とは？

前の章までは、ブラウザのオブジェクトやJavaScriptの組くみ込こみオブジェクトなど、あらかじめ作られていたり、あるいはnew演算えんざん子ですぐに作ることのできるものを扱ってきました。

しかし、JavaScriptのオブジェクトは、それだけではありません。

JavaScriptの「ユーザー定義ていぎオブジェクト」は、あらかじめ用意されている道具（ブラウザやシステムが作ったもの）ではなく、「自分たちで自由に作る新しいキャラクターや道具」 のことです。

たとえば、「学生（Student）」 をプログラムの中で表現したいとき、名前、年齢、国籍などをひとつにまとめて「ユーザー定義ていぎオブジェクト」を作ることができました。

JavaScriptでは { } を使って、このように書きます。

const student = {
  name: "マリア",  // 名前
  age: 20,         // 年齢
  country: "ブラジル" // 出身
};

また「オブジェクト」は名前や年齢といったデータだけでなく、そのオブジェクトの行動も、書き加えるができました。

この考え方は、ゲームのキャラクターに例たとえると非常に分かりやすくなります。

オブジェクト：キャラクター自身（例れい：勇者ゆうしゃアレン）
プロパティ：ステータス（例れい：hp や name）
メソッド：行動（例れい：attack() や heal()）

コードでの例れい:

const hero = {
  name: "Allen"      // 特徴（プロパティ）
  hp: 100,           // 特徴（プロパティ）
  level: 5,          // 特徴（プロパティ）
  
  attack: function() { 
    alert("エイッ！と攻撃しました"); // 動（うご）き（メソッド）
  }
};

II. オブジェクトの「中身」は2種類

オブジェクトの中には、この2つが入っています。

プロパティ（Property）： そのモノの「特徴（データ）」

例れい：名前は「アリ」さん、国籍は「エジプト」。

メソッド（Method）： そのモノができる「動うごき（仕事）」

例れい：「自己じこ紹介する」、「テストを受ける」。

III. 書かき方かたのイメージ

こんなコードのイメージを考えてみてください。

// 「学生」という名前のオブジェクトを自分で定義（ていぎ）（ていぎ）する
const student = {
  // プロパティ（特徴）
  name: "Ali",
  country: "Egypt",
  age: 20,

  // メソッド（動（うご）き）
  sayHello: function() {
    console.log("こんにちは！私は " + this.name + " です。");
  }
};

// 使い方
console.log(student.name); // "Ali" が出てくる
student.sayHello();        // "こんにちは！私は Ali です。" としゃべる！

IV. プロパティとメソッドの利用：情報の取り出しと実行

作ったオブジェクトの中身を使うには、2つの書かき方かたがあります。

ドット記法きほう（きほう）： person.name のように、ドット . でつなぎます。プロパティ名が分かっているときに使います。
ブラケット記法きほう： person[“name”] のように、角括弧 [ ] を使います。

こうした記法きほうは、これまで学んできたものと同じです。

「So What?（だから何？）」：なぜ2つあるのか

ドット記法きほうは速く書けて便利ですが、ブラケット記法きほうは「変数へんすう」を使って中身を選べるのが強（つよ）みです。

const key = "name";
console.log(person[key]); // "Allen" と表示（ひょうじ）されます。keyの中身を変えれば、取れるデータも変わります。

また、メソッドを呼び出すときに person.greet() と丸括弧 () を書くのは、「そのアクションを今すぐ動かしてください」という合図（あいず）です。

V. なぜ「自分だけのオブジェクト」を作るのか

なぜオブジェクトが必要なのか、もう一度、考えてみましょう。

プログラミングを始めたばかりのころは、変数へんすうを使ってデータを保存（ほぞん）します。しかし、プログラムが複雑（ふくざつ）になると、変数へんすうが多すぎて管理（かんり）が難（むずか）しくなります。

もし、バラバラの変数へんすうがたくさんあると、どこで何を使っているか分からなくなり、ミスが増えます。仕事でプログラムを書く「チーム開発かいはつ」では、これは大きな問題です。他の人があなたのコードを読んだとき、すぐに理解できないと、プロジェクトが止まってしまうからです。

そこで必要になるのが 「オブジェクト」 です。関連（かんれん）するデータと機能をひとつの「箱（はこ）」にまとめることで、コードが整理（せいり）され、現実（げんじつ）の世界にあるものをプログラムの中で表現しやすくなります。

まとめテーブル

言葉	意味	覚え方のヒント
ユーザー定義ていぎ	自分で作ること	「私専用せんよう（せんよう）」
プロパティ	特徴、データ	「〜は〜だ」
メソッド	仕事、動うごき	「〜をする」
インスタンス	設計図から作った実物	「アリさん本人」

いかがでしょうか？「自分たちで新しいモノの形を決められる」というのが、オブジェクト指向しこうプログラミングの第一歩いっぽです。

開発かいはつのアドバイス

名前は英語で： JavaScriptのルールとして、プロパティ名は “name” のように意味（いみ）のわかる英語で書くのが一般的（いっぱんてき）です。
なぜ const なのか？：オブジェクトを作るとき、ふつうは const を使います。これは「箱そのもの」を変えないためです。箱の中身（年齢など）が変わっても、箱自体じたい（personという変数へんすう）が別物にならなければ、const で問題（もんだい）ありません。
書かき方かたのコツ：複数のプロパティを書くときは、カンマ , を忘れないでください。忘れるとエラーになります。

Keyboard shortcuts