基礎から学ぶJavaScript入門 90日コース | JavaScriptでデータを扱う － Day 17：配列の繰り返し

Day 17：配列の繰り返し（前半）

「1つずつ」ではなく「まとめて処理する」力を身につける

Day 17では、配列の要素を 1つずつ順番に処理するための繰り返し構文 を学びます。 ここまでで「配列を作る」「要素を取り出す」「追加・削除する」は理解してきましたが、 実際のアプリでは、配列の中身を まとめて処理する 場面がとても多いです。

そこで登場するのが次の3つです。

• for
• for...of
• forEach()

実践では「商品一覧表示」を題材にして、 それぞれの書き方と考え方をステップバイステップで確認していきます。

配列を「繰り返し処理」するとはどういうことか

手作業で1つずつ書くとどうなるか

商品リストが次のようにあったとします。

const products = ['ノート', 'ペン', '消しゴム', '定規', 'ファイル'];

const products = ['ノート', 'ペン', '消しゴム', '定規', 'ファイル'];

これを1つずつ表示しようとすると、こう書く必要があります。

console.log(products[0]);
console.log(products[1]);
console.log(products[2]);
console.log(products[3]);
console.log(products[4]);

console.log(products[0]);
console.log(products[1]);
console.log(products[2]);
console.log(products[3]);
console.log(products[4]);

• 要素が増えるたびに、行数が増えていきます。
• 10個、100個、1000個…となると、現実的ではありません。

そこで使うのが 繰り返し処理 です。

for文：インデックスを使って「何番目か」を制御する

for文の基本構造

for 文は、次のような形をしています。

for (初期化; 条件; 更新) {
  // 繰り返し実行したい処理
}

for (初期化; 条件; 更新) {
  // 繰り返し実行したい処理
}

商品リストを表示する場合は、こう書きます。

const products = ['ノート', 'ペン', '消しゴム', '定規', 'ファイル'];

for (let i = 0; i < products.length; i++) {
  console.log(products[i]);
}

const products = ['ノート', 'ペン', '消しゴム', '定規', 'ファイル'];

for (let i = 0; i < products.length; i++) {
  console.log(products[i]);
}

各部分を丁寧に分解して理解する

for (let i = 0; i < products.length; i++) {
  console.log(products[i]);
}

for (let i = 0; i < products.length; i++) {
  console.log(products[i]);
}

• 初期化：let i = 0;
  • 変数 i を 0 でスタートさせます。
  • i は「インデックス（何番目か）」を表します。
• 条件：i < products.length;
  • i が配列の長さより小さい間、繰り返します。
  • products.length は「配列の要素数」です。
  • 例えば 5 個なら、i が 0〜4 の間だけループします。
• 更新：i++
  • ループ1回ごとに i を1増やします。
  • i は 0 → 1 → 2 → 3 → 4…と変化します。
• 本体：console.log(products[i]);
  • 現在の i に対応する要素を表示します。
  • i = 0 のときは products[0]、i = 1 のときは products[1]…という具合です。

重要ポイント：

• for 文は「インデックスを自分で管理する」スタイルです。
• 配列の長さが変わっても、products.length を使っていれば安全に回せます。

for…of：インデックスではなく「要素そのもの」を扱う

for…of の基本構造

for...of は、配列の 要素そのもの を順番に取り出す構文です。

for (const 要素 of 配列) {
  // 要素を使った処理
}

for (const 要素 of 配列) {
  // 要素を使った処理
}

商品リストを表示する場合は、こう書きます。

const products = ['ノート', 'ペン', '消しゴム', '定規', 'ファイル'];

for (const product of products) {
  console.log(product);
}

const products = ['ノート', 'ペン', '消しゴム', '定規', 'ファイル'];

for (const product of products) {
  console.log(product);
}

for…of の考え方

• product には、ループごとに配列の要素が1つずつ入ります。
  • 1回目：product = 'ノート'
  • 2回目：product = 'ペン'
  • 3回目：product = '消しゴム' …という具合です。
