JavaScriptオブジェクトのキー（プロパティ名）の書き方、全部解説します！

こんにちは！ JavaScriptでプログラミングをしていると、オブジェクトのキー（プロパティ名）の書き方がいくつかあって、「あれ？これはどういう意味だっけ？」と混乱することはありませんか？

{ key: value } だけでなく、[変数]: value とか、obj.key と obj['key'] の違いとか、ちょっとごちゃごちゃして見えますよね。

この記事では、そんなJavaScriptオブジェクトのキーに関するあらゆる表現方法を、一つ一つ丁寧に、オリジナルのサンプルコードを交えながら解説していきます。TypeScriptでの書き方も少し触れます。

---

1. オブジェクトリテラルでのプロパティ定義（一番基本！）

まずは、オブジェクトを直接書く（オブジェクトリテラルと呼びます）ときの、最も基本的なプロパティの定義方法から見ていきましょう。

1-1. 固定の文字列をキーにする場合

これが一番よく見かけるパターンです。キーとなる名前を直接書きます。

// ある学生の情報を表すオブジェクト
const student = {
  name: "花子",       // 'name' という固定の文字列がキー
  age: 20,           // 'age' という固定の文字列がキー
  major: "情報科学"  // 'major' という固定の文字列がキー
};

console.log(student);
// 出力: { name: '花子', age: 20, major: '情報科学' }

このとき、キーのnameやageは、実は自動的に文字列として扱われています。もし明示的に文字列にしたい場合は、クォーテーションで囲むこともできますが、通常は省略されます。

const anotherStudent = {
  "name": "太郎",   // クォーテーションで囲んでもOK
  "age": 21
};

console.log(anotherStudent.name); // 出力: 太郎

基本的にはクォーテーションなしで大丈夫ですが、もしキーにスペースを含めたい場合は、後述する文字列として明示的に指定する必要があります。

1-2. 変数や計算結果をキーにする場合：算出プロパティ名 [keyName]: value

「[key]: value」の書き方です！
この角括弧 [] で囲むのがポイントで、「ここに入るキーの名前は、変数の中身や計算結果で決まるよ！」という意味になります。

例えば、フォームで入力された項目名をそのままオブジェクトのキーにしたい時などに役立ちます。

const itemType = "fruit"; // 変数 `itemType` の中身がキーになる
const itemName = "apple";

const inventory = {
  [itemType]: itemName, // `itemType` の値である 'fruit' がキーになる！
  quantity: 5
};

console.log(inventory);
// 出力: { fruit: 'apple', quantity: 5 }

// もし `itemType` が 'vegetable' だったら...
const anotherItemType = "vegetable";
const anotherItemName = "carrot";

const anotherInventory = {
  [anotherItemType]: anotherItemName // 'vegetable' がキーになる！
};

console.log(anotherInventory);
// 出力: { vegetable: 'carrot' }

これは、オブジェクトを定義する際に、キーの名前を動的に決めたい時に非常に便利です。以前は、一度オブジェクトを作ってから、後でobj[変数名] = 値;のようにプロパティを追加する必要がありました。

// 昔の書き方（算出プロパティ名がない場合）
const oldInventory = {};
const keyName = "drink";
oldInventory[keyName] = "coffee"; // 後からブラケット記法で追加

console.log(oldInventory); // 出力: { drink: 'coffee' }

今は、[keyName]: value のように、オブジェクトを定義する時点で、変数を使ってキーを指定できるようになりました。これにより、コードがよりスッキリと書けるようになります。

1-3. 変数名をそのままキー名にする場合（ショートハンドプロパティ）

もし、キーの名前と、その値を入れる変数の名前が全く同じ だったら、もっとシンプルに書くことができます。

const name = "佐藤";
const score = 85;
const subject = "数学";

const studentResult = {
  name,    // 'name: name' と同じ意味！
  score,   // 'score: score' と同じ意味！
  subject  // 'subject: subject' と同じ意味！
};

console.log(studentResult);
// 出力: { name: '佐藤', score: 85, subject: '数学' }

これは「プロパティショートハンド」と呼ばれる記法で、コードの量を減らすことができる便利な機能です。

---

2. オブジェクトのプロパティへのアクセス方法

オブジェクトに定義されたプロパティの「値」を取り出す方法も、いくつか種類があります。

2-1. ドット記法（一番よく使う！）

一番シンプルで、ほとんどの場合に使われるのが「.（ドット）」を使った方法です。

const book = {
  title: "JavaScript入門",
  author: "コード太郎",
  pages: 300
};

console.log(book.title);  // 出力: JavaScript入門
console.log(book.author); // 出力: コード太郎

注意点:

• ドット記法は、キーが固定の文字列で、JavaScriptの変数名として有効な場合 にしか使えません。
• 例えば、キーにスペースが含まれていたり、数字から始まっていたりする場合は使えません。

2-2. ブラケット記法 obj['key']

キーを文字列として角括弧 [] の中に書く方法です。

const game = {
  name: "ファンタジーRPG",
  "release date": "2024-07-20", // キーにスペースが含まれている！
  'price': 6000,
  1: "初回限定版" // キーが数字！
};

