JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：JavaScriptを使えるレベルにする － Day12：配列応用

Day12 前半のゴール

Day12 は「配列を“ただ回す”段階から、“意味を持って変換・抽出・処理する”段階」に進む日です。
テーマは map / filter / forEach。しかも「実務で超重要」。

前半ではまず、それぞれをこういうイメージでつかむことをゴールにします。

Day12 前半でつかみたい3つの感覚

map＝配列を「変換」して、新しい配列を作る

filter＝配列から「条件に合うものだけを残す」

forEach＝配列の各要素に「順番に処理をする」

ここをしっかり押さえると、for 文だけで配列を回していた世界から一気に抜け出せます。

map の基本：配列を「変換」する

map は「同じ長さの別の配列を作る」

まずは一番イメージしやすい map からいきます。

const numbers = [1, 2, 3, 4];

const doubled = numbers.map((n) => {
  return n * 2;
});

console.log(doubled);  // [2, 4, 6, 8]

const numbers = [1, 2, 3, 4];

const doubled = numbers.map((n) => {
  return n * 2;
});

console.log(doubled);  // [2, 4, 6, 8]

numbers はそのまま、
doubled は「各要素を2倍にした新しい配列」です。

ここで大事なのは、

元の配列は変わらない
要素の数は同じ（4つ → 4つ）
「中身の形」だけ変わる

という感覚です。

コールバック関数の役割

map に渡している (n) => { return n * 2; } は「コールバック関数」です。
map は、配列の各要素に対してこの関数を呼び出し、
その戻り値を集めて新しい配列を作ります。

もう少し展開すると、頭の中ではこう動いています。

1番目の要素 1 → 関数に渡す → 2 が返る
2番目の要素 2 → 関数に渡す → 4 が返る
3番目の要素 3 → 関数に渡す → 6 が返る
4番目の要素 4 → 関数に渡す → 8 が返る

それを [2, 4, 6, 8] という配列にして返しているイメージです。

オブジェクト配列を map で変換する

実務でよくあるのは「オブジェクトの配列」を map するパターンです。

const users = [
  { name: "Taro", age: 20 },
  { name: "Hanako", age: 25 },
  { name: "Ken", age: 19 }
];

const names = users.map((user) => {
  return user.name;
});

console.log(names);  // ["Taro", "Hanako", "Ken"]

const users = [
  { name: "Taro", age: 20 },
  { name: "Hanako", age: 25 },
  { name: "Ken", age: 19 }
];

const names = users.map((user) => {
  return user.name;
});

console.log(names);  // ["Taro", "Hanako", "Ken"]

ここでは、

1人分の情報（オブジェクト）
→ 名前だけ（文字列）

という変換を、配列全体に対して行っています。

「配列の形を変える」「必要な情報だけを取り出して新しい配列にする」
これが map の本質です。

filter の基本：配列から「選び出す」

filter は「条件に合うものだけ残す」

次は filter。
これは「配列の中から、条件に合うものだけを残す」メソッドです。

const numbers = [1, 2, 3, 4, 5, 6];

const even = numbers.filter((n) => {
  return n % 2 === 0;
});

console.log(even);  // [2, 4, 6]

const numbers = [1, 2, 3, 4, 5, 6];

const even = numbers.filter((n) => {
  return n % 2 === 0;
});

console.log(even);  // [2, 4, 6]

ここでやっていることは、

n が偶数なら true → 残す
n が奇数なら false → 捨てる

という判定を、配列の全要素に対して行っています。

コールバック関数は「残すかどうか」を決める

filter に渡す関数は、
「この要素を残すなら true、捨てるなら false を返す」関数です。

頭の中ではこう動いています。

1 → 1 % 2 === 0 → false → 捨てる
2 → 2 % 2 === 0 → true → 残す
3 → false → 捨てる
4 → true → 残す
…

その結果 [2, 4, 6] という配列が返ってきます。

オブジェクト配列を filter で絞り込む

これも実務でめちゃくちゃ使います。

const users = [
  { name: "Taro", age: 20 },
  { name: "Hanako", age: 25 },
  { name: "Ken", age: 17 }
];

const adults = users.filter((user) => {
  return user.age >= 20;
});

console.log(adults);
// [{ name: "Taro", age: 20 }, { name: "Hanako", age: 25 }]

const users = [
  { name: "Taro", age: 20 },
  { name: "Hanako", age: 25 },
  { name: "Ken", age: 17 }
];

const adults = users.filter((user) => {
  return user.age >= 20;
});