• インデックス（0 や 1）を意識する必要がありません。

重要ポイント：

• 「インデックスは要らない、要素だけ扱いたい」場合にとても書きやすいです。
• 配列の長さを気にせず、「全部回す」ことができます。

forEach()：メソッドとして「配列に処理を渡す」

forEach() の基本構造

forEach() は、配列が持っている 「全部に対して処理をする」ためのメソッド です。

配列.forEach(function(要素) {
  // 要素を使った処理
});

配列.forEach(function(要素) {
  // 要素を使った処理
});

商品リストを表示する場合は、こう書きます。

const products = ['ノート', 'ペン', '消しゴム', '定規', 'ファイル'];

products.forEach(function(product) {
  console.log(product);
});

const products = ['ノート', 'ペン', '消しゴム', '定規', 'ファイル'];

products.forEach(function(product) {
  console.log(product);
});

アロー関数で書くことも多い

products.forEach((product) => {
  console.log(product);
});

products.forEach((product) => {
  console.log(product);
});

• function(product) { ... } を ((product) => { ... }) と書き換えた形です。
• Day 13で学んだアロー関数の復習にもなります。

forEach() の考え方

• 「配列に対して、1つずつ処理してね」と 処理を渡す イメージです。
• インデックスも長さも意識せず、「要素ごとに処理する」ことに集中できます。

3つの書き方を並べて比較する（商品一覧表示）

同じ「商品一覧表示」を、3つの方法で書いてみます。

const products = ['ノート', 'ペン', '消しゴム', '定規', 'ファイル'];

// 1. for文（インデックスを使う）
for (let i = 0; i < products.length; i++) {
  console.log(`for：${products[i]}`);
}

// 2. for...of（要素そのものを扱う）
for (const product of products) {
  console.log(`for...of：${product}`);
}

// 3. forEach（メソッドとして処理を渡す）
products.forEach((product) => {
  console.log(`forEach：${product}`);
});

const products = ['ノート', 'ペン', '消しゴム', '定規', 'ファイル'];

// 1. for文（インデックスを使う）
for (let i = 0; i < products.length; i++) {
  console.log(`for：${products[i]}`);
}

// 2. for...of（要素そのものを扱う）
for (const product of products) {
  console.log(`for...of：${product}`);
}

// 3. forEach（メソッドとして処理を渡す）
products.forEach((product) => {
  console.log(`forEach：${product}`);
});

それぞれの特徴：

• for
  • インデックスを使いたいときに便利（何番目かを知りたいなど）。
• for...of
  • シンプルに「全部の要素を処理したい」ときに読みやすい。
• forEach()
  • 「配列に処理を渡す」スタイルで、関数型の書き方に慣れるきっかけになる。

Day 17 前半：商品一覧表示テンプレート（ブラウザで実行可能）

以下のテンプレートをブラウザで開き、 コンソールを見ながら3つの繰り返し構文の違いを確認してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 17 前半：配列の繰り返し 練習テンプレート</title>
</head>
<body>
  <h1>Day 17 前半：配列の繰り返し（for / for...of / forEach）</h1>
  <p>ブラウザのコンソールを開いて、商品一覧表示の結果を確認してください。</p>

  <script>
    console.log('--- 商品リストを用意 ---');

    const products = ['ノート', 'ペン', '消しゴム', '定規', 'ファイル'];

    console.log('商品リスト：', products);

    console.log('--- for文で商品一覧を表示 ---');

    // for文：インデックスを使って商品を表示します
    for (let i = 0; i < products.length; i++) {
      console.log(`for：インデックス ${i} の商品は「${products[i]}」です`);
    }

    console.log('--- for...of で商品一覧を表示 ---');

    // for...of：要素そのものを扱って商品を表示します
    for (const product of products) {
      console.log(`for...of：商品「${product}」を表示します`);
    }

    console.log('--- forEach() で商品一覧を表示 ---');

    // forEach：配列に処理を渡して、1つずつ商品を表示します
    products.forEach((product, index) => {
      // 第2引数の index にはインデックスが入ります
      console.log(`forEach：インデックス ${index} の商品は「${product}」です`);
    });

    console.log('--- Day 17 前半：配列の繰り返しの練習が完了しました ---');
  </script>
