JavaScript初心者にとっての最難関「オブジェクトとは？」という疑問にお答えします。
HTML/CSS ⇒ JavaScriptという学習フローを踏んできた人（もしくは、JavaScriptからプログラミングの学習を始めた人）にとっては、この「オブジェクト」という概念は非常に理解しづらいものになってしまっているのではないでしょうか？
十中八九その理由は、オブジェクト / プロパティ / メソッドをいきなり難しい言葉で説明されてしまうからです。
実は「オブジェクト」は決して難しい概念ではありません。このページでは、オブジェクトとは何か？オブジェクトはどのように利用するのか？を初心者向けに分かりやすく説明します。
JavaScriptでは、このオブジェクトという概念をマスターしないとおそらく実務では全く役に立ちません。
プログラミングに慣れない人でも理解できるよう、平易な言葉で説明しますので是非最後までご覧ください。
JavaScript：オブジェクトとは？
結論から言うと、JavaScriptにおけるオブジェクトとは、プロパティの集合体のこと。
（プロパティとは、変数のようなもので「名前」と「値」を組み合わせたものです。次章で詳細を解説します。）
これ以上の説明はありません。繰り返しになりますが、あくまでもオブジェクトというのは、プロパティの集合体であるという説明以上の説明はありません。
オブジェクトについての詳しい説明・プログラミング的なTipsを説明するといくらでも解説を続けることができますが、初心者にとっての最初の理解は「オブジェクトはプロパティの集合体である」でOKです。
そこで、プロパティって何？という疑問が出てくることでしょう。実は、このプロパティの理解こそオブジェクトを理解する上で重要になってくる鍵なのです。
JavaScript：プロパティとは？
これも結論から言うと、イメージはただの変数です。
プロパティという難しい言葉を用いていますが、分解すれば「名前」と「値」がセットになっているものであるという点で変数と全く同じです。
| プロパティの名前 | プロパティの値 |
|---|---|
| メーカー | apple |
| 色 | 白 |
| 名称 | iPhone 11pro |
| 製造年月日 | 2020/12/31 |
オブジェクトが、よく現実世界に存在するものに例えられることがあることがちょっとだけお分かりになるのではないでしょうか。
「人間」も名前や性別、出身地などのプロパティを持っているという点でよくオブジェクトの例として挙げられますが、原理は全く同じです。あくまでも「オブジェクトはプロパティの集合体である！」です。
それ以上でも、それ以下でもありません。
JavaScript：メソッドとは
それでは、メソッドとは何でしょうか？
これは、プロパティを理解している今なら実は簡単に理解できます。
メソッドとは、プロパティに代入された関数のことです。
"call" というプロパティには、関数（function文）「電話をかける」という処理が紐づけられています。
メソッドとは、ただそれだけです。
代入されているものが、値ではなく関数であるという点を除けばプロパティとメソッドに違いはありません。
もっと言えば、JavaScriptにおいて厳密な意味でのメソッドは存在しません。オブジェクトのメンバ（オブジェクトに含まれる要素）はすべてプロパティであると言えます。
function（関数）は、複数の処理を１つにまとめて名前を付けたものです。
プログラムを組んでいくと、あるメッセージを表示させたり、ポップアップを表示させたり、同じような処理を何度か繰り返す必要があるシーンが出てきます。
そのような複数回出てくる処理を予め定義しておいて、必要なタイミングで呼び出すような形にすればプログラム全体の構造化が図れます。
オブジェクトの定義
さて、ここまででオブジェクトとは何なのか？プロパティ・メソッドって？というのを何となく理解できて来たかと思います。
ここからは、より具体的なイメージをつかむとともに、実践的な知識としてオブジェクトの定義方法を確認していきます。
- オブジェクトリテラルを利用する
オブジェクトリテラル：構文ルール
const obj = { property1 : "Hello World!", // プロパティ１
property2 : 12345, // プロパティ２
...,
method1 : function(){ } //メソッド１
}{ }で囲んだ部分がオブジェクトです。
※ { } のことをオブジェクトリテラルと呼びます。
プロパティ：構文ルール
property1 : "Hello World!", // プロパティ１ property2 : 12345, // プロパティ２
プロパティは、オブジェクトリテラルの中に記述していきます。
名前とその値を:（コロン）で区切ります。プロパティを複数定義する際には、 ,(カンマ)で区切って順次定義していきます。
プロパティの値には、変数を指定することも可能です。
const hensu1,
hensu2;
const obj = { property1 : hensu1, // プロパティ１は変数１を参照
property2 : hensu2, // プロパティ２は変数２を参照
...,
method1 : function(){ } //メソッド１
}オブジェクトの利用
最後の章では、オブジェクトを利用する方法を解説していきます。
先ほど定義したオブジェクトのプロパティを参照する形で、プロパティの値を表示したり、プロパティに代入された関数（メソッド）を実行することができます。
プロパティの参照方法は、大きく２種類存在します。
ドット記法
オブジェクト名.プロパティ名
ブラケット記法
オブジェクト名['プロパティ名']
プロパティの呼び出し：ドット記法
ドット記法はその名の通り「オブジェクト名.プロパティ名」と記述するだけです。
See the Pen ドット記法 by ビズドットオンライン (@BizOnline) on CodePen.
上記サンプルコードでは、phoneオブジェクトのmakerプロパティを画面に表示しています。
document.write(phone.maker); //phoneオブジェクトのmakerプロパティを出力
また、同じようにメソッドも関数を呼び出すときと同じように後ろに( )を置くだけで呼び出せます。phoneオブジェクトのcallingメソッドを実行しています。
phone.calling();
ブラケット記法
ブラケット記法は、オブジェクト名['プロパティ名']というように記述します。[]を利用して、プロパティにアクセスするイメージ。
See the Pen ブラケット記法 by ビズドットオンライン (@BizOnline) on CodePen.
プロパティの呼び出し部分はこちら。
document.write(phone['maker']);
ブラケット記法では、
メソッドの呼び出し部分はこちら。
phone['calling']();
オブジェクトとは何か？プロパティ・メソッドとは何か？
JavaScript初心者向けに、余計な説明を省いて解説してきました。ここまでで、なんとなくオブジェクトのイメージが沸いたのではないでしょうか。
JavaScriptを体系的に学びたい方は
プログラミングをより実践的に学びたい―。実際にコーディングをしながら学びたい―。独学に限界を感じている―。
そんな方には、無料体験/オンライン完結もあるプログラミングスクールで学ぶのがおすすめです。都度検索しながら知識を補完していくのではなく、１から体系立てて学ぶことで短時間・かつ効率的にスキルハックすることが可能です。
各プログラミングスクールの特徴をまとめた記事をこちらに記載しておきますので、是非ご覧ください。
