同じような処理を何度も書いているとき、たいてい配列と繰り返しで短くできます。JavaScriptでいちばん使う組み合わせです。

配列 … 値をまとめて入れる箱

script.js
const fruits = ["りんご", "みかん", "ぶどう"];

console.log(fruits[0]); // りんご
console.log(fruits.length); // 3
  • 角かっこで囲み、カンマで区切る
  • 番号は0から始まる（1番目は [0]）
  • .length で個数が分かる

「0から始まる」は最初とても違和感がありますが、慣れます。3つある配列の最後は [2] です。[3] を指定すると存在しないので undefined が返ります。

forEach … 1つずつ順番に処理する

配列の中身を1つずつ
const fruits = ["りんご", "みかん", "ぶどう"];

fruits.forEach(function (fruit) {
  console.log(fruit);
});

forEach は「1つずつ取り出して、この処理をして」という命令です。かっこの中の fruit という名前は自分で決められます。中身が何かを表す名前にしてください。

CODE配列からリストを作るコードを書き換えると、すぐ下で動きます

配列に項目を足してみてください。HTMLを書き足さなくても、表示が増えます。これが繰り返しの威力です。

for 文もある

昔からある書き方
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

for 文は「i を0から始めて、length未満の間、1ずつ増やす」という意味です。書くことが多いぶん、細かい制御ができます。ただ、配列を単純に全部処理するだけなら forEach のほうが読みやすいです。

配列によく使う命令

  • push … 末尾に追加する
  • includes … その値が含まれているかを true / false で返す
  • filter … 条件に合うものだけを取り出して、新しい配列を作る
  • map … 全部を変換して、新しい配列を作る
  • join … 全部をつなげて1つの文字列にする
CODEfilter で条件に合うものだけ取り出すコードを書き換えると、すぐ下で動きます

条件の 500 を変えてみてください。取り出される商品が変わります。

querySelectorAll と組み合わせる

ページ内の全ボタンに同じ処理を付けたいときは、querySelectorAll で取得して forEach で回します。この形は非常によく出てきます。

全部のボタンに同じ処理を付ける
const buttons = document.querySelectorAll(".btn");

buttons.forEach(function (btn) {
  btn.addEventListener("click", function () {
    btn.classList.toggle("is-active");
  });
});

ボタンが3つでも100個でも、このコードは変わりません。同じ処理を人力でコピーしていたら、ここで手が止まります。