</body>
</html>

Day 17 前半のまとめ

Day 17前半では、配列の繰り返し処理として

• for：インデックスを自分で管理しながら回す
• for...of：要素そのものを順番に取り出して回す
• forEach()：配列に「処理」を渡して回してもらう

という3つの書き方を、商品一覧表示を通して学びました。

ここで意識してほしいのは、

• 「配列を1つずつ処理する」という発想が、 どの書き方でも共通していること
• インデックスが必要かどうかで、 for を使うか for...of / forEach() を使うかを選べること

です。

この3つに慣れておくと、 今後の「配列＋条件分岐」「配列＋関数」「配列＋オブジェクト」といった応用が ぐっと書きやすく、読みやすくなっていきます。

Day 17：配列の繰り返し（後半）

3つの書き方を「使い分ける視点」で身につける

Day 17後半では、前半で学んだ

• for
• for...of
• forEach()

を、商品一覧表示の実践を通して 「どう使い分けるか」 まで踏み込んでいきます。 同じ「配列を順番に処理する」でも、書き方によって向いている場面が少しずつ違います。 ここでは、商品一覧を表示しながら、それぞれの特徴をステップバイステップで確認していきます。

商品一覧表示の前提となる配列を用意する

商品名だけのシンプルな配列

まずは、商品名だけのシンプルな配列を用意します。

const products = ['ノート', 'ペン', '消しゴム', '定規', 'ファイル'];

const products = ['ノート', 'ペン', '消しゴム', '定規', 'ファイル'];

• この配列を、3つの繰り返し構文で順番に表示していきます。
• 後半では、「インデックスを使うかどうか」「書きやすさ・読みやすさ」を意識して比較していきます。

for文を深掘りする：インデックスを自由に使える強さ

基本の for 文で商品一覧を表示する

const products = ['ノート', 'ペン', '消しゴム', '定規', 'ファイル'];

for (let i = 0; i < products.length; i++) {
  console.log(`商品${i}：${products[i]}`);
}

const products = ['ノート', 'ペン', '消しゴム', '定規', 'ファイル'];

for (let i = 0; i < products.length; i++) {
  console.log(`商品${i}：${products[i]}`);
}

• i はインデックス（何番目か）を表します。
• products.length は配列の長さ（要素数）です。

インデックスを使って「番号付き表示」にする

インデックスを使うと、「何番目の商品か」を表示できます。

for (let i = 0; i < products.length; i++) {
  const product = products[i]; // 現在のインデックスの商品を取り出します
  const displayNumber = i + 1; // 人間向けの番号（1スタート）に変換します

  console.log(`第${displayNumber}候補の商品は「${product}」です。`);
}

for (let i = 0; i < products.length; i++) {
  const product = products[i]; // 現在のインデックスの商品を取り出します
  const displayNumber = i + 1; // 人間向けの番号（1スタート）に変換します

  console.log(`第${displayNumber}候補の商品は「${product}」です。`);
}

ここが重要です：

• プログラミングの世界ではインデックスは 0 から始まります。
• ユーザー向けに表示するときは「1番目」「2番目」としたいので、i + 1 のように変換します。
• for 文は、このように「インデックスを自由に使いたい場面」に向いています。

for…of を深掘りする：要素だけに集中できるシンプルさ

基本の for…of で商品一覧を表示する

const products = ['ノート', 'ペン', '消しゴム', '定規', 'ファイル'];

for (const product of products) {
  console.log(`商品：${product}`);
}

const products = ['ノート', 'ペン', '消しゴム', '定規', 'ファイル'];

for (const product of products) {
  console.log(`商品：${product}`);
}

• product には、ループごとに配列の要素が1つずつ入ります。
• インデックスを意識する必要がありません。

