ループ処理とは
ループ処理は、特定の条件が満たされるまで同じ操作を繰り返すための仕組みです。大量のデータを処理したり、同じコードを効率的に実行する際に便利です。
JavaScriptでは、主に以下の3種類のループが使用されます。
- for文
- while文
- for…of文（配列の繰り返し）
ここでは、それぞれの使い方を詳しく解説します。
for文の基本
for文の構文
for文は、繰り返しの回数が事前にわかっている場合に最適です。
基本構文
for (初期化; 条件; 更新) {
// 繰り返したい処理
}例:
for (let i = 0; i < 5; i++) {
console.log(i);
}上記のコードは0から4までの数値を順に出力します。
for文の応用例
配列をループ処理する
const fruits = ["apple", "banana", "cherry"];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}このコードは、配列内のすべての要素を出力します。
ネストされたfor文
for (let i = 1; i <= 3; i++) {
for (let j = 1; j <= 3; j++) {
console.log(`i=${i}, j=${j}`);
}
}while文の基本
while文の構文
while文は、繰り返しの回数が事前に決まっていない場合に使用します。
基本構文
while (条件) {
// 繰り返したい処理
}例:
let count = 0;
while (count < 5) {
console.log(count);
count++;
}このコードは0から4までの数値を順に出力します。
無限ループに注意
条件が常にtrueの場合、無限ループになるので注意が必要です。
while (true) {
console.log("無限ループ");
break; // このように明示的にループを終了するコードが必要
}配列の繰り返し
JavaScriptには、配列を簡単に処理できるfor…of文があります。
for…of文の構文
for (要素 of 配列) {
// 繰り返したい処理
}例:
const colors = ["red", "green", "blue"];
for (const color of colors) {
console.log(color);
}このコードは配列の各要素を順に出力します。
forEachメソッド
forEachメソッドを使うと、配列の繰り返し処理がさらに簡単になります。
例:
const numbers = [1, 2, 3];
numbers.forEach((number) => {
console.log(number);
});応用例
数値の合計を計算する
配列内の数値を合計するプログラムです。
const numbers = [10, 20, 30];
let total = 0;
for (const number of numbers) {
total += number;
}
console.log(`合計: ${total}`);条件を満たす要素をフィルタリング
配列内の偶数だけを出力するプログラムです。
const numbers = [1, 2, 3, 4, 5];
for (const number of numbers) {
if (number % 2 === 0) {
console.log(number);
}
}タイマーのカウントダウン
簡単なカウントダウンタイマーを実装します。
let countdown = 10;
while (countdown > 0) {
console.log(`残り: ${countdown}秒`);
countdown--;
}
console.log("タイマー終了！");まとめ
この記事では、JavaScriptのループ処理について解説しました。for文、while文、配列の繰り返しを理解することで、コードの効率化が可能になります。次回は、これらを応用した実践的なプログラムに進みます。
コメント