6.1 オブジェクトとオブジェクトリテラル
JavaScript におけるオブジェクトとは、「キー（名前）」と「値（データ）」のペアをひとまとめにしたデータ構造のことです。関連する複数のデータをひとまとめにして管理するための「箱」のようなものです。
キー
データの項目名（ラベル）です。（例: name, age）
値
その項目に入る具体的な中身です（例: “Alice”, 25）。
例えば「ユーザー」という存在をプログラムで表現したいとします。
ユーザーには「名前」や「年齢」といったデータがあり、「挨拶をする」といった動作が考えられます。これらをバラバラの変数（userName, userAge…）で管理するのではなく、ひとつの「ユーザーオブジェクト」としてまとめて管理するのが、オブジェクト指向の基本的な考え方です。
JavaScript でオブジェクトを使うことで「データ（属性）」と「動作（機能）」をセットで管理できるようになります。
オブジェクトの中にある「値」は、その種類によって呼び方が変わります。
プロパティ（Property）
「名前」や「年齢」のように、単なるデータ（数値や文字列など）が保存されているものです。Java でいう「フィールド（メンバ変数）」に該当します。
メソッド（Method）
「挨拶する」のように、動作（関数）が保存されているものです。Java でいう「メソッド」に該当します。
また、オブジェクトのメソッドとして定義された関数の中で「自分自身（そのオブジェクト）が持っているプロパティ」を使いたい場面が出てきます。その時に使うのが this キーワードです。
this.name と書くと「このオブジェクト（自分）の name プロパティ」という意味になります
JavaScript でも Java によく似た形でオブジェクトを利用することが可能になっています。最もシンプルにオブジェクトを作成する方法が、中括弧 { } を使うオブジェクトリテラルという書き方です。
6.1.1 オブジェクトとオブジェクトリテラルを確認するプログラム
実際に「ユーザーオブジェクト」を作成し、そのデータや機能を呼び出してみましょう。
ソースフォルダ：public/ch06
ファイル名：object.js
➢ object.html
前の章で作った ch05/ array-reduce.html をコピーし、ch06 にペーストしてください。
その際に、ファイル名を object.html に変更します。
ファイル内の array-reduce.html や array-reduce.js の記述も、object.html や object.js に修正します。
➢ object.js
// object.js
// ユーザー情報を管理するオブジェクトを「オブジェクトリテラル」で作成します
const user = {
// 【プロパティ】データの定義
name: "Alice", // キー: name, 値: "Alice"
age: 25, // キー: age, 値: 25
// 【メソッド】動作の定義（挨拶をする機能）
greet: function() {
// 「this.name」で自分自身のnameプロパティ（"Alice"）を参照します
return "こんにちは！私の名前は " + this.name + " です。";
}
};
// オブジェクトのデータや機能を呼び出してアラートで表示します
// ドット（.）を使って中身にアクセスします
alert("ユーザー名: " + user.name);
alert("メソッドの呼び出し: " + user.greet());
実行結果
解説
今回のサンプルでは、const 宣言で user というオブジェクトを定義しています。
3 行目の user = にすぐ続いて、中括弧 { }でくくられた部分が存在します。
ここの部分は、このオブジェクトには、どんなプロパティやメソッドが存在しているかを記述している部分になります。この中括弧 { }の中のデータ構造を表す記法がオブジェクトリテラルです。
JavaScript は、Java や PHP のようなクラス定義がなくても、このオブジェクトリテラルで記述されたものをインラインでオブジェクトとして扱うことができます。
9 行目と 10 行目で user という名前のオブジェクトに、name と age というキーと値をもつプロパティを、13行目で greet というキーを持つ function をメソッドとして追加しています。
greet の中では、同じオブジェクト内の name プロパティを this キーワードで参照して、取得しています。
所得した name プロパティの値を、挨拶メッセージの中に加えて、メソッドの結果として返却しています。
7: const user = {
8: // 【プロパティ】データの定義
9: name: "Alice", // キー: name, 値: "Alice"
10: age: 25, // キー: age, 値: 25
11:
12: // 【メソッド】動作の定義（挨拶をする機能）
13: greet: function() {
14: // 「this.name」で自分自身の name プロパティ（"Alice"）を参照します
15: return "こんにちは！私の名前は " + this.name + " です。";
16: }
17: };
このオブジェクトとオブジェクトリテラルは、次の項で学習する JSON（ジェイソン）とも関連する重要な部分ですので、しっかり押さえておいて下さい。
ポイント
-
JavaScript のオブジェクトは以下の構造で表現される。これをオブジェクトリテラルという。
{ キー1: 値 1, キー2: 値 2, キー3: 値 3, …. }