「要素だけ扱いたい」場面でのメリット

例えば、「商品名を全部ログに出したいだけ」の場合は、 インデックスは不要なので、for...of のほうが読みやすくなります。

for (const product of products) {
  console.log(`在庫確認中の商品：「${product}」`);
}

for (const product of products) {
  console.log(`在庫確認中の商品：「${product}」`);
}

ここが重要です：

• for...of は「インデックスを使わない」前提で書かれています。
• 「配列の全要素を順番に処理したいだけ」のときに、とてもシンプルで読みやすいです。

forEach() を深掘りする：配列に「処理を渡す」スタイル

基本の forEach() で商品一覧を表示する

const products = ['ノート', 'ペン', '消しゴム', '定規', 'ファイル'];

products.forEach((product) => {
  console.log(`forEachで表示：${product}`);
});

const products = ['ノート', 'ペン', '消しゴム', '定規', 'ファイル'];

products.forEach((product) => {
  console.log(`forEachで表示：${product}`);
});

• forEach() は、配列が持っている「全部に対して処理する」ためのメソッドです。
• 引数として渡した関数が、要素ごとに呼び出されます。

インデックスも受け取れる

forEach() のコールバック関数は、2つ目の引数としてインデックスも受け取れます。

products.forEach((product, index) => {
  const displayNumber = index + 1;

  console.log(`forEach：第${displayNumber}商品は「${product}」です。`);
});

products.forEach((product, index) => {
  const displayNumber = index + 1;

  console.log(`forEach：第${displayNumber}商品は「${product}」です。`);
});

ここが重要です：

• forEach() は「要素」と「インデックス」の両方を扱えます。
• 「配列に処理を渡す」スタイルに慣れると、後の高階関数（map, filter など）にもスムーズにつながります。

3つの書き方を「商品一覧表示」で比較する

同じ処理を3通りで書いてみる

const products = ['ノート', 'ペン', '消しゴム', '定規', 'ファイル'];

// 1. for文：インデックスを自分で管理
for (let i = 0; i < products.length; i++) {
  const product = products[i];
  const displayNumber = i + 1;

  console.log(`for：第${displayNumber}商品は「${product}」です。`);
}

// 2. for...of：要素だけ扱う
let count = 1; // 人間向けの番号を自分で管理します
for (const product of products) {
  console.log(`for...of：第${count}商品は「${product}」です。`);
  count++; // 自分で番号を増やします
}

// 3. forEach：配列に処理を渡し、インデックスも受け取る
products.forEach((product, index) => {
  const displayNumber = index + 1;
  console.log(`forEach：第${displayNumber}商品は「${product}」です。`);
});

const products = ['ノート', 'ペン', '消しゴム', '定規', 'ファイル'];

// 1. for文：インデックスを自分で管理
for (let i = 0; i < products.length; i++) {
  const product = products[i];
  const displayNumber = i + 1;

  console.log(`for：第${displayNumber}商品は「${product}」です。`);
}

// 2. for...of：要素だけ扱う
let count = 1; // 人間向けの番号を自分で管理します
for (const product of products) {
  console.log(`for...of：第${count}商品は「${product}」です。`);
  count++; // 自分で番号を増やします
}

// 3. forEach：配列に処理を渡し、インデックスも受け取る
products.forEach((product, index) => {
  const displayNumber = index + 1;
  console.log(`forEach：第${displayNumber}商品は「${product}」です。`);
});

使い分けの視点

• for
  • インデックスを細かく制御したいとき（途中でスキップしたり、逆順にしたり）に向いています。
• for…of
  • 「要素だけを順番に処理したい」場面で、最も読みやすく書けます。
• forEach()
  • 「配列に処理を渡す」スタイルで、関数型の書き方に慣れたいときに向いています。

Day 17 後半：商品一覧表示テンプレート（ブラウザで実行可能）

