オブジェクトを使ってみよう

このレッスンでは、JavaScriptでオブジェクトを使う基本の書き方を学び、関連する情報をひとまとめに扱えるようになることを目標にします。「JavaScript オブジェクト 使い方」「JavaScript object プロパティ」で調べている初心者向けの内容です。

オブジェクトは「名前: 値」の組み合わせ(プロパティ)でデータをまとめられる仕組みです。{ プロパティ名: 値 }の形で作り、オブジェクト.プロパティ名で値を取り出します。配列が「同じ種類のデータの並び」なら、オブジェクトは「1人分・1件分の情報のかたまり」を表すのに適しています。人物のプロフィールのような、関連する情報をひとまとめにするのに向いています。

サンプルコードではuserというオブジェクトにname・age・hobbyという3つのプロパティを持たせ、user.nameのようにドット記法で値を取り出しています。実際のWebアプリでは、ユーザー情報や商品情報のほとんどがこのオブジェクトの形でやり取りされており、配列とオブジェクトを組み合わせて使う場面も非常に多くあります。

初心者がよくつまずくのが、存在しないプロパティにアクセスしてもエラーにならずundefinedが返ってくる点です。タイプミスに気づかず「値が取得できない」と悩むケースが多いので、プロパティ名のスペルは慎重に確認しましょう。配列と混同してuser[0]のように数字でアクセスしようとするミスもよくあります。

実際の開発現場では、APIから返ってくるJSON形式のデータは、ほぼそのままJavaScriptのオブジェクトとして扱えます。ユーザー登録フォームの入力値をオブジェクトにまとめてサーバーに送信するなど、オブジェクトはWeb開発の至るところで登場する基礎中の基礎です。

オブジェクトの中に配列を持たせたり、配列の中にオブジェクトを並べたりと、オブジェクトと配列は組み合わせて使うことがほとんどです。「ユーザーの配列、それぞれがname・age・hobbyを持つオブジェクト」のような形は、実務のデータ設計で頻繁に登場する典型的なパターンです。

オブジェクトのプロパティを動的に(変数を使って)アクセスしたい場合は、user["name"]のようにブラケット記法を使います。プロパティ名が実行時にならないと分からない場合など、ドット記法では対応できない場面で活躍します。