先生と生徒の会話形式で理解しよう

生徒

「JavaScriptで、オブジェクトの中の情報を取り出したいんですけど、どうすればいいですか？」

先生

「JavaScriptでは、オブジェクトの中の情報を『プロパティ』と呼びます。それにアクセスするには2つの方法があります。」

生徒

「その2つの方法って、具体的にはどういうものですか？」

先生

「ドット記法とブラケット記法と呼ばれる方法です。実際のコードと一緒に説明していきましょう！」

1. オブジェクトのプロパティとは？

JavaScriptのオブジェクトは、複数の情報をまとめて管理できる便利な仕組みです。その中にある一つ一つの情報のことを「プロパティ」と呼びます。

例えば、「人」の情報をまとめたオブジェクトがあったとします。その中の「名前」や「年齢」などがプロパティです。

2. ドット記法でプロパティにアクセスする

ドット記法は、オブジェクト名のあとに「.（ドット）」を付けて、取り出したいプロパティ名を書く方法です。


const person = {
  name: "鈴木一郎",
  age: 25,
  job: "エンジニア"
};

console.log(person.name);
console.log(person.age);
console.log(person.job);

このように書くと、nameプロパティの中身（「鈴木一郎」）が取り出され、画面に表示されます。


鈴木一郎
25
エンジニア

ドット記法は見た目もスッキリしていて、プロパティ名が決まっている場合に便利です。

3. ブラケット記法でプロパティにアクセスする

ブラケット記法は、角かっこ「[ ]」の中に文字列としてプロパティ名を書く方法です。文字列なので" "（ダブルクオート）か' '（シングルクオート）で囲む必要があります。


console.log(person["name"]);
console.log(person["age"]);
console.log(person["job"]);


鈴木一郎
25
エンジニア

ブラケット記法の特徴は、「プロパティ名を変数として使えること」です。


const key = "job";
console.log(person[key]); // "エンジニア"

このように、keyという変数にプロパティ名を入れておき、その変数を使って値を取り出すことができます。

4. ドット記法とブラケット記法の違いと使い分け

ここまでの説明をまとめると、次のように違いがあります。

ドット記法：シンプルで読みやすい。プロパティ名が英数字のみのときに使用。
ブラケット記法：プロパティ名にスペースや記号が含まれているときや、変数で指定したいときに使う。

例えば、スペースが入っているプロパティ名は、ドット記法では使えません。


const data = {
  "user name": "田中太郎"
};

console.log(data["user name"]); // OK
// console.log(data.user name); ← エラーになります

5. 存在しないプロパティにアクセスした場合

オブジェクトに存在しないプロパティを指定すると、JavaScriptはエラーではなくundefined（未定義）を返します。


console.log(person.hobby); // undefined（hobbyは定義されていないため）

これは「そのプロパティはまだ設定されていませんよ」という意味です。エラーではないので、安心して使えますが、undefinedが返ってきたら、スペルミスやプロパティ名の確認をしましょう。

6. オブジェクトと配列を組み合わせたアクセス例

実際のプログラムでは、オブジェクトの中に配列が入っていたり、配列の中にオブジェクトがあることもよくあります。以下は、オブジェクトのプロパティとして配列を持つ例です。


const user = {
  name: "佐藤花子",
  skills: ["HTML", "CSS", "JavaScript"]
};

console.log(user.skills[0]); // "HTML"
console.log(user["skills"][2]); // "JavaScript"

このように、オブジェクトと配列を組み合わせることで、より複雑な情報を整理して扱うことができます。

まとめ

JavaScriptでオブジェクトのプロパティにアクセスする方法は、日常的なコードを書く上で欠かせない大切な基礎知識です。ドット記法とブラケット記法はどちらも広く使われており、場面に応じて正しく使い分けることで、コードの読みやすさや保守性が大きく変わります。オブジェクトに格納された情報を簡潔に取り出す技術は、データの操作や画面表示、APIから受け取った複雑なデータの扱いなど、あらゆる処理の土台となります。特にJavaScriptではオブジェクトを中心にさまざまな型がつくられているため、今回の学習内容を理解しておくと応用の幅が一気に広がります。まず、ドット記法は最もよく使われる書き方で、視認性が高く自然な形でプロパティにアクセスできます。プロパティ名が明確で、スペースや記号が含まれていない場合にはドット記法が最も適しています。一方で、ブラケット記法は柔軟性が高く、プロパティ名を文字列として扱えるため、変数にプロパティ名を入れておき、それを使ってアクセスするような動的なケースに非常に便利です。さらに、スペースや日本語など通常の変数名には使えない文字が含まれるプロパティにアクセスしたい場面では、ブラケット記法が必須となります。また、存在しないプロパティにアクセスした場合にundefinedが返る動作も、JavaScriptの特徴として覚えておくと安心です。実際の開発では、プロパティの存在確認やデータの整形をする機会が多いため、正しい挙動を理解することがバグ防止に繋がります。オブジェクトと配列を組み合わせたケースでは、一段階だけでなく複数段階のアクセスが必要になることも多く、ドット記法とブラケット記法を組み合わせながら柔軟に扱えるようにしておくと、複雑なデータ構造にも対応しやすくなります。以下に、今回の内容をふり返りつつ、複数のプロパティを組み合わせた実践的な例を用意しました。オブジェクト、配列、そしてブラケット記法・ドット記法の両方を使ってデータを扱うので、全体の流れをしっかり整理しながら理解を深めることができます。

サンプルコード：複雑なオブジェクトから情報を取り出す例


const profile = {
  name: "山田太郎",
  age: 30,
  address: {
    city: "東京",
    zip: "100-0001"
  },
  favorites: {
    foods: ["カレー", "寿司", "ラーメン"],
    sports: {
      indoor: ["卓球", "バドミントン"],
      outdoor: ["野球", "サッカー"]
    }
  }
};

console.log(profile.name); // ドット記法
console.log(profile.address.city); // ネストされたプロパティにアクセス
console.log(profile["favorites"]["foods"][1]); // ブラケット記法で配列の要素取得
console.log(profile["favorites"].sports.outdoor[0]); // 組み合わせ例

この例では、オブジェクトの中に複数のオブジェクトや配列が含まれている状態を扱っています。ネストが深くなるほど、ドット記法とブラケット記法の理解がより重要になります。プロパティ名がはっきり決まっている部分にはドット記法を使い、動的に指定したい部分や文字列のキーが使われている部分ではブラケット記法を活用するのが一般的なスタイルです。こうした使い分けを自然に行えるようになると、APIレスポンスの処理や画面表示用データの整形などにもスムーズに対応できるようになります。さまざまなデータ構造に触れるうちに、どの方法が最も読みやすく、後々の修正にも強い書き方なのかを自分で判断できるようになるでしょう。JavaScriptの学習を続ける上で、今回の基礎は必ず役に立つ場面が来るため、日々のコードで意識して使っていくのがおすすめです。

先生と生徒の振り返り会話

生徒

「今日の内容で、ドット記法とブラケット記法の違いがよくわかりました！特にプロパティ名を変数で扱えるのが便利だと思いました。」

先生

「そうだね。ブラケット記法は柔軟性が高いから、動的にデータを扱うときには欠かせない方法なんだよ。状況に応じて自然に使い分けられるようになると一気にレベルアップするよ。」

生徒

「オブジェクトの中にさらにオブジェクトが入っている場合でも、今回の学びを使えば迷わずアクセスできる気がします！」

先生

「それは素晴らしいね。基礎をしっかり押さえておくと、複雑なデータ構造でも落ち着いて読み解けるようになるから、これからも色々な例に触れて理解を深めていこう。」