以下のテンプレートをブラウザで開き、 コンソールを見ながら3つの書き方の違いを体感してみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 17 後半：配列の繰り返し 練習テンプレート</title>
</head>
<body>
  <h1>Day 17 後半：配列の繰り返し（for / for...of / forEach）商品一覧表示</h1>
  <p>ブラウザのコンソールを開いて、3つの書き方の違いを確認してください。</p>

  <script>
    console.log('--- 商品リストを用意 ---');

    const products = ['ノート', 'ペン', '消しゴム', '定規', 'ファイル'];

    console.log('商品リスト：', products);

    console.log('--- for文で商品一覧を表示（インデックスを活用） ---');

    for (let i = 0; i < products.length; i++) {
      const product = products[i];
      const displayNumber = i + 1; // 人間向けの番号（1スタート）

      console.log(`for：第${displayNumber}商品は「${product}」です。`);
    }

    console.log('--- for...of で商品一覧を表示（要素だけを扱う） ---');

    let count = 1; // 人間向けの番号を自分で管理
    for (const product of products) {
      console.log(`for...of：第${count}商品は「${product}」です。`);
      count++;
    }

    console.log('--- forEach() で商品一覧を表示（インデックスも受け取る） ---');

    products.forEach((product, index) => {
      const displayNumber = index + 1;
      console.log(`forEach：第${displayNumber}商品は「${product}」です。`);
    });

    console.log('--- Day 17 後半：配列の繰り返しの練習が完了しました ---');
  </script>
</body>
</html>

Day 17 後半のまとめ

Day 17後半では、

• for：インデックスを自分で管理しながら回す
• for...of：要素だけをシンプルに回す
• forEach()：配列に処理を渡して回してもらう

という3つの繰り返し構文を、商品一覧表示を通して 使い分けの視点 まで含めて学びました。

ここで意識してほしいのは、

• 「インデックスが必要かどうか」で書き方を選ぶこと
• 読みやすさ・書きやすさも含めて、自分の好みを少しずつ育てていくこと

です。

この3つに慣れておくと、 今後の「配列＋条件分岐」「配列＋オブジェクト」「配列＋関数」の応用が、 ぐっとスムーズに書けるようになっていきます。

Day 17：配列の繰り返しと「全部画面に表示する」ミニ課題

Day 17では、配列の中身を すべて順番に処理するための3つの方法 を学びます。

• for
• for...of
• forEach()

そしてミニ課題として、 「配列のデータをすべて画面に表示する」ことを目標にします。

ここでは、ブラウザ画面（HTML）に表示するところまで含めて、 ステップバイステップでかみ砕いて解説していきます。

配列の繰り返しの基本イメージをつかむ

「1つずつ書く」と「繰り返しでまとめて書く」の違い

例えば、商品リストが次のようにあったとします。

const products = ['ノート', 'ペン', '消しゴム', '定規', 'ファイル'];

const products = ['ノート', 'ペン', '消しゴム', '定規', 'ファイル'];

これを画面に表示したいとき、 1つずつ書くとこうなります。

console.log(products[0]);
console.log(products[1]);
console.log(products[2]);
console.log(products[3]);
console.log(products[4]);

console.log(products[0]);
console.log(products[1]);
console.log(products[2]);
console.log(products[3]);
console.log(products[4]);

要素が増えるたびに、行数が増えていきます。 そこで使うのが 繰り返し処理 です。

• 「配列の要素を、1つずつ順番に処理する」
• 「同じパターンの処理を、何度も自動で繰り返す」

この2つが、配列の繰り返しの基本イメージです。

for文：インデックスを使って「何番目か」を制御する

for文の基本構造

for 文は、次のような形をしています。

for (初期化; 条件; 更新) {
  // 繰り返し実行したい処理
}

for (初期化; 条件; 更新) {
  // 繰り返し実行したい処理
}

配列を回す場合の典型的な書き方はこうです。

const products = ['ノート', 'ペン', '消しゴム', '定規', 'ファイル'];

for (let i = 0; i < products.length; i++) {
  console.log(products[i]);
}

