filter と find で絞り込む

解説

このレッスンで分かること

• filter は条件に合う要素だけを集めた新しい配列を返します
• find は最初の 1 件そのものを返し、見つからなければ undefined になります

絞り込むたびに、空の配列と for 文を書いている

入門では、条件に合う作品を取り出すのに空の配列を用意し、for-of でまわし、条件に合わないものを飛ばし、残りを push していました。条件が「公開ずみ」「新しい年だけ」「タグ別」と増えるたびに、同じ形の関数が 1 本ずつ増えていきます。

減らす担当は filter です。渡した関数が true を返した要素だけが、新しい配列に残ります。

const works = [
  { title: "プロフィールサイト", year: 2026, tags: ["HTML", "CSS"], published: true },
  { title: "自己紹介カード", year: 2026, tags: ["HTML"], published: true },
  { title: "作品ギャラリー", year: 2025, tags: ["JavaScript"], published: false }
];

const publishedWorks = works.filter((work) => work.published);
// 2 件。元の works は 3 件のまま

条件を重ねたいときは、そのまま論理演算子でつなぎます。filter を 2 回に分けても結果は同じですが、関係のある条件なら 1 つにまとめたほうが読めます。

const recentCss = works.filter((work) => work.year === 2026 && work.tags.includes("CSS"));

戻り値は必ず配列です。1 件も合わなくても null にはならず、長さ 0 の配列が返ります。この性質のおかげで、そのあとに別のメソッドをつないでも落ちません。

解説

0 件かどうかを知りたいときは length を見ます。結果そのものを真偽値として見ると、空配列は truthy なので必ず true になり、判定が効きません。

見つからなかった 1 件で落ちる

一覧から特定の 1 件を取り出したいなら find です。条件に合った最初の要素を、配列ではなくその要素そのものとして返します。

const target = works.find((work) => work.title === "自己紹介カード");
console.log(target.year); // 2026

問題は見つからなかったときです。find は undefined を返すので、そのまま .year と書くと TypeError で止まります。手元のテストデータでは必ず見つかるので気付かず、本番のデータで初めて落ちます。

const found = works.find((work) => work.title === "まだ無い作品");
const year = found ? found.year : null;

受け取ってから確かめる。この 2 行の形を体に入れてください。find を書いたら次の行は必ず存在確認、と決めておくと事故が消えます。

何件ほしいのかで選ぶ

存在の有無だけを知りたいのに find を使うと、受け取った要素を使わない不自然なコードになります。そういうときは some を使うと、意図がそのまま行に出ます。配列の中に特定の値が入っているかを見るなら includes です。タグのような文字列の配列と相性がよく、filter の条件の中でよく使います。

よくある間違い

• 条件ではなく値を返してしまう — works.filter((work) => work.title) は戻り値を真偽値として見るので、タイトルが空でないものが全部残ります。=== などで比べた結果を返してください
• 1 件しか要らないのに filter を使う — 添字 0 で取り出す書き方は動きますが、最後まで走査するうえ、空配列のときの扱いが増えます。1 件と決まっているなら find のほうが素直です
• 項目が欠けた要素で落ちる — work.tags.includes(...) は tags を持たない作品が 1 件混ざるだけで止まります。データの形が揺れるなら、条件の前に値があるかを確かめるか、そもそも配列を必ず持つ形にそろえます

1. pickPopularWorks(works, minViews) の matched に filter の結果を代入する
2. 条件は published が true かつ views が minViews 以上にする
3. matched の中で tags に JavaScript を含む最初の作品を find で探し、found に代入する
4. 準備済みの selectionResult が titles と jsTitle を返す。対象が無い場合の処理は補助関数に任せる