TypeScript で配列をループする簡単な3つの方法を紹介

この記事では TypeScript の配列をループする方法について紹介します。

具体的なコード例を用いて for 文、for-of 文、Array.forEach 文の3つの方法を紹介します。
さらに、各ループ方法に関するポイントと実践的な例題もお届けします。

さっそく始めましょう！

TypeScript Playground入門使い方を楽しく学ぼう！

初心者向けのTypeScript Playground入門！基本的な使い方からコード実行、エラーチェック、共有方法を解説します！

gizanbeak.com

for 文を使ってループ

まずは一番基本的な for 文を使ったループ方法を見てみましょう。

const numbers: number[] = [1, 2, 3, 4, 5];

for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

このコードでは numbers という配列を定義して、for 文を使ってインデックス i を0から配列の長さまで増やしながら、配列の各要素をコンソールに出力しています。

for 文は最も高速なループ方法であるため、パフォーマンスが重要な場面では for 文を選択することをおすすめします。

for-of 文を使ってループ

次に for-of 文を使ったループ方法です。

こちらはもっとシンプルで読みやすいですね。

const numbers: number[] = [1, 2, 3, 4, 5];

for (const number of numbers) {
  console.log(number);
}

for-of 文では numbers 配列の各要素を直接取得し、number という変数に格納してコンソールに出力しています。

for-of 文は可読性が高く、配列の要素に対して直接アクセスできるためコードが簡潔になります。

Array.forEach 文を使ってループ

最後に紹介する Array.forEach 文を使った方法は、関数型プログラミングのスタイルに基づいています。
これは配列の要素に対して関数を適用する方法で、コードがよりシンプルで直感的になります。

const numbers: number[] = [1, 2, 3, 4, 5];

numbers.forEach((number) => {
  console.log(number);
});

Array.forEach 文では numbers 配列に対してアロー関数を渡し各要素をコンソールに出力しています。

Array.forEach を使うと関数型プログラミングスタイルを採用でき、コードがより宣言的になります。
ただし、Array.forEach は for 文や for-of 文と比べるとパフォーマンスがやや劣る場合があるので、パフォーマンスが重要な場面では注意が必要です。

実践的な例題

最後に実践的な例題として、配列内の偶数だけを抽出する処理を紹介します。

これによりループを使った実際の問題解決に役立つと思います！

const numbers: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenNumbers: number[] = [];

for (const number of numbers) {
  if (number % 2 === 0) {
    evenNumbers.push(number);
  }
}

console.log(evenNumbers); // [2, 4, 6, 8, 10]

このコードでは numbers 配列から偶数を見つけて evenNumbers 配列に追加しています。

次にfor-of文を使って、numbers 配列をループしています。
そして number % 2 === 0 という条件式を使用して、各要素が偶数かどうかを判定しています。

TypeScriptのスプレッド構文とは？メリットなどをわかりやすく解説

TypeScriptの配列スプレッド構文を分かりやすく解説。新しい配列の作成、コピー、注意点を紹介！

gizanbeak.com

まとめ

これで TypeScript の配列をループする方法、for 文、for-of 文、Array.forEach 文を学びました！

それぞれの方法には特徴があるので使い分けを意識してコードを書くことが大切です。
また、各ループ方法に関するパフォーマンスも考えられるとより優れた実装に繋がります。

超便利なTypeScriptの8つのユーティリティ型で効率アップ

使いこなすととても便利なTypeScriptのPartial、Readonly、Pick、Required、Record、Omit、Exclude、Extractのユーティリティ型について特徴と使い所を解説します。

gizanbeak.com

Gizanbeak