const products = ['ノート', 'ペン', '消しゴム', '定規', 'ファイル'];

for (let i = 0; i < products.length; i++) {
  console.log(products[i]);
}

各部分を丁寧に分解して理解する

for (let i = 0; i < products.length; i++) {
  console.log(products[i]);
}

for (let i = 0; i < products.length; i++) {
  console.log(products[i]);
}

• 初期化：let i = 0;
  • 変数 i を 0 でスタートさせます。
  • i は「インデックス（何番目か）」を表します。
• 条件：i < products.length;
  • i が配列の長さより小さい間、繰り返します。
  • products.length は「配列の要素数」です。
• 更新：i++
  • ループ1回ごとに i を1増やします。
  • i は 0 → 1 → 2 → 3 → 4…と変化します。
• 本体：console.log(products[i]);
  • 現在の i に対応する要素を表示します。

重要ポイント：

• for 文は「インデックスを自分で管理する」スタイルです。
• 「何番目の要素か」を意識したいときに向いています。

for…of：インデックスではなく「要素そのもの」を扱う

for…of の基本構造

for...of は、配列の 要素そのもの を順番に取り出す構文です。

for (const 要素 of 配列) {
  // 要素を使った処理
}

for (const 要素 of 配列) {
  // 要素を使った処理
}

商品リストを表示する場合は、こう書きます。

const products = ['ノート', 'ペン', '消しゴム', '定規', 'ファイル'];

for (const product of products) {
  console.log(product);
}

const products = ['ノート', 'ペン', '消しゴム', '定規', 'ファイル'];

for (const product of products) {
  console.log(product);
}

for…of の考え方

• product には、ループごとに配列の要素が1つずつ入ります。
  • 1回目：product = 'ノート'
  • 2回目：product = 'ペン'
  • 3回目：product = '消しゴム' …という具合です。
• インデックス（0 や 1）を意識する必要がありません。

重要ポイント：

• 「インデックスは要らない、要素だけ扱いたい」場合にとても書きやすいです。
• 配列の長さを気にせず、「全部回す」ことができます。

forEach()：メソッドとして「配列に処理を渡す」

forEach() の基本構造

forEach() は、配列が持っている 「全部に対して処理をする」ためのメソッド です。

配列.forEach(function(要素) {
  // 要素を使った処理
});

配列.forEach(function(要素) {
  // 要素を使った処理
});

商品リストを表示する場合は、こう書きます。

const products = ['ノート', 'ペン', '消しゴム', '定規', 'ファイル'];

products.forEach(function(product) {
  console.log(product);
});

const products = ['ノート', 'ペン', '消しゴム', '定規', 'ファイル'];

products.forEach(function(product) {
  console.log(product);
});

アロー関数で書くことも多い

products.forEach((product) => {
  console.log(product);
});

products.forEach((product) => {
  console.log(product);
});

• function(product) { ... } を ((product) => { ... }) と書き換えた形です。
• Day 13で学んだアロー関数の復習にもなります。

インデックスも受け取れる

forEach() のコールバック関数は、2つ目の引数としてインデックスも受け取れます。

products.forEach((product, index) => {
  console.log(`インデックス${index}の商品は「${product}」です。`);
});

products.forEach((product, index) => {
  console.log(`インデックス${index}の商品は「${product}」です。`);
});

重要ポイント：

• forEach() は「要素」と「インデックス」の両方を扱えます。
• 「配列に処理を渡す」スタイルに慣れると、後の map や filter などにもつながります。

ミニ課題：配列のデータをすべて画面に表示する

ここからは、ブラウザ画面（HTML）に配列の中身をすべて表示するミニ課題です。 3つの方法のうち、まずは for を使い、そのあと for...of と forEach() に書き換えてみます。

共通の前提：HTML側に表示場所を用意する

まず、HTMLに「表示する場所」を用意します。

<ul id="product-list"></ul>

• <ul> は「箇条書きリスト」を表すタグです。
• id="product-list" は、JavaScriptからこの要素を取得するための目印です。

