【JS応用-1】HTMLを一行ずつ書くのは卒業！「配列」と「ループ」でリストを自動生成

JavaScript基礎編、お疲れ様でした！
今日から「応用編」に入ります。

これまでは「ボタンを押したら文字が変わる」という単発の動きでしたが、ここからは「たくさんのデータを一気に扱う」技術を学びます。

例えば、ECサイトの商品一覧。
あれはHTMLを手書きしているのではなく、「データの数だけ自動でタグを作っている」のです。
今回はその仕組みの基礎となる、配列（Array）とループ（Loop）をマスターしましょう！

1. データをまとめる箱「配列（Array）」
1. 書き方
2. データの取り出し方
2. 繰り返し処理「for…of文」
1. 書き方
実践：Todoリストを自動生成しよう
解説：何が起きている？
まとめ
1. 📝 今日のミニテスト

1. データをまとめる箱「配列（Array）」

これまで、変数には1つのデータしか入りませんでした。

let fruit1 = "りんご";
let fruit2 = "みかん";
let fruit3 = "バナナ";
// ↑ データが100個あったら、変数も100個必要...大変すぎる！

そこで登場するのが「配列」です。
これは、「仕切りのある長いケース」のようなものです。

書き方

カギカッコ [] を使い、カンマ , で区切ってデータを入れます。

// 1つの変数に、3つのデータをまとめて入れる！
const fruits = ["りんご", "みかん", "バナナ"];

データの取り出し方

「何番目のデータ？」を指定して取り出します。
重要なのは、「番号（インデックス）は 0 から始まる」ということです。

console.log( fruits[0] ); // "りんご"
console.log( fruits[1] ); // "みかん"
console.log( fruits[2] ); // "バナナ"

2. 繰り返し処理「for…of文」

配列の中身を、先頭から順番に全部取り出して処理したい。
そんな時は、以前習った for 文の進化版、for...of 文を使います。

これが今のJavaScriptで最もモダンで簡単な書き方です。

書き方

const fruits = ["りんご", "みかん", "バナナ"];

// 「fruits」から1つずつ取り出して、変数「item」に入れる
for (const item of fruits) {
    console.log(item + "を食べます");
}

/*
実行結果：
りんごを食べます
みかんを食べます
バナナを食べます
*/

「データの数」を数える必要はありません。
配列の中にデータがある限り、自動で繰り返してくれます。

実践：Todoリストを自動生成しよう

では、配列に入っているデータを、HTMLのリスト（<ul>）として画面に表示してみましょう。

以前習った innerHTML（HTML書き換え）と +=（追加）を組み合わせます。

<!DOCTYPE html>
<html lang="ja">
<body>

    <h1>今日のやるこリスト</h1>
    
    <!-- ここにJSでリストを作る -->
    <ul id="todo-list"></ul>

    <script>
        // 1. データを用意する（配列）
        const todos = ["洗濯をする", "メールを返す", "JSの勉強", "猫と遊ぶ"];
        
        // 2. リストを表示する場所を取得
        const listElement = document.querySelector("#todo-list");

        // 3. ループでHTMLを作って追加していく
        for (const todo of todos) {
            
            // 「<li>洗濯をする</li>」のようなHTML文字を作る
            const html = `<li>${todo}</li>`;
            
            // listElementの中身に「追加（+=）」する
            // ※「=」だと上書きされて最後の1個しか残らないので注意！
            listElement.innerHTML += html;
            
        }
    </script>

</body>
</html>

解説：何が起きている？

このプログラムは、以下のように動いています。

todos 配列から、1つ目の「洗濯をする」を取り出す。
<li>洗濯をする</li> という文字を作る。
ul タグの中に追加する。
次の「メールを返す」を取り出す…（以下繰り返し）

もし配列の中身が100個あっても、このコードは1行も増えません。
これがプログラミングの効率化です。

まとめ

データをまとめるなら 配列 ["A", "B"]。
取り出す時は 0番目 から始まる。
全部処理するなら for (const item of list) が便利！

次回は、配列よりもさらに詳しいデータを扱える「オブジェクト」について学びます。
「名前」だけでなく「値段」や「画像URL」も一緒に扱えるようになりますよ！

📝 今日のミニテスト

応用編最初のテストです！クリックで答え合わせ。

Q1. 配列を作る正しい記号は？

正解：[] （カギカッコ / ブラケット）
ちなみに {} は次回習うオブジェクト、() は関数などで使います。

Q2. const colors = ["赤", "青", "黄"];
この時、colors[1] の中身は？

正解：「青」
プログラミングの番号は「0」から始まります。
0番目が赤、1番目が青、2番目が黄です。

Q3. 実践問題：配列 users の中身を順番に処理するコードを完成させてください。

const users = ["田中", "鈴木"];

for (const user ① users) {
    console.log(user);
}

// 答え
// ① of
// 「for (const 変数 of 配列)」の形を覚えましょう！