console.log(game['name']);         // 出力: ファンタジーRPG
console.log(game['release date']); // 出力: 2024-07-20 (スペースがあってもOK！)
console.log(game['price']);        // 出力: 6000
console.log(game[1]);              // 出力: 初回限定版 (数字のキーもOK！)

ドット記法とブラケット記法の使い分け:

• ドット記法 (obj.key)：

  • キーが固定の文字列で、かつJavaScriptの変数名として有効な場合（文字で始まり、文字、数字、アンダースコア、$のみを含む）。
  • 記述がシンプルなので、基本的にはこちらを使います。

• ブラケット記法 (obj['key'])：

  • キーにスペースやハイフン、特殊文字などが含まれる場合。
  • キーが数字の場合。
  • キーが変数に格納されていて、動的にアクセスしたい場合（次の項目で解説します！）。

2-3. ブラケット記法 obj[variable] で動的にアクセスする

これが、先ほどオブジェクトリテラルで見た「算出プロパティ名」のアクセス版です。
キーの名前が変数に入っている場合や、計算によってキーを決めたい場合は、ブラケット記法を使います。

const userProfile = {
  id: "user123",
  username: "programming_lover",
  email: "[e-mail]"
};

const keyToAccess = "username"; // 変数にキー名を入れる
console.log(userProfile[keyToAccess]); // 出力: programming_lover

// もし別のキーにアクセスしたいなら
const anotherKey = "email";
console.log(userProfile[anotherKey]); // 出力: [e-mail]

// 関数を使って動的にキーを生成することもできる
function getProperty(obj, prefix, index) {
  const dynamicKey = `${prefix}${index}`; // 例: 'item0', 'item1' など
  return obj[dynamicKey];
}

const data = {
  item0: "りんご",
  item1: "バナナ",
  item2: "みかん"
};

console.log(getProperty(data, "item", 1)); // 出力: バナナ

このobj[variable]という書き方は、特にデータがリスト形式になっていて、そのインデックス（番号）を使ってデータを取り出したい時によく使われます。

---

3. TypeScriptでの型定義（ちょっとだけ触れておこう！）

TypeScriptを使うと、オブジェクトがどんなキーを持ち、それぞれがどんな型の値を持つのかを前もって「型」として定義することができます。これにより、プログラムのミスを早い段階で見つけやすくなります。

3-1. オブジェクトの型定義（インターフェースまたはタイプエイリアス）

// 学生情報の型を定義
interface StudentInfo {
  name: string;
  age: number;
  major?: string; // ? をつけると「あってもなくてもOK（オプショナル）」
}

const student1: StudentInfo = {
  name: "優子",
  age: 22,
  major: "経済学"
};

const student2: StudentInfo = {
  name: "健太",
  age: 19 // major がなくてもエラーにならない
};

// これだとエラーになる（age が string だから）
// const student3: StudentInfo = {
//   name: "陸",
//   age: "二十歳" // 型エラー！
// };

3-2. 算出プロパティ名を使う場合の型定義（インデックスシグネチャ）

もし、オブジェクトのキーが動的に決まる場合（つまり[key]: valueを使うような場合）、キーの型とその値の型をまとめて定義する「インデックスシグネチャ」というものを使います。

// 任意の文字列をキーとし、値は数値であるオブジェクトの型
interface ScoreRecord {
  [studentId: string]: number; // ここがインデックスシグネチャ！
                               // どんな文字列でもキーになり、その値は number になる
}

const examScores: ScoreRecord = {
  "s001": 85,
  "s002": 92,
  "s003": 78
};

// 新しい生徒のスコアを追加
const newStudentId = "s004";
const newScore = 95;

examScores[newStudentId] = newScore; // 問題なく追加できる

// これだとエラー（値が文字列だから）
// examScores["s005"] = "高得点"; // 型エラー！

[studentId: string]: number; の部分は、「string型のstudentIdをキーとして使うと、その値はnumber型である」というルールを定義しています。

---

まとめ：もう迷わない！オブジェクトのキー表現

いかがでしたでしょうか？ JavaScriptのオブジェクトにおけるキー（プロパティ名）の様々な書き方と、それらの使い分けについて理解が深まりましたか？

今日のポイントをまとめると、

• オブジェクトリテラルで固定のキー： { key: value }
• オブジェクトリテラルで動的なキー： { [変数名]: value } （算出プロパティ名）
• オブジェクトリテラルで変数名とキー名が同じ場合： { variableName } （ショートハンド）
• プロパティにアクセスする時：
  • 固定のキーなら： obj.key （ドット記法）
  • 動的なキーや特殊なキー（スペースなど）なら： obj[variableOrString] （ブラケット記法）
• TypeScriptで型を付ける： interface や type でオブジェクトの形を定義し、動的なキーにはインデックスシグネチャを使う

これらの知識があれば、JavaScriptのオブジェクトを自信を持って扱えるようになるはずです。コードを読むときも書くときも、「この[]は何を意味しているんだろう？」と迷うことがなくなると思います。