Step 1：for文で配列のデータを画面に表示する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 17 ミニ課題：配列のデータをすべて画面に表示（for版）</title>
</head>
<body>
  <h1>商品一覧（for文で表示）</h1>

  <!-- 商品リストを表示する場所 -->
  <ul id="product-list"></ul>

  <script>
    // 商品の配列を用意します
    const products = ['ノート', 'ペン', '消しゴム', '定規', 'ファイル'];

    // 表示先の要素を取得します
    const productListElement = document.getElementById('product-list');

    // for文で配列を繰り返し処理します
    for (let i = 0; i < products.length; i++) {
      const product = products[i]; // 現在のインデックスの商品を取り出します

      // li要素（リストの1項目）を作成します
      const li = document.createElement('li');

      // li要素のテキストに商品名を設定します
      li.textContent = `第${i + 1}商品：${product}`;

      // ul要素の子要素として追加します
      productListElement.appendChild(li);
    }
  </script>
</body>
</html>

ここでの重要ポイント：

• document.getElementById('product-list') で、HTMLの表示場所を取得しています。
• document.createElement('li') で、新しい <li> 要素を作っています。
• li.textContent = ... で、表示する文字を設定しています。
• appendChild(li) で、画面に追加しています。

Step 2：for…of で同じことをしてみる

次に、同じ処理を for...of で書いてみます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 17 ミニ課題：配列のデータをすべて画面に表示（for...of版）</title>
</head>
<body>
  <h1>商品一覧（for...ofで表示）</h1>

  <ul id="product-list"></ul>

  <script>
    const products = ['ノート', 'ペン', '消しゴム', '定規', 'ファイル'];
    const productListElement = document.getElementById('product-list');

    let count = 1; // 人間向けの番号（1スタート）を自分で管理します

    // for...ofで配列の要素を順番に取り出します
    for (const product of products) {
      const li = document.createElement('li');
      li.textContent = `第${count}商品：${product}`;
      productListElement.appendChild(li);

      count++; // 次の商品の番号に進めます
    }
  </script>
</body>
</html>

ここでの重要ポイント：

• for...of ではインデックスを扱わないので、番号は count で自分で管理しています。
• 「要素だけ扱いたい」場面では、for...of のほうが読みやすくなります。

Step 3：forEach() で同じことをしてみる

最後に、forEach() を使って同じ処理を書いてみます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 17 ミニ課題：配列のデータをすべて画面に表示（forEach版）</title>
</head>
<body>
  <h1>商品一覧（forEachで表示）</h1>

  <ul id="product-list"></ul>

  <script>
    const products = ['ノート', 'ペン', '消しゴム', '定規', 'ファイル'];
    const productListElement = document.getElementById('product-list');

    // forEachで配列の要素とインデックスを受け取ります
    products.forEach((product, index) => {
      const li = document.createElement('li');
      const displayNumber = index + 1; // 人間向けの番号（1スタート）

      li.textContent = `第${displayNumber}商品：${product}`;
      productListElement.appendChild(li);
    });
  </script>
</body>
</html>

ここでの重要ポイント：

• forEach((product, index) => { ... }) の第2引数 index にインデックスが入ります。
• 「要素」と「インデックス」の両方を扱えるので、番号付き表示が簡単に書けます。

Day 17 ミニ課題のまとめ

Day 17のミニ課題では、

• for
• for...of
• forEach()

の3つを使って、 「配列のデータをすべて画面に表示する」 というゴールを達成しました。

ここで意識してほしいのは、

• どの書き方でも「配列の全要素を順番に処理できる」こと
• インデックスが必要かどうかで、書き方を選べること
• HTML要素を作って appendChild することで、 「コンソールではなく画面に表示する」ことができること

です。

このミニ課題を通して、 「配列の繰り返し」と「画面への表示」がつながってきたと思います。

この感覚は、今後の 一覧表示・リスト表示・テーブル表示 など、 実際のWebアプリで非常に頻繁に使われる重要なパターンになります。