様々なループの書き方

TypeScriptで使える様々なループの書き方とその使い分けについて解説

TypeScriptの様々なループ

TypeScriptには配列やオブジェクトを反復処理するための様々なループの書き方があります。それぞれに特徴があり、用途に応じて使い分けることで、より読みやすく効率的なコードを書くことができます。

基本的なforループ

最も基本的なループで、初期化;条件;更新の3つの部分から成り立っています。インデックスを使って配列にアクセスできるため、配列の要素を変更したり、インデックスそのものを使った処理が必要な場合に便利です。

基本的なforループ

Loading...
「実行」ボタンをクリックすると、ここに結果が表示されます

C、C++、C#、Java…様々なプログラミング言語で同様のループ構文が存在するため、他の言語の学習者でも理解しやすいです。

例のように、逆順にループしたりインクリメントの値を変更したり柔軟な使い方ができます。 プログラミング問題では別々に与えられた配列の長さとデータを配列に変換するために頻出のループですが、実業務では配列がそのまま引数として利用されるのでこのループはあまり使われません。 インデックスを0から始めるか1から始めるかなどの細かい調整が煩わしく、インデックスを直接操作できてしまうため、後述のループの方が好まれます。

for...ofループ

配列やiterableなオブジェクトの値を直接取得できるループです。インデックスが不要で値だけを使いたい場合に最適です。最も読みやすく、モダンなループの書き方の1つです。

for...ofループ

Loading...
「実行」ボタンをクリックすると、ここに結果が表示されます

for...inループ

オブジェクトのキーを反復処理するループです。紹介しますが推奨はしません。配列に対しても使えますが配列のインデックスが文字列として返されるため、配列には通常for...ofを使う方が適切です。

for...inループ

Loading...
「実行」ボタンをクリックすると、ここに結果が表示されます

inとofで紛らわしく、上記のようにオブジェクトにもofを使うことができるのでofに統一した方が混乱しません。

forEachメソッド

配列の各要素に対して関数を実行するメソッドです。コールバック関数を使うため、関数型プログラミングのスタイルに適しています。ただし、breakやcontinueが使えない点に注意が必要です。 非同期処理も期待通りに動かないため、業務ではあまり使われません。

forEachメソッド

Loading...
「実行」ボタンをクリックすると、ここに結果が表示されます

whileループとdo...whileループ

条件を満たす間、繰り返し処理を実行するループです。配列の要素数が不明な場合や特定の条件が満たされるまで処理を続けたい場合に便利です。業務では避けますが、プログラミング問題ではwhile(true)のような無限ループから書き始めた方が考えやすいかもしれません。

whileとdo...while

Loading...
「実行」ボタンをクリックすると、ここに結果が表示されます

mapやfilter、reduceなどの配列メソッド

厳密にはループではありませんが、配列を反復処理する際によく使われるメソッドです。元の配列を変更せず新しい配列を返すため、関数型プログラミングのスタイルに適しています。モダンな環境ではこちらを見かけることがほとんどです。

map、filter、reduceなど

Loading...
「実行」ボタンをクリックすると、ここに結果が表示されます

集計処理のreduceは非常に強力で、配列の要素を1つの値にまとめることができます。ただし複雑な処理を行う場合は可読性が低下することがあります。少しでも複雑な集計を行う場合は、for文を使うことを検討してください。

ちなみにmapやsomeやeveryでもforEach的な処理を書くことが出来ますが、本来の目的と異なる書き方で可読性が低下するため避けた方が良いでしょう。

ループの使い分け

それぞれのループには適した使用場面があります。以下は私の考えるガイドラインです。

  • for...of: シンプルで読みやすいので推奨。
  • 基本的なfor: インデックスが必要な場合や、配列を直接変更する場合。
  • forEach: 関数型プログラミングスタイルを好む場合。また、途中でループを抜ける必要がない場合。
  • map/filter/reduce: 新しい配列を作る、条件で絞り込む、集計する場合。mapとfilterは特に推奨。
  • while/do...while: 条件が満たされるまで繰り返す場合。無限ループに注意。
  • for...in: キーの列挙ができるが、紛らわしいので避けたい。

パフォーマンス比較

Loading...
「実行」ボタンをクリックすると、ここに結果が表示されます

基本的なforが一般的に最も高速と言われていますが、いかがでしたでしょうか?個人的には速度よりもfor...ofやmap/filterを使う方が可読性が高くて好みです。TypeScriptを使う場合、パフォーマンスが極めて重要なケースは限られているため、可読性を優先することが多いです。

まとめ

TypeScriptには様々なループの書き方があり、それぞれに適した使用場面があります。 パフォーマンスも重要ですが、多くの場合はコードの可読性や保守性の方が重要です。 チームのコーディング規約や、処理の内容に応じて適切なループを選択しましょう。

一般的には、配列の値だけを使う場合はfor...ofを、新しい配列を作る場合はmap/filterを使うことが推奨されます。 パフォーマンスが重要な場合は基本的なforループを検討してください。

最後に、個人的なループの重要度・利用度ランキングを書いておきます。

ループの種類重要度業務利用度
for...of⭐⭐⭐⭐⭐
基本的なfor⭐⭐⭐
forEach-
map/filter/find⭐⭐⭐⭐⭐⭐
reduce
while/do...while⭐⭐-
for...in--