「for」「while」「forEach」の使い分けを解説しています。
この記事を読めば、基本的な構文と具体例・使うべきタイミングを理解できるので参考にしてみてください。
・基本的な構文と具体例
・応用の使い方
「for」「while」「forEach」の使い分けを解説【JavaScript】
以下の表のように使い分けできます。
| 種類 | タイミング |
| for | ・具体的な回数だけ繰り返す必要がある場合 ・インデックスが必要な場合 |
| while | ・条件が満たされている間だけ繰り返す必要がある場合 ・具体的な回数が不確定な場合 |
| forEach | ・配列の各要素に同じ処理を適用する場合 ・要素のインデックスや元の配列が必要な場合 |
文字だけでは分かりずらいので、具体的なコードを見てみましょう。
forの使い方
基本の構文
for (初期化式; 条件式; 更新式) {
// ループ内で実行されるコード
}
例文
for (let i = 0; i < 5; i++) {
console.log("結果：",i);
}
// コンソール
結果：0
結果：1
結果：2
結果：3
結果：4このように「具体的な指示（5よりも小さい数字の時）でループさせたい」場合や、インデックスが必要な時にforを使います。
条件を変更することで様々な応用でループさせることもできます。
インデックスを逆順にする
const array = [10, 20, 30];
for (let i = array.length - 1; i >= 0; i--) {
console.log(`Index: ${i}, Value: ${array[i]}`);
}
// コンソール
Index: 2, Value: 30
Index: 1, Value: 20
Index: 0, Value: 10 ※i の初期値を array.length – 1 に設定し、i– で逆順にループさせる
偶数のみを処理する
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
for (let i = 0; i < numbers.length; i++) {
if (numbers[i] % 2 === 0) {
console.log(`Even Number: ${numbers[i]}`);
}
}
// コンソール
Even Number: 2
Even Number: 4
Even Number: 6
Even Number: 8
Even Number: 10 ※if (numbers[i] % 2 === 0) の条件で偶数のみを処理
特定の条件を満たすまで繰り返す
let i = 0;
for (; i < 10; i++) {
if (i === 5) {
break; // ループを抜ける
}
console.log(`Value: ${i}`);
}
// コンソール
Value: 0
Value: 1
Value: 2
Value: 3
Value: 4 ※i の初期化をループ外に持ち出し、for ループ内で特定の条件（ここでは i === 5）までループさせる
wihleの使い方
基本の構文
while (条件式) {
// ループ内で実行されるコード
}
例文
let i = 0;
while (i < 5) {
console.log(i);
i++;
}
// コンソール
0
1
2
3
4行っている処理は前述したforとまったく同じですが、条件がtureであれば永遠にループするので具体的な回数が不明な場合に使います。
ランダムな数が特定の範囲になるまでループ
let randomNumber;
while (randomNumber < 5 || randomNumber > 10) {
randomNumber = Math.floor(Math.random() * 15) + 1;
}※while ループを使用してランダムな数が5から10の範囲になるまでループさせる（5から10の範囲になったら終了する）
ユーザーが正しいパスワードを入力するまでループ
const correctPassword = 'secure123';
let userInput;
while (userInput !== correctPassword) {
userInput = prompt('Enter the password:');
}
console.log('Login successful!');※パスワードとUSERが入力したワードが異なっていたらループさせて、正しければ「Login successful!」を出力する
forEachの使い方
基本の構文
array.forEach(function(element) {
// 配列の各要素に対して実行されるコード
});
例文
const numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {
console.log(number);
});
// コンソール
1
2
3
4
5配列の各要素に対して関数を適用、コールバック関数の引数には、要素の他にインデックスや元の配列も受け取れる。
配列の各要素に対して同じ処理を適用したい場合や、インデックスや元の配列が必要な場合に使います。
各要素を2倍にして新しい配列を作成
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = [];
numbers.forEach((element) => {
doubledNumbers.push(element * 2);
});
console.log(doubledNumbers);
// コンソール
(5) [2, 4, 6, 8, 10]
0: 2
1: 4
2: 6
3: 8
4: 10
※配列のすべての値に対して処理されるので、forEach を使用して各要素を2倍にして新しい配列を作成している
配列の各要素をログに表示
const fruits = ['apple', 'banana', 'orange'];
fruits.forEach((fruit, index) => {
console.log(`Index ${index}: ${fruit}`);
});
// コンソール
Index 0: apple
Index 1: banana
Index 2: orange ※indexも取得して各要素と一緒に出力
奇数だけをフィルタリング
const numbers = [1, 2, 3, 4, 5];
const oddNumbers = [];
numbers.forEach((element) => {
if (element % 2 !== 0) {
oddNumbers.push(element);
}
});
console.log(oddNumbers);
// コンソール
(3) [1, 3, 5]
0: 1
1: 3
2: 5※奇数だけをフィルタリングして新しい配列を作成
まとめ
最後にまとめです。
| 種類 | タイミング |
| for | ・具体的な回数だけ繰り返す必要がある場合 ・インデックスが必要な場合 |
| while | ・条件が満たされている間だけ繰り返す必要がある場合 ・具体的な回数が不確定な場合 |
| forEach | ・配列の各要素に同じ処理を適用する場合 ・要素のインデックスや元の配列が必要な場合 |
ざっくり覚えるのであれば、
forはループしたい回数がある時
whileはループしたい回数が決まっていない時
forEachは配列全てに対して処理したい時
以上、参考になれば幸いです。
最後までお読みいただきありがとうございました。
