Javascript で辞書のキーに定数や変数を使う方法【初心者向け】

はじめに

JavaScript や TypeScript でオブジェクト (辞書・連想配列) を使う際、キーに変数や定数の値を使いたい場面はよくあります。しかし、他の言語と同じ感覚で書くと期待通りに動かないことがあり、初めて遭遇するとハマりやすいポイントです。

この記事では、辞書のキーに定数や変数を使う方法と、その仕組みについて解説します。

辞書に定数を用いた時の挙動

JavaScript で辞書を使っていた時、キーに定数や変数を使いたい場面はよくあると思います。
しかし、以下のように辞書のキー部分に定数を使うと定数名がそのままキーになってしまい、定義した文字列で値を取り出すことができません。

const KEY_TEST = "test";
const dictionary = {
    KEY_TEST: "辞書の値"
};
console.log(dictionary[KEY_TEST]);    // undefined
console.log(dictionary["KEY_TEST"]);  // 辞書の値

辞書に定数を使う方法

辞書のキーとして定数を渡すときに、以下のように定数を角括弧 ( [] ) で囲むと、内部の値を参照するようになります。
角括弧が必要なのは、JavaScript の言語仕様としてオブジェクトリテラルのキーに文字列を使用する際 "" で囲まなくてもよく、そのままでは変数・定数なのか文字列なのか判断がつかないためです。

const KEY_TEST = "test";
const dictionary = {
    [KEY_TEST]: "辞書の値"
};
console.log(dictionary[KEY_TEST]);  // 辞書の値
console.log(dictionary["test"]);    // 辞書の値

実践的な使い方

この構文は TypeScript の enum をキーとしてオブジェクトを定義する場合に特に便利です。以下のように enum のメンバーをキーとして使うことで、型安全かつ可読性の高いコードが書けます。

enum SampleEnum {
    one,
    two,
    three,
}

const sample_dict = {
    [SampleEnum.one]: 1,
    [SampleEnum.two]: 2,
    [SampleEnum.three]: 3,
};

まとめ

JavaScript のオブジェクトリテラルでキーに変数や定数の値を使いたい場合は、角括弧 [] で囲む必要があります。この構文は Computed Property Names と呼ばれ、ES2015 以降で使用可能です。他の言語から JavaScript に入門した方がつまずきやすいポイントなので、ぜひ覚えておいてください。