【JavaScript】ドット記法とブラケット記法とは何か？どっちを使うべきか？使い方や注意点を実例で分かりやすく解説！

JavaScript

2025/10/16

記事内に広告が含まれていることがあります。

JavaScriptでオブジェクトのプロパティにアクセスするとき、obj.prop と obj['prop'] の2つの書き方があるのを知っていますか？

これがドット記法とブラケット記法です。どちらも同じように見えますが、実は使い分けないとエラーの原因になったり、意図した動作にならなかったりすることがあります。

この記事では、この2つの記法が何が違うのか、いつ、どちらを使うべきかを、具体的なコード例を交えて初心者の方にもわかりやすく解説しています。

ドット記法とブラケット記法とは何か？
ドット記法とブラケット記法の違い
どっちを使うべき？
ドット記法とは何か？実例
ブラケット記法とは何か？実例
まとめ

ドット記法とブラケット記法とは何か？

ドット記法とブラケット記法はどちらもJavaScriptにおいて、オブジェクトのプロパティにアクセスするための書き方です。

書き方

ドット記法：　　　オブジェクト名.プロパティ名
ブラケット記法：　オブジェクト名['プロパティ名']

どちらも、値の取得、代入、新規要素の追加をすることができます。

なお、それぞれ英語でドット記法は「Dot Notation」、ブラケット記法は「Bracket Notation」といいます。Notationとは「(表)記法」という意味です。

ドット記法とブラケット記法の違い

多くの場合、同じように結果を取得をすることができますが、プロパティ名に変数が使えるかやプロパティ名に使用できる文字の制限といった点で重要な違いがあります。

まとめると以下のようになります。

項目	ドット記法 (`obj.prop`)	ブラケット記法 (`obj['prop']`)
プロパティ名に変数が使えるか	❌ 使えない	⭕ 使える
プロパティ名の指定方法	プロパティ名をそのまま記述	プロパティ名を文字列として（引用符で囲んで）記述
プロパティ名の制限	あり（ハイフン、スペース、数字始まりなどは不可）	なし（すべての文字列が使用可能）
可読性・簡潔さ	高い	ドット記法に比べて低い
使用例	`user.name`, `data.count`	`user['full-name']`, `data[keyVariable]`

どっちを使うべき？

基本的に、プロパティ名が固定で、かつ通常の文字（英数字やアンダースコア）のみで構成されている場合は、簡潔で可読性の高いドット記法を使います。

ブラケット記法は、次の特別なケースでのみ使用します。

ブラケット記法を使う特殊ケースの例

動的にプロパティにアクセスしたいとき（プロパティ名が変数に格納されている場合）。
プロパティ名にハイフン (-) やスペース、数字で始まるといった特殊な文字が含まれるとき。

ケース	推奨される記法
プロパティ名が固定 (`name`)	ドット記法 (`obj.name`)
プロパティ名が変数 (`const key = 'name';`)	ブラケット記法 (`obj[key]`)
プロパティ名が特殊 (`user-id`)	ブラケット記法 (`obj['user-id']`)

ドット記法とは何か？実例

特徴

ドット記法は、オブジェクト名とプロパティ名をドット（.）でつないでアクセスする方法です。

プロパティ名が固定されている場合や、特殊な文字を含まない場合に使う、最も一般的で読みやすい記法です。

アクセス（値の取得）

オブジェクト名とプロパティ名をドット（.）で繋いで値を取得します。

const car = {
  brand: 'Toyota',
  color: 'White',
  year: 2026
};

// 'brand' プロパティの値を取得
console.log(car.brand);  // 'Toyota'

// 'year' プロパティの値を取得
console.log(car.year);   // 2026

代入（値の変更）

既存のプロパティ名に対して、ドット記法でアクセスし、新しい値を代入（=）することで、値を変更できます。

const car = {
  brand: 'Toyota',
  color: 'White',
  year: 2026
};

// 'color' プロパティの値を 'White' から 'Black' に変更
car.color = 'Black';

console.log(car.color); // 'Black'

新しいプロパティの追加

既存のオブジェクトに存在しないプロパティ名を指定して値を代入すると、そのオブジェクトに新しいプロパティが追加されます。

const car = {
  brand: 'Toyota',
  color: 'White',
  year: 2026
};

// 新しく 'isElectric' プロパティ（値は true）を追加
car.isElectric = false;

console.log(car.isElectric); // false
console.log(car);
// 出力: { brand: 'Toyota', color: 'Black', year: 2022, isElectric: false }

ブラケット記法とは何か？実例

特徴

ブラケット記法は、オブジェクト名に角括弧（[]）を使い、その中に文字列としてプロパティ名を指定してアクセスする記法です。

ドット記法よりも、可読性が下がりますが、変数で指定するといったより柔軟な書き方ができます。

アクセス（値の取得）｜文字列

プロパティ名を直接指定する場合は文字列にする必要があります。引用符（’または”）で囲んで値を取得します。

// car オブジェクトをリセット (上記ドット記法の変更を反映させないため)
const car2 = {
  brand: 'Honda',
  country: 'Japan'
};

// 'brand' プロパティの値を取得
console.log(car2['brand']);  // 'Honda'

注意点

プロパティ名を指定するときに引用符をつけないと、変数名として認識されてしまい、エラーや意図しない挙動となる場合があります。

const car2 = {
  brand: 'Honda',
  country: 'Japan'
};

console.log(car2[brand]);

//※エラーになる
"error"："ReferenceError: brand is not defined

アクセス（値の取得）｜変数

ブラケット記法の最大の強みは、プロパティ名を変数を使って指定できることです。

const car2 = {
  fuelType: 'Gasoline',
  price: 30000
};

// プロパティ名を格納した変数
const myProperty = 'fuelType';

// 変数 myProperty の値 ('fuelType') を使ってプロパティにアクセス
console.log(car3[myProperty]); // 'Gasoline'

補足

上記をドット記法で書いた場合、ドット記法では ‘myProperty’ という名前のプロパティを探してしまうため、意図した値が取得できません。
// console.log(car3.myProperty); // undefined

代入（値の変更）

ブラケット記法で既存のプロパティにアクセスし、新しい値を代入することで値を変更できます。

const car2 = {
  brand: 'Honda',
  country: 'Japan'
};

// 'country' プロパティの値を 'Japan' から 'USA' に変更
car2['country'] = 'USA';
console.log(car2.country); // 'USA'

新しいプロパティの追加

既存のオブジェクトに存在しないプロパティ名を指定して値を代入すると、そのオブジェクトに新しいプロパティが追加されます。

const car2 = {
  brand: 'Honda',
  country: 'Japan'
};

// 新しく 'model' プロパティ（値は 'Civic'）を追加
car2['model'] = 'Civic';

console.log(car2.model); // 'Civic'
console.log(car2);
// 出力: { brand: 'Honda', country: 'USA', model: 'Civic' }