【超便利】TypeScript for ... ofループ：インデックス/キーを活用してコードをスッキリさせよう！

TypeScriptにおける「for ... of」ループとインデックス/キー

TypeScriptでは、for ... ofループを使用して、イテレータブルなオブジェクト（配列、文字列、Mapなど）の要素を反復処理できます。

このループには、要素のインデックスやキーを取得できるオプションがあります。

構文

for (const [key, value] of iterable) {
  // ...
}

例

• 配列

const arr = [1, 2, 3];

for (const [index, value] of arr.entries()) {
  console.log(`Index: ${index}, Value: ${value}`);
}

// 出力:
// Index: 0, Value: 1
// Index: 1, Value: 2
// Index: 2, Value: 3

• Map

const map = new Map([
  ["a", 1],
  ["b", 2],
  ["c", 3],
]);

for (const [key, value] of map) {
  console.log(`Key: ${key}, Value: ${value}`);
}

// 出力:
// Key: a, Value: 1
// Key: b, Value: 2
// Key: c, Value: 3

インデックス/キーの型

keyとvalueの型は、イテレータブルなオブジェクトによって異なります。

• 配列
  • key: number型（インデックス）
  • value: 配列の要素の型
• Map
  • key: マップのキーの型

その他の注意点

• for ... ofループは、イテレータブルなオブジェクトに対してのみ使用できます。
• for ... ofループは、breakやcontinueステートメントで使用できます。
• for ... ofループは、async/awaitと組み合わせて使用できます。

関連用語

• イテレータ
• forループ
• foreach

const arr = ["a", "b", "c"];

for (const [index, value] of arr.entries()) {
  console.log(`Index: ${index}, Value: ${value}`);
}

出力:

Index: 0, Value: a
Index: 1, Value: b
Index: 2, Value: c

Mapのキーと値をそれぞれ出力

const map = new Map([
  ["a", 1],
  ["b", 2],
  ["c", 3],
]);

for (const [key, value] of map) {
  console.log(`Key: ${key}, Value: ${value}`);
}

Key: a, Value: 1
Key: b, Value: 2
Key: c, Value: 3

const obj = {
  name: "John Doe",
  age: 30,
  city: "New York",
};

for (const [key, value] of Object.entries(obj)) {
  console.log(`Key: ${key}, Value: ${value}`);
}

Key: name, Value: John Doe
Key: age, Value: 30
Key: city, Value: New York

文字列の各文字を出力

const str = "Hello, world!";

for (const char of str) {
  console.log(char);
}

H
e
l
l
o
,
 
w
o
r
l
d
!

配列の要素を2つずつ処理

const arr = [1, 2, 3, 4, 5];

for (let i = 0; i < arr.length; i += 2) {
  const first = arr[i];
  const second = arr[i + 1];

  console.log(`First: ${first}, Second: ${second}`);
}

First: 1, Second: 2
First: 3, Second: 4

TypeScriptにおける「for ... of」ループの代替方法

従来の「for」ループ

const arr = [1, 2, 3];

for (let i = 0; i < arr.length; i++) {
  const value = arr[i];

  // ...
}

メリット:

• シンプルで分かりやすい

• インデックスを自分で管理する必要がある
• 冗長なコードになる

forEachメソッド

const arr = [1, 2, 3];

arr.forEach((value) => {
  // ...
});

• 簡潔に記述できる

• インデックスを取得できない
• breakやcontinueステートメントが使えない

mapやfilterメソッド

const arr = [1, 2, 3];

const doubled = arr.map((value) => value * 2);
const evens = arr.filter((value) => value % 2 === 0);

// ...

• 配列を別の配列に変換できる

• イテレーション以外の処理を行う場合は、複数のメソッドを組み合わせる必要がある

ジェネレータ

function* generateNumbers() {
  for (let i = 1; i <= 10; i++) {
    yield i;
  }
}

const generator = generateNumbers();

for (const value of generator) {
  console.log(value);
}

• イテレーションをより細かく制御できる

• 理解するのが難しい

• シンプルで分かりやすいコードを求める場合は、「for ... of」ループや従来の「for」ループを使うのが良いでしょう。
• 簡潔に記述したい場合は、forEachメソッドを使うのが良いでしょう。
• 配列を別の配列に変換したい場合は、mapやfilterメソッドを使うのが良いでしょう。
• イテレーションをより細かく制御したい場合は、ジェネレータを使うのが良いでしょう。

状況に応じて、他の方法も検討してみてください。