JavaScriptの配列と for…of 文でデータを繰り返し表示しよう！

作成ファイル・保存場所

js-basic フォルダに以下のファイルを作成してください。

ファイル名	内容
js-basic06.html	配列と for…of を使う練習用HTMLファイル

基本コード(HTML)は下記からコピー

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JS Practice 06</title>
</head>
<body>
  <h1>配列の繰り返し表示</h1>

  <script>
    // 配列を作成
    let fruits = ['りんご', 'バナナ', 'みかん'];

    // for...of で繰り返し表示


  </script>
</body>
</html>

JavaScriptは <script> タグの中に直接書きましょう（内部JS）

今回のテーマ

複数のデータをまとめて管理したいときに使うのが「配列（Array）」です。
今回は、配列の作り方と for...of 文(制御構文の中のループ構文）を使って 1つずつ取り出して表示する方法 を学びましょう！

目的

配列（Array）の基本的な作り方を理解する
for...of を使って配列の要素を繰り返し処理できるようになる
配列の中身を1つずつ console.log() で確認する
条件付き表示（if文との組み合わせ）にもチャレンジする

チェックポイント

let fruits = ['りんご', 'バナナ', 'みかん']; のように配列が作れるか
for...of 文を使って配列の中身を順に取り出せるか
console.log() で正しく出力できているか
条件付きで出力を変える if文と組み合わせられているか

解説ポイント

配列とは？

配列（Array） は、複数の値をまとめて管理できる箱のようなものです。

let fruits = ['りんご', 'バナナ', 'みかん'];

値はカンマ（,）で区切って、角かっこ（[]）の中に並べます
左から順番に 0番目, 1番目, 2番目 … とインデックス（番号）が付きます
要素の数は .length で取得できます

console.log(fruits[0]); // りんご
console.log(fruits[2]); // みかん
console.log(fruits.length); // 3

配列名の後ろに [] を置き、インデックスを指定すると、その要素を取り出せます。

配列にあとから要素を追加するには？

配列にあとから要素を追加するには、配列オブジェクトのメソッド .push() を使います。

メソッドは、「オブジェクトにくっついている関数」のことです。

`.push()`：最後に追加

let fruits = ['りんご', 'バナナ', 'みかん'];

// 新しい要素を追加
//// ここで fruits は「配列オブジェクト」
fruits.push('パイナップル');

// 配列の中身を確認
console.log(fruits);
// 出力 → ['りんご', 'バナナ', 'みかん', 'パイナップル']

`.unshift()`：最初に追加

fruits.unshift('もも');
console.log(fruits); // → ['もも', 'りんご', 'バナナ', 'パイナップル']

push はよく使いますが、unshift も「先頭に追加したいとき」に便利です。

ちなみに要素を削除するメソッドもあります

メソッド	動作	戻り値（削除された値）
`.pop()`	末尾から削除	削除された値を返す
`.shift()`	先頭から削除	同上

let fruits = ['もも', 'りんご', 'バナナ', 'みかん'];

let last = fruits.pop();      // 'みかん'
console.log(fruits);          // ['もも', 'りんご', 'バナナ']

let first = fruits.shift();   // 'もも'
console.log(fruits);          // ['りんご', 'バナナ']

for…of 文とは？

for…of 文は、配列などのイテラブル（反復可能）オブジェクトから要素を順番に取り出して処理したいときに使う制御構文（ループ文）です。

let fruits = ['りんご', 'バナナ', 'みかん'];

for (let fruit of fruits) {
  console.log(fruit); // りんご → バナナ → みかん
}

fruit は、ループごとに配列から取り出される要素の値（let fruit）
fruits は、繰り返し処理の対象となる配列オブジェクト
ループが始まると、自動的に先頭から順に要素をひとつずつ fruit に代入し、ブロック内を実行します
インデックス番号は自動で管理されるため、要素の「値」だけをシンプルに扱いたい場合に最適です

for 文との違い

for：インデックス番号（i）で管理したいときに便利
for…of：中身だけを使いたいときにシンプルでわかりやすい

配列から値を取り出すことをfor文で行うと、やや冗長になります。

// for 文で同じ処理をすると…
//ループの初期値・終了条件・増分を細かく調整できる
for (let i = 0; i < fruits.length; i++) {
 console.log(fruits[i]); // りんご → バナナ → みかん
}

// for…of 文なら値を直接扱える
//コード量が少なく可読性が高い
for (let fruit of fruits) {
 console.log(fruit);    // りんご → バナナ → みかん
}

HTML/JavaScriptトレーニング

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JS Practice 06</title>
</head>
<body>
  <h1>配列の繰り返し表示</h1>

  <script>
    // 配列を作成して、中身を表示しよう
    let fruits = ['りんご', 'バナナ', 'みかん'];

    console.log(fruits[0]); // りんご
    console.log(fruits[2]); // みかん
    console.log(`配列の長さは ${fruits.length} です`);
    console.log(fruits); // 配列全体を確認

    // for...of で1つずつ表示
    for (let fruit of fruits) {
      console.log(`フルーツの配列　${fruit}`); // りんご → バナナ → みかん
    }

    // ステップ3：配列に要素を追加しよう
    fruits.push('パイナップル'); // 最後に追加
    fruits.unshift('もも');       // 最初に追加

    console.log(fruits); // 追加後の配列を確認

    // ステップ4：もう一度 for...of で表示
    for (let fruit of fruits) {
      console.log(`フルーツの配列　${fruit}`)
    }

    // おまけ課題：自分の好きな果物を追加してみよう
    // fruits.push('ここに自分の果物を追加');
    //for of で確認してみよう
  </script>
</body>
</html>

応用トレーニング

fruits 配列に新しい要素を追加してみよう（push() または unshift() を使おう）
最終的な配列を for…of で1つずつ出力してみよう

解答

let fruits2 = ['りんご', 'バナナ', 'みかん'];

// 配列の末尾に追加
fruits2.push('パイナップル');

// 配列の先頭に追加
fruits2.unshift('もも');

console.log(fruits2.length); // → 5になっていれば追加された

// 配列を1つずつ出力
for (let fruit of fruits2) {
  console.log(fruit);
}