Day 3・関数とオブジェクト — 処理とデータをまとめる

map と filter — 配列を変換する・絞り込む

map は各要素を変換して新しい配列を作り、filter は条件で要素を絞る。Reactのリスト表示の土台。

map は「全員に同じ加工」、filter は「条件で選抜」

配列を扱うとき、実務でいちばん使うのが map と filter です。たとえ話で言うと、map は「行列に並んだ全員に同じスタンプを押す」加工、filter は「条件に合う人だけを列から選び出す」選抜です。どちらも元の配列はそのままに、新しい配列を作って返すのが特徴です。

JAVASCRIPT

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

// map: 各要素を2倍にした新しい配列を作る
const doubled = numbers.map((n) => n * 2);
console.log(doubled); // [2, 4, 6, 8]
console.log(numbers); // [1, 2, 3, 4] 元は変わらない

map は各要素に同じ処理をして、同じ長さの新しい配列を返す

JAVASCRIPT

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

// filter: 条件(偶数)を満たす要素だけ残す
const evens = numbers.filter((n) => n % 2 === 0);
console.log(evens); // [2, 4, 6]

filter は「true を返した要素だけ」を集めた新しい配列を返す

map と filter に渡しているのは、Day3で学んだアロー関数です。map の (n) => n * 2 は「各要素をどう加工するか」、filter の (n) => n % 2 === 0 は「その要素を残すかどうかの条件」を表します。オブジェクトの配列と組み合わせると、実務そのものの形になります。

JAVASCRIPT

const users = [
  { name: "太郎", age: 20 },
  { name: "花子", age: 17 },
  { name: "次郎", age: 30 },
];

// filter で成人だけ、map で名前だけ取り出す
const adultNames = users
  .filter((u) => u.age >= 20)
  .map((u) => u.name);

console.log(adultNames); // ["太郎", "次郎"]

filter で絞り、map で変換。つなげて書けるのがよく使われる形

for ループで手書き

空の配列を用意して push していく。行数が多く意図が見えにくい

JAVASCRIPT

const doubled = [];
for (let i = 0; i < numbers.length; i++) {
  doubled.push(numbers[i] * 2);
}

map で1行

「各要素を2倍にする」という意図がそのまま読める

JAVASCRIPT

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

なぜ for より map / filter が好まれるのか

for ループは「カウンタを進めて、空配列に push して」という手順が主役で、何をしたいのかが埋もれます。map / filter は「各要素を変換する」「条件で絞る」という目的そのものが名前になっているので、読んだ瞬間に意図が分かります。元の配列を壊さず新しい配列を返す点も、バグを減らします。

map と filter を取り違えない

map は「必ず元と同じ個数」を返し、filter は「条件に合った分だけ(減ることがある)」を返します。個数を変えたいのに map を使う、値を加工したいのに filter を使う、という取り違えはよくあるミスです。「変換なら map、絞り込みなら filter」と覚えましょう。

リスト表示の土台になる(予告)

Reactでは、users.map((u) => <li>{u.name}</li>) のように map で配列を画面の一覧に変換します。つまり「データの配列を、表示要素の配列に map する」のが画面表示の基本です。ここで map / filter を読めるようにしておくと、次のステップがぐっと楽になります。

AIにはこう聞く

「このユーザー配列から、20歳以上の人の名前だけを配列で取り出したい」と伝えれば、filter と map を組み合わせたコードを返してくれます。返ってきたコードは「filter=絞り込み、map=変換」と読めば意図を追えます。

読んでも腑に落ちない所は、AIに噛み砕いてもらいましょう。

理解度チェック

答えられれば、面接で説明できる状態に一歩近づきます。

[1, 2, 3].map((n) => n + 10) の結果はどれ?

「配列の中から条件に合う要素だけを残して新しい配列を作る」のに使うメソッドはどれ?

map と filter の違いを、返る配列の個数の観点も含めて説明してください。

記述式です。まず自分の言葉で答えを考えてから、模範解答を開いて自己採点してください。