こんにちは、かつコーチです。
前回はif文・switch文による条件分岐を解説しました。
今回は、プログラミングのもう一つの基本テクニックである「繰り返し処理」を扱います。
「同じ処理を何度も書くのは面倒」という悩みを解決してくれるのがループ処理です。
繰り返し処理とは？
同じ処理を何度も書かなくていい仕組み
たとえば「1から5までの数字を表示する」処理を書くとき、繰り返し処理を使わないとこうなります。
console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);
数が少なければ何とかなりますが、これが1000回だったらどうでしょうか。
繰り返し処理を使えば、同じ内容を1行の型で表現できます。
for (let i = 1; i <= 5; i++) {
console.log(i);
}
// 出力: 1 2 3 4 5（1行ずつ）
「同じような処理を何度も繰り返したい」と思ったら、繰り返し処理の出番です。
for文の基本
基本の書き方
for 文は、繰り返しの回数や条件があらかじめ決まっているときによく使われます。
for (let i = 0; i < 3; i++) {
console.log(`${i}回目の処理です`);
}
// 出力:
// 0回目の処理です
// 1回目の処理です
// 2回目の処理です
for の ( ) の中には3つの要素を書きます。
let i = 0: 最初に1回だけ実行される初期化i < 3: この条件がtrueの間だけループを続けるi++: 1回のループが終わるたびに実行される更新処理
配列をfor文で処理する
配列の中身を1つずつ処理したいときにも for 文がよく使われます。
const fruits = ["りんご", "みかん", "ぶどう"];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
// 出力: りんご みかん ぶどう（1行ずつ）
fruits.length は配列の要素数（この場合は3）を返すプロパティで、配列の要素数ぶんだけループを回すときの定番の書き方です。
while文の基本
条件が満たされている間だけ繰り返す
for 文が「回数」を軸にするのに対して、while 文は「条件」を軸に繰り返します。
let count = 0;
while (count < 3) {
console.log(`カウント：${count}`);
count++;
}
// 出力:
// カウント：0
// カウント：1
// カウント：2
繰り返す回数が事前に決まっていない場合や、「ある条件を満たすまで繰り返す」処理を書きたいときに向いています。
つまずきやすいポイント：無限ループ
while 文で私が実際にやらかした失敗が、ループを終わらせる条件を更新し忘れて無限ループを起こしてしまったことです。
❌ Before：カウンターの更新を忘れて無限ループになる
let count = 0;
while (count < 3) {
console.log(`カウント：${count}`);
// count++ を書き忘れている
}
// countがずっと0のまま条件を満たし続け、処理が終わらなくなる
count++ を書き忘れると、count の値がいつまでも 0 のままなので count < 3 が永遠に true になり、ブラウザやNode.jsが固まってしまいます。
私は開発中にこれをやってしまい、ブラウザのタブが応答しなくなって強制終了する羽目になりました。
✅ After：ループを終わらせる条件の更新を必ず入れる
let count = 0;
while (count < 3) {
console.log(`カウント：${count}`);
count++; // ループを終わらせる条件を必ず更新する
}
// 出力: カウント：0 カウント：1 カウント：2
while 文を書くときは、「いつかは条件が false になる」処理が必ずループの中に含まれているかを確認するようにしましょう。
forEachで配列を繰り返し処理する
forEachの基本
配列に対して繰り返し処理をする場合、for 文よりも簡潔に書ける forEach メソッドがよく使われます。
const fruits = ["りんご", "みかん", "ぶどう"];
fruits.forEach((fruit) => {
console.log(fruit);
});
// 出力: りんご みかん ぶどう（1行ずつ）
forEach は配列の要素を1つずつ取り出して、指定した処理（この場合は矢印関数）を実行してくれます。
fruits.length を自分で管理する必要がないため、for 文よりもコードがすっきりします。
インデックスも一緒に取得する
要素の位置（インデックス）も一緒に使いたい場合は、第2引数で受け取れます。
const fruits = ["りんご", "みかん", "ぶどう"];
fruits.forEach((fruit, index) => {
console.log(`${index}番目：${fruit}`);
});
// 出力:
// 0番目：りんご
// 1番目：みかん
// 2番目：ぶどう
for文とforEachの使い分け
どちらを選べばいいのか
判断に迷ったときの目安を整理しておきます。
| 状況 | おすすめ |
|---|---|
| 配列の要素をすべて処理したい | forEach |
ループの途中で処理を中断したい（breakを使いたい） | for |
| 回数を指定して繰り返したい（配列以外） | for |
| 条件を満たすまで繰り返したい（回数が不定） | while |
forEach は途中で break を使ってループを抜けることができないという制約があります。
「条件によっては途中でループを止めたい」というケースでは for 文を使う必要があるので覚えておきましょう。
const numbers = [1, 2, 3, 4, 5];
for (let i = 0; i < numbers.length; i++) {
if (numbers[i] === 3) {
console.log("3を見つけたので中断します");
break;
}
console.log(numbers[i]);
}
// 出力: 1 2 3を見つけたので中断します
まとめ
この記事のポイント
for文は回数や条件があらかじめ決まっている繰り返し処理に向いているwhile文は条件を満たしている間だけ繰り返し、条件の更新を忘れると無限ループになるforEachは配列の要素を1つずつ処理する際に、for文よりも簡潔に書けるforEachは途中でbreakできないため、途中で中断したい処理にはfor文を使う
次に読むべき記事
繰り返し処理が使えるようになったら、次はその処理でよく登場する「配列」の基本を学んでいきます。
→ 次の記事：配列の基本：作成・追加・削除
