
【Tips】ドット記法と、ブラケット記法の使い分け
概要
この記事では、ドット記法とブラケット記法についての説明や、各々の違いと使い分けについてまとめたいと思います。
ドット記法
この章ではドット記法について説明をしていきます。
説明
例えばデータとして次のjsonが存在していたとします。
res = {count: "100",status:"200"}
この中からcountの値を取り出すとするとドット記法だと下記のように書けます。
res.count
この取り出し方をドット記法と呼びます。
メリット
- シンタックスが簡潔で読みやすく、最も一般的に使用されます。
デメリット
-
プロパティ名はリテラルでなければなりません。つまり、変数やキーワードではない固定の名前を使用します。
-
プロパティ名にはスペースや特殊文字を含めることができません。
-
頭文字が数字から始まるプロパティ名も採用できません。
ブラケット記法
この章ではブラケット記法について説明をしていきます。
説明
前の説明と同じように、データとして次のjsonが存在していたとします。
res = {count: "100",status:"200"}
この中からcountの値を取り出すとするとブラケット記法だと下記のように書けます。
res['count']
この取り出し方をブラケット記法と呼びます。
メリット
-
プロパティ名にスペースや特殊文字が含まれている場合や、数字で始まる場合にも使用できます。
res['_num']みたいな使い方ができるってことです。 -
計算されたプロパティ名や、動的にプロパティ名を決定する場合に便利です。ということは
res[${num}]とかできるってことです。競プロとかやってる人だと結構馴染みが多い使い方だなと感じます。
デメリット
-
文字列リテラルを使用する場合、タイプミスがコンパイル時には検出されず、実行時にのみ発見される可能性があります。これは、プロパティ名がハードコーディングされているためです。
-
一部のJavaScriptエンジンでは、ブラケット記法がドット記法に比べてわずかに遅くなる可能性があります。これは、ブラケット記法ではプロパティ名が文字列として評価されるため、追加の計算が必要になる場合があるためです。
まとめ
個人的に覚えておく必要がありそうなところをpickするとすれば、固定のプロパティ名にはドット記法が向いており、変数や特殊文字を含むプロパティ名にはブラケット記法が適しているという点かなと思っています。
感想
PRを投げた時にご指摘をいただき、調べた内容をまとめてみたのですが、結構学びになりました。普段使っている記法ですが、メリデメあるので、今後はしっかり考えて選びたいと思います。
あとちょっと競プロが懐かしくなったので来年ちゃんとやろうと思います(多分)
最新記事
- 【設定・環境構築】OpenNext でNext.js SSGサイトをCloudflare Workersにデプロイする完全ガイド
2026/3/19
- 【実装】Notion calloutブロックをNext.jsでカラフルなUIコンポーネントとして表示する
2026/3/19
- 【トラブルシューティング】Cloudflare Pages → Workers 移行で遭遇したEdge Runtime問題集
2026/3/19
- 【実践】Next.js 13→16メジャーアップグレードの全記録 — 破壊的変更と対応策
2026/3/19
- 【自動化】Gemini Imagen APIでブログのeyecatch画像を自動生成してR2にアップロードする
2026/3/19
- 【実装】Notion APIでブログシステムを構築する(Next.js 13 App Router × SDK v5)
2026/3/19
- 【移行ガイド】microCMSからNotion APIへブログCMSを完全移行する
2026/3/19
- 【トラブルシューティング】本番デプロイで遭遇した問題と解決策まとめ
2026/3/15
- 【環境構築】Next.js × Cloudflare Workers の本番環境を一から構築する
2026/3/15
- 【設定・環境構築】Neon → Prisma Postgres 移行とローカル開発環境の構築
2026/2/26


