TypeScript入門配列のキーを自由に設定しよう – 連想配列

前のレッスンまでで「配列」を利用してきました。配列の場合、要素を追加すると自動的に0から順番に「添え字」の番号が割り振られます。しかしそれでは、順番を覚えておかなければ途中にある要素などが取り出しにくくなります。

また、配列の要素の順番が変わってしまうと、添え字も変わってしまうという問題点もあります。そこで、各要素に独自のキーを割り当てることができる配列を「連想配列」と言います。

連想配列を作ろう

次のようなプログラムを作成しましょう。

// array03.ts
const prefecture: { [key: string]: string } = {
  "hokkaido": 北海道",
  "aomori": "青森県",
  "iwate": "岩手県",
  "tokyo": "東京都"
};

console.log(prefecture["tokyo"]);

このプログラムを実行すると、 「東京都」と表示されます。

次のプログラムを見てみましょう。

const prefecture: { [key: string]: string } = {
  "hokkaido": 北海道",
  "aomori": "青森県",
  "iwate": "岩手県",
  "tokyo": "東京都"
};

ここで配列を宣言しています。ただし、通常の配列で利用する「[]」ではなくて、中括弧（{ }）で囲まれています。そして、要素は次のように指定します。

"キー": "値",
"キー": "値"

こうすることで、値とキーがセットになって配列に代入されていきます。

また、型の所も次のような指定になります。

{ [key: string]: string }

連想配列のキーと値のそれぞれに型を指定します。ここでは、両方文字列なので「string」と指定しました。

連想配列から値を取り出そう

連想配列から値を取り出す場合は、添え字に数字ではなく、「キー」を指定します。次のようにしましょう。

prefecture["tokyo"]

こうして、要素の順番などを気にすることなく、非常に値を取り出しやすくなります。

連想配列を繰り返しで処理しよう

連想配列の値も、繰り返し構文で値を取得できますが、通常のfor構文やwhile構文では値は取り出せても、キーの内容が取り出せません。そこで、「for in構文」を使うと連想配列との相性がよく使いやすいでしょう。次のように追加します。

for (let key in prefecture) {
  console.log(prefecture[key]);
}

すると、すべての値を取り出すことができます。

for in構文では、連想配列のキーが順番に取り出されます。そこで、このキーを使って連想配列から値を取り出していくと、繰り返しすべての要素を取得できるというわけです。