サンプルコードで身につける: インデックスシグネチャ

解説で学んだ概念を、5つの具体例で確認します。素朴な例から実務寄りの例へと進みます。

1果物名と在庫数の辞書

キーの名前は決めず、値の型だけを決める最小の例です。定義していなかった orange のような新しいキーも自由に追加でき、値が number であることだけが保証されます。

TypeScript

const fruitStock: { [fruitName: string]: number } = {
  apple: 10,
  banana: 6,
};

// 新しいキーも追加できる
fruitStock.orange = 8;

console.log(fruitStock.apple);
console.log(fruitStock.orange);
// fruitStock.grape = "多め"; // 値は number 限定なのでエラー

2値がオブジェクトの商品カタログ

インデックスシグネチャの値の型には、オブジェクトの型も指定できます。商品コードをキーに価格と在庫を引く、マスタデータの参照でよく使う形です。

TypeScript

type ProductInfo = {
  price: number;
  stock: number;
};

const catalog: { [productCode: string]: ProductInfo } = {
  "A-001": { price: 480, stock: 10 },
  "A-002": { price: 400, stock: 0 },
};

console.log(catalog["A-001"].price);
console.log(catalog["A-002"].stock);
console.log(catalog["A-001"].price * catalog["A-001"].stock);

3キーの一覧を回して集計する

キーが動的なオブジェクトは、Object.keys でキーの一覧を取り出して処理します。月別売上のような辞書データを合計する、レポート集計の典型的な書き方です。

TypeScript

const monthlySales: { [month: string]: number } = {
  april: 120,
  may: 150,
  june: 90,
};

let total = 0;
for (const month of Object.keys(monthlySales)) {
  console.log(month + ": " + monthlySales[month] + "万円");
  total += monthlySales[month];
}

console.log("合計: " + total + "万円");

4固定のキーとインデックスシグネチャの併用

「total は必ずある + 候補者名のキーは自由」のように、固定プロパティとインデックスシグネチャは併用できます。注意点として、固定プロパティの型はインデックスシグネチャの値の型に合わせる必要があります。

TypeScript

type VoteResult = {
  total: number; // 固定プロパティも値の型(number)に合わせる
  [candidateName: string]: number;
};

const votes: VoteResult = {
  total: 30,
  alice: 12,
  bob: 18,
};

console.log("総投票数: " + votes.total);
console.log("alice: " + votes.alice);
console.log("bob: " + votes.bob);

5アクセスログをページ別に集計する

実行時に初めてキーが決まるデータの集計は、インデックスシグネチャの独壇場です。キーがまだ存在するか hasOwnProperty で確かめてから加算する流れは、ログ集計やグルーピング処理の定番です。

TypeScript

const visitedPages = ["/home", "/items", "/home", "/cart", "/home", "/items"];

const pageViews: { [path: string]: number } = {};

for (const path of visitedPages) {
  if (pageViews.hasOwnProperty(path)) {
    pageViews[path] = pageViews[path] + 1;
  } else {
    pageViews[path] = 1; // 初めて見るキーはここで作られる
  }
}

console.log(pageViews);
console.log("/home の閲覧数: " + pageViews["/home"]);