TypeScriptのインデックスシグネチャとは？動的キーの指定方法を初心者向けに解説

1. インデックスシグネチャとは？

1. インデックスシグネチャとは？

TypeScriptのインデックスシグネチャとは、オブジェクトのキーが固定されていない場合に使える仕組みです。通常のインターフェースでは、キーの名前をひとつひとつ書く必要がありますが、インデックスシグネチャを使うと「どんな名前のキーでもよい」という定義ができます。

イメージとしては、「倉庫に好きな名前の箱を並べて、その箱には必ず同じ種類のものが入っている」といった感じです。

2. 基本的なインデックスシグネチャの書き方

2. 基本的なインデックスシグネチャの書き方

まずはシンプルな例を見てみましょう。次のコードでは、文字列をキーにして数値を値として保存できるオブジェクトを定義しています。

interface Scores {
    [key: string]: number;
}

const mathScores: Scores = {
    alice: 85,
    bob: 92,
    charlie: 78
};

ここでは、[key: string]: number;がインデックスシグネチャです。これによって「任意の文字列をキーにして、値は数値にする」というルールが作れます。

    { alice: 85, bob: 92, charlie: 78 }

3. 動的キーを使うメリット

3. 動的キーを使うメリット

インデックスシグネチャを使うと、事前にキーがわからなくても柔軟にデータを扱えます。たとえば、ショッピングサイトのカート情報を考えてみましょう。

interface Cart {
    [productId: string]: number;
}

const myCart: Cart = {};
myCart["apple"] = 3;
myCart["banana"] = 2;
myCart["grape"] = 5;

このように、商品IDや名前を動的にキーにして、数量を値として保存できます。毎回異なる商品が追加されても問題ありません。

    { apple: 3, banana: 2, grape: 5 }

4. number型のキーを使う場合

4. number型のキーを使う場合

インデックスシグネチャは文字列キーだけでなく、数値のキーにも対応しています。たとえば配列のようにインデックスを数値で管理したい場合に便利です。

interface NumberDictionary {
    [index: number]: string;
}

const items: NumberDictionary = {
    0: "りんご",
    1: "みかん",
    2: "ぶどう"
};

この場合、「0」「1」「2」というキーが数値で定義されており、それぞれに文字列が対応しています。JavaScriptのオブジェクトは内部的にはキーを文字列として扱いますが、TypeScript上では数値を指定できるため、配列ライクな使い方も可能です。

5. 型の制約を追加する方法

5. 型の制約を追加する方法

インデックスシグネチャを使うと便利ですが、すべての値が同じ型になってしまうのが基本です。もし特定のキーだけ別の型を持たせたい場合はどうするのでしょうか？

その場合は通常のプロパティと組み合わせて書くことができます。

interface UserDictionary {
    [username: string]: number;
    admin: number; // このキーは必ず存在する
}

const users: UserDictionary = {
    admin: 1,
    alice: 3,
    bob: 5
};

このようにすると、「admin」というキーは必ず存在し、値は数値であることが保証されます。それ以外のキーも自由に追加できます。

6. インデックスシグネチャと型安全性

6. インデックスシグネチャと型安全性

インデックスシグネチャはとても柔軟ですが、同時に「何でも入れられる」ようになるので、型の安全性を意識して使う必要があります。例えば次のように文字列の値を入れてしまうとエラーになります。

interface Scores {
    [key: string]: number;
}

const wrongScores: Scores = {
    alice: 100,
    bob: "excellent" // エラー: string型はnumber型に代入できません
};

このエラーのおかげで、プログラムの中に不正なデータが混ざるのを防ぐことができます。これがTypeScriptの大きなメリットです。

7. 使いどころ

7. 使いどころ

インデックスシグネチャは、ユーザー情報の管理、商品の在庫管理、ゲームのスコア記録など、動的にキーを扱うシーンでとても役立ちます。TypeScriptで柔軟かつ安全にデータを扱いたいときに、積極的に使ってみるとよいでしょう。

まとめ

まとめ

TypeScriptのインデックスシグネチャは、動的なキーを扱う必要がある場面で非常に役立つ重要な型システムの機能です。この記事で学んだように、事前にキーが決まっていないオブジェクトでも型安全に扱えることで、柔軟性と安全性を両立させることができます。特に、ユーザー名・商品ID・スコアデータなど、現実のプログラミングでは「すべてのキーを固定できない」ケースが多く存在します。そのようなシーンでインデックスシグネチャを適切に使えるようになると、データ構造の幅が大きく広がり、アプリケーション全体の安定性にも貢献します。 また、動的キーの指定に加えて、特定のキーだけ別の型を持たせたい場合には「通常プロパティ＋インデックスシグネチャ」を組み合わせることで、柔軟な設計が可能になります。このようにインデックスシグネチャは、ただの“何でも入る辞書型”ではなく、TypeScript特有の型による堅牢なチェックを活かした、強力なデータ設計の仕組みであると言えます。 さらに、キーをstringだけでなくnumberとして扱える仕組みも確認したことで、配列ライクなデータ構造にも応用できることが理解できたはずです。特にゲーム開発や数値インデックスを扱うデータ集合では、数値キーのインデックスシグネチャが用いられます。値の型を統一したい、しかしキーは自由に追加されるというケースでは、最も安全性と柔軟性のバランスに優れた手法として活躍します。 最後に、インデックスシグネチャを使った実践的なサンプルコードを紹介することで、実務的な応用イメージも持てるようになります。実際のサービス開発では、ユーザー設定、言語リソース、商品一覧、在庫データ、ポイント管理など、幅広い用途で活用されます。ここまで理解できれば、動的キーを扱うデータ設計を高度に行えるようになり、TypeScriptの強みを最大限に活かせるでしょう。

サンプルプログラム：動的キーを使ったユーザー設定管理

// 動的な設定キーを扱うためのインデックスシグネチャ
interface UserSettings {
    [settingKey: string]: string | number | boolean;
    username: string;          // 必須の設定キー
    theme: string;             // ダーク/ライトなど
}

// クラスとして扱う例
class SettingsManager {
    private settings: UserSettings;

    constructor(initial: UserSettings) {
        this.settings = initial;
    }

    updateSetting(key: string, value: string | number | boolean) {
        this.settings[key] = value;
    }

    getSetting(key: string) {
        return this.settings[key];
    }

    showAll() {
        console.log(this.settings);
    }
}

const userSettings: UserSettings = {
    username: "太郎",
    theme: "light",
    volume: 80,           // 動的に追加
    notifications: true   // 動的に追加
};

const manager = new SettingsManager(userSettings);
manager.updateSetting("language", "日本語");
manager.updateSetting("volume", 60);

manager.showAll();

このサンプルでは、ユーザー設定を表すUserSettingsというインターフェースに、インデックスシグネチャを用いて柔軟なキー追加を可能にしています。アプリケーション設定はユーザーごとに異なり、必要なキーが後から増えることが多いため、この仕組みは実務でも非常に重宝されます。 また、クラスを利用することで、設定の更新や取得などの処理をひとまとめにし、見通しの良いコード構造を作ることができます。TypeScriptの型とインデックスシグネチャが組み合わさることで、動的データを扱いつつも型安全に運用できる点が大きな強みです。