このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。
【JavaScript入門】オブジェクトのプロパティへのアクセス
オブジェクトのプロパティへのアクセス
JavaScript のオブジェクトには、名称（キー）と値がペアになった「プロパティ」を保持しています。プログラムでオブジェクトを操作する際には、それらのプロパティへアクセスしたり、新しい値を代入することでデータを操作します。プロパティにアクセスする方法には主に2通りがあり、「.（ドット）」や「[]（角括弧）」を活用するのがポイントです。
１．プロパティへのアクセス方法
1.1. ドット記法
オブジェクト.プロパティ名これは最もよく使われる形です。プロパティ名に英数字やアンダースコアなどを使用している場合、この書き方が自然でわかりやすいです。
1.2. ブラケット記法（角括弧）
オブジェクト["プロパティ名"] プロパティ名がハイフンを含んでいたり、変数でプロパティ名を動的に指定したいときには、こちらを使います。また、プロパティ名を文字列（"" や ' ' で囲む）として明示する必要があります。
どちらの記法も、プロパティ値の取得・変更に使えます。
２．サンプル例：プロパティの読み取りと書きかえ
ファイル名を「myObjectPropertyAccess.html」とし、ブラウザで開いてコンソールを確認してください。
【myObjectPropertyAccess.html】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>myObjectPropertyAccess.html</title>
</head>
<body>
<h1>オブジェクトのプロパティへのアクセス</h1>
<p>ブラウザの開発者ツール(コンソール)を開いて結果を確認してください。</p>
<script>
// 1. オブジェクトを作成
const studentGrades = {
taro: 'A',
hanako: 'B'
};
// 2. プロパティ値の取得
console.log(studentGrades.taro); // ドット記法
console.log(studentGrades['hanako']); // ブラケット記法
// 3. プロパティ値の書き換え
studentGrades.taro = 'A+';
studentGrades['hanako'] = 'B+';
console.log(studentGrades.taro);
console.log(studentGrades['hanako']);
// 4. 入れ子のオブジェクト
const menu = {
sandwich: { name: 'ハムサンド', price: 350 },
drink: { name: 'オレンジジュース', price: 200 }
};
// 4.1. プロパティ値の読み取り
console.log(menu.sandwich.name); // "ハムサンド"
console.log(menu['drink']['price']); // 200
// 4.2. プロパティを変数に代入してからのアクセス
const drinkItem = menu.drink;
console.log(drinkItem.name);
// 5. 存在しないプロパティにアクセス
console.log(studentGrades.tomoko); // undefined（エラーにはならない）
</script>
</body>
</html>実行結果
デバッグコンソールの出力
A
B
A+
B+
ハムサンド
200
オレンジジュース
undefined３．入れ子のオブジェクトでのプロパティ参照
オブジェクトの値として別のオブジェクトが入る場合、深い階層のプロパティを取得することがよくあります。その際は「.」「[]」の記法を繰り返し使います。
console.log(menu.drink.name); // ドット記法を連続
console.log(menu['drink']['name']); // ブラケット記法を連続また、一部を変数に代入しておき、その変数からさらに深いプロパティを参照する書き方もできます。
４．存在しないプロパティへのアクセス
オブジェクトに定義されていないプロパティを参照すると、undefined が返ります。これはエラーではなく、プロパティが存在しないことを示す特殊な値です。
const user = { name: 'sakura' };
console.log(user.age); // undefinedまとめ
- ドット記法：
オブジェクト.プロパティ名 - ブラケット記法：
オブジェクト["プロパティ名"] - 入れ子の構造では、
.と[]の組み合わせを自由に使える。 - 存在しないプロパティ名を指定すると
undefinedが返る。
オブジェクトのプロパティへのアクセス方法を把握すると、データ構造を柔軟に扱うことができるようになります。特に変数をキーとして使いたいときや、プロパティ名に特殊文字を含むときにはブラケット記法が必須です。いろいろな場面で使い分けられるようになりましょう。