console.log(adults);
// [{ name: "Taro", age: 20 }, { name: "Hanako", age: 25 }]

「条件に合うユーザーだけを残す」
という処理が、filter でとても自然に書けます。

forEach の基本：「処理をする」ために回す

forEach は「配列をなめながら何かする」

forEach は、
「配列の各要素に対して、順番に処理をする」ためのメソッドです。

const numbers = [1, 2, 3];

numbers.forEach((n) => {
  console.log(n);
});

const numbers = [1, 2, 3];

numbers.forEach((n) => {
  console.log(n);
});

出力は 1, 2, 3。
for 文で書くとこうなります。

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

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

forEach は「インデックスを意識せずに、要素に対して処理をする」ための書き方です。

forEach は「新しい配列を返さない」

ここが map / filter と大きく違うポイントです。

map → 新しい配列を返す
filter → 条件に合う要素だけの新しい配列を返す
forEach → 何も返さない（undefined）

forEach は「副作用（表示する・書き込むなど）」を目的に使うことが多いです。

例えばログ出力。

const users = [
  { name: "Taro", age: 20 },
  { name: "Hanako", age: 25 }
];

users.forEach((user) => {
  console.log(`${user.name} さんは ${user.age} 歳です`);
});

const users = [
  { name: "Taro", age: 20 },
  { name: "Hanako", age: 25 }
];

users.forEach((user) => {
  console.log(`${user.name} さんは ${user.age} 歳です`);
});

「配列を変換したい」なら map / filter、
「ただ処理したいだけ」なら forEach、
という使い分けが大事です。

map / filter / forEach の違いを整理する

3つの役割を一言で言うと

map：変換する（配列の形を変える）
filter：選ぶ（条件に合うものだけ残す）
forEach：処理する（返り値は気にせず、何かを行う）

この「一言イメージ」を持っておくと、
「とりあえず for 文で書く」から卒業できます。

実務でのよくある流れ

例えば、API からユーザー一覧を取ってきて、
「20歳以上の人の名前だけをログに出したい」とします。

やりたいことは、

20歳以上だけに絞る → filter
名前だけの配列にする → map
1人ずつ表示する → forEach

という流れです。

前半ではまだここまで一気に書かなくて大丈夫ですが、
「map / filter / forEach は組み合わせて使うもの」
という感覚だけ持っておいてください。

セキュリティ・安全性の視点で見る配列操作

「全件に対して必ずチェックを通す」ための道具

例えば、ユーザー一覧があって、
「無効なユーザーは処理したくない」というケース。

const users = [
  { name: "Taro", isActive: true },
  { name: "Hanako", isActive: false },
  { name: "Ken", isActive: true }
];

const activeUsers = users.filter((user) => user.isActive);

activeUsers.forEach((user) => {
  console.log(`${user.name} さんに通知を送ります`);
});

const users = [
  { name: "Taro", isActive: true },
  { name: "Hanako", isActive: false },
  { name: "Ken", isActive: true }
];

const activeUsers = users.filter((user) => user.isActive);

activeUsers.forEach((user) => {
  console.log(`${user.name} さんに通知を送ります`);
});

filter を通すことで、

無効なユーザーに誤って通知を送る
権限のないユーザーに処理をしてしまう

といった事故を防ぎやすくなります。

「配列の全要素に対して、必ずこの条件を通す」
という書き方ができるのは、
安全な処理フローを作るうえでとても強いです。

Day12 前半のサンプルコード

map / filter / forEach を一度に触る小さな例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Day12 配列応用 前半</title>
  </head>
  <body>
    <h1>Day12: 配列応用（前半）</h1>

    <script>
      const users = [
        { name: "Taro", age: 20 },
        { name: "Hanako", age: 25 },
        { name: "Ken", age: 17 }
      ];

      const adults = users.filter((user) => user.age >= 20);

      const names = adults.map((user) => user.name);

      names.forEach((name) => {
        console.log(name + " さんは大人です");
      });
    </script>
  </body>
</html>

filter → map → forEach の流れが一度に入っています。
コンソールの出力を見ながら、「どこで何をしているか」を追ってみてください。

Day12 前半のまとめ

map は「配列を変換する」
filter は「配列から選び出す」
forEach は「配列に対して処理をする」

この3つは、JavaScript 実務で本当に毎日のように使います。
前半でまずは「役割の違い」と「基本形」を体に入れておいて、
後半でより実践的な組み合わせ方・書き方に踏み込んでいきます。