JavaScriptの繰り返しと配列
このトピックを終えると
forとwhileを使って繰り返し処理を作成する方法、配列にデータを追加、取得、および反復処理する方法を学びます。
同じ作業を繰り返す
「1から100まで足し合わせる」、「ユーザーリストを一つずつ出力する」—同じ操作を何度も実行する必要がある場合、繰り返し文を使用します。
javascript
// for文 — 最もよく使われる繰り返し文
// (開始; 条件; 増加)
for (let i = 0; i < 5; i++) {
console.log(`${i}回目の繰り返し`);
}
// 0回目の繰り返し
// 1回目の繰り返し
// ...
// 4回目の繰り返しlet i = 0 — 開始値、i < 5 — 繰り返す条件、i++ — 一周するごとにiを1増やす。これらの3つの部分で繰り返しの回数を制御します。
javascript
// while文 — 条件のみで繰り返し
let count = 0;
while (count < 3) {
console.log(`countは ${count}`);
count++;
}
// countは 0
// countは 1
// countは 2whileは、条件がtrueである間、繰り返し処理を行います。count++を省略すると、条件が永遠にtrueになり、無限ループに陥ります。繰り返し文を使用する際は、常に「このループはいつ終了するか」を確認してください。
配列 — 複数の値を順序付けて保存
変数に1つの値しか格納できない場合、100人のユーザーの名前を保存するには100個の変数が必要です。**配列(Array)**は、複数の値を1つの変数に順序付けて保存します。
javascript
const fruits = ["リンゴ", "バナナ", "ブドウ"];
// インデックスでアクセス (0から始まる!)
console.log(fruits[0]); // "リンゴ"
console.log(fruits[2]); // "ブドウ"
console.log(fruits.length); // 3
// 追加と削除
fruits.push("イチゴ"); // 最後に追記 → ["リンゴ", "バナナ", "ブドウ", "イチゴ"]
fruits.pop(); // 最後から削除 → ["リンゴ", "バナナ", "ブドウ"]インデックスが0から始まることに注意してください。3つの要素を持つ配列の最後のインデックスは2です。これはほとんどすべてのプログラミング言語の共通ルールです。
配列 + 繰り返し文 = データ処理
配列と繰り返し文を組み合わせることで、データを一つずつ処理できます。
javascript
const scores = [85, 92, 78, 96, 88];
// for文で反復処理
let total = 0;
for (let i = 0; i < scores.length; i++) {
total += scores[i];
}
console.log(`平均: ${total / scores.length}`); // 平均: 87.8
// for...of — より簡潔な反復処理
for (const score of scores) {
if (score >= 90) {
console.log(`${score}点 — Aランク`);
}
}
// 92点 — Aランク
// 96点 — Aランクfor...ofは、インデックスが不要な場合に便利です。「配列の各要素を一つずつ取り出す」という意味がコードに直接反映されます。
javascript
// 実務でよりよく使われる配列メソッド
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]
const evens = numbers.filter(n => n % 2 === 0);
console.log(evens); // [2, 4]mapは、各要素を変換した新しい配列、filterは、条件に一致する要素のみを選択した新しい配列を返します。繰り返し文を直接記述するよりも意図が明確であるため、実務ではこれらのメソッドをより多く使用します。