オブジェクトとは?

Updated
2021/8/8 9:22
Author
Jumpei IkegamiJumpei Ikegami
order
4

オブジェクトとは?

JavaScriptを使う上で、「オブジェクト」という概念を避けて通ることのできない重要な概念です。
JavaScriptでいうオブジェクトとは、関連のあるデータや処理をまとめたものです。プログラム中でデータや処理を保持するには「変数」を使っていました。しかし、変数が増えてくると管理が煩雑になってきます。そこで、ファイルをフォルダで分類するように、関連する変数をオブジェクトとしてまとめることができます。
また、JavaScriptでは予め用意されたオブジェクトがたくさんあります。そのオブジェクトには便利な関数(メソッド)がたくさん登録されています。
なお、この記事人は変数や関数の話が出てきます。よくわからなくなったら次のリファレンスを参照してください。
変数とは?2021/6/20 6:082021/8/8 9:18関数とは?2021/6/20 6:082021/8/8 9:30
 

オブジェクトを新規作成する

オブジェクトは自由に新しく作ることができます。たとえばあるTシャツに関する情報をオブジェクトとしてまとめたいとき、次のように記述します。
JavaScript
この例では、変数の宣言、オブジェクトの作成、変数へのオブジェクトの代入を同時にやっています。
オブジェクトに格納された個々のデータのことを、プロパティと呼びます。プロパティも含めてオブジェクトを新規作成するとき、次のようなフォーマットで記述します。
JavaScript
1つのオブジェクトに登録できるプロパティの数は特に決まっていません。次のように、プロパティが1つも無いオブジェクトを作ることもできます。
JavaScript

プロパティとはオブジェクトの中の変数

オブジェクトは、関連するデータを1つにまとめるために使われます。データを格納するには「変数」を使います。オブジェクトとはいわば、本来バラバラである変数を詰め込むための1つのフォルダのようなものです。オブジェクトに詰め込まれた変数のことは、特に「プロパティ」と呼ばれます。
変数と同じで、オブジェクトのプロパティには次のような特徴があります。
  • どんなデータ型のデータも格納できる
  • プロパティの名前は(基本的に)自由に付けることができる
また、プロパティに値を代入したり、値を取り出したりする方法もほとんど同じです。
JavaScript
上記の例でわかるように、変数の場合は「変数名」を書いていたところが「オブジェクト名.プロパティ名」のように変わるだけです。

プロパティと変数との違い

オブジェクトのプロパティを新規追加する場合、変数と違って特にvarなどで宣言をする必要はありません(し、できません)。実際、上記の例でも空のオブジェクトを格納するためのtshirtという変数の宣言はしていますが、その中のnameプロパティは宣言せずいきなり使っています。
また、オブジェクト名.プロパティ名のような参照方法以外に、オブジェクト名['プロパティ名']というトリッキーな参照方法も提供されています。
JavaScript
基本的にはオブジェクト名.プロパティ名を使った方が楽ですが、オブジェクト名['プロパティ名']の方を使うとプロパティ名を動的に生成できて便利なことがあります。(具体例が無いととてもわかりにくいので、今は読み飛ばして大丈夫です。)

オブジェクトの階層

プロパティには、「どんなデータ型のデータも格納できる」という特徴がありました。もちろん、オブジェクトのプロパティに対してさらにオブジェクトを格納することもできます。これによって、2階層以上の階層をもったオブジェクトを作ることもできます。
JavaScript
参照するときは、いまあなたが想像した通り、オブジェクト名.プロパティ名1.プロパティ名2のようにドットでつないでいきます。
JavaScript

予め用意されたオブジェクトたち

実際にプログラムを書いていると、オブジェクトを自分で作るよりも、JavaScriptやブラウザによって予め用意されたオブジェクトを使うことの方が多いかもしれません。
たとえば、チュートリアルで紹介したブックマークレットでは、次のようなJavaScriptを記述しました。
JavaScript
2. ワンクリックでAmazonの商品名をGoogle検索するボタンを作る2021/6/20 4:332021/8/8 8:00
 
ここでは、自分で作成した覚えのない変数documentや変数locationが使われています。これらの変数はブラウザによって予め用意されたもので、便利な関数やプロパティが詰まったオブジェクトが格納されています。
なお、オブジェクトのプロパティに格納された関数は、特に「メソッド」と呼ばれます。
ここで詳しく説明はしませんが、JavaScriptやブラウザによって用意されたオブジェクトの中から、よく使うものを列挙します。

JavaScriptによって用意されたオブジェクト

JavaScriptでよく使う処理については、JSが用意したオブジェクトのメソッドとして予め登録されていることがあります。よく使うオブジェクトは次の通りです。
  • Date(日付操作など)
  • Math(数の切り上げや切り捨てなど)
  • JSON(JSON操作など)
JavaScriptによって用意されたオブジェクトについて詳しく知りたい場合は、次のドキュメントを参照してください。

ブラウザによって用意されたオブジェクト

ブラウザに関連するデータや処理については、ブラウザが用意したオブジェクトのプロパティやメソッドとして予め登録されていることがあります。よく使うオブジェクトは次の通りです。
  • document(ページのコンテンツに対する操作など)
  • location(タブが開いているURLに対する操作など)

もっと詳しく知りたい方へ