基礎から学ぶJavaScript入門 90日コース | JavaScriptでデータを扱う － Day 18：配列メソッド①

Day 18：配列メソッド① ― 「配列を変換・絞り込み・検索する」力を身につける

Day 18では、配列をより賢く扱うための3つの重要なメソッドを学びます。

• map()：配列を「変換」する
• filter()：配列を「絞り込む」
• find()：配列から「1件だけ見つける」

実践テーマは、

• 商品検索
• 条件によるデータ抽出

です。 ここまで学んできた「配列＋繰り返し」を、より短く・読みやすく書けるようになるステップだと思ってください。

配列メソッドの考え方をざっくりつかむ

「自分で for を書く」から「メソッドに任せる」へ

Day 17では、for / for...of / forEach() を使って、 配列の要素を1つずつ処理する方法を学びました。

const numbers = [1, 2, 3];

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

const numbers = [1, 2, 3];

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

このように「for文＋配列操作」で書いていたことを、 map() / filter() / find() を使うと、もっと短く・意図が伝わりやすく書けるようになります。

map()：配列を「変換」して新しい配列を作る

map() の基本イメージ

map() は、配列の 各要素を変換して、新しい配列を作る メソッドです。

• 元の配列はそのまま
• 変換後の値を集めた「新しい配列」が返ってくる

というのが重要なポイントです。

基本構造

const 新しい配列 = 元の配列.map((要素, インデックス) => {
  // 要素をどう変換するかをここで書きます
  return 変換後の値;
});

const 新しい配列 = 元の配列.map((要素, インデックス) => {
  // 要素をどう変換するかをここで書きます
  return 変換後の値;
});

例1：価格を税込価格に変換する

const prices = [100, 200, 300]; // 税抜価格の配列

const taxRate = 0.1; // 消費税率10%

const pricesWithTax = prices.map((price) => {
  // 各価格に消費税を加算して新しい値を返します
  return Math.floor(price * (1 + taxRate));
});

console.log('元の価格（税抜）：', prices);
console.log('税込価格：', pricesWithTax);

const prices = [100, 200, 300]; // 税抜価格の配列

const taxRate = 0.1; // 消費税率10%

const pricesWithTax = prices.map((price) => {
  // 各価格に消費税を加算して新しい値を返します
  return Math.floor(price * (1 + taxRate));
});

console.log('元の価格（税抜）：', prices);
console.log('税込価格：', pricesWithTax);

• prices は元の配列（税抜価格）
• pricesWithTax は新しい配列（税込価格）
• map() の中で「1つの値をどう変換するか」を書いています。

例2：商品名に「円」を付けて表示用文字列に変換する

const products = [
  { name: 'ノート', price: 100 },
  { name: 'ペン', price: 150 },
  { name: '消しゴム', price: 80 },
];

const productLabels = products.map((product) => {
  // 1つの商品オブジェクトから、表示用の文字列を作ります
  return `${product.name}（${product.price}円）`;
});

console.log('表示用ラベル：', productLabels);
// ['ノート（100円）', 'ペン（150円）', '消しゴム（80円）']

const products = [
  { name: 'ノート', price: 100 },
  { name: 'ペン', price: 150 },
  { name: '消しゴム', price: 80 },
];

const productLabels = products.map((product) => {
  // 1つの商品オブジェクトから、表示用の文字列を作ります
  return `${product.name}（${product.price}円）`;
});

console.log('表示用ラベル：', productLabels);
// ['ノート（100円）', 'ペン（150円）', '消しゴム（80円）']

重要ポイント：

• map() は「配列を別の形に変換する」ためのメソッドです。
• 元の配列を壊さず、新しい配列を作るので、安全に使いやすいです。

filter()：条件に合う要素だけを「絞り込む」

filter() の基本イメージ

filter() は、配列の要素のうち 条件を満たすものだけを集めて、新しい配列を作る メソッドです。

• 「条件に合うものだけ残す」
• 「条件に合わないものは捨てる」

というイメージです。

基本構造

const 絞り込んだ配列 = 元の配列.filter((要素, インデックス) => {
  // true を返した要素だけが残ります
  // false を返した要素は捨てられます
  return 条件式;
});

const 絞り込んだ配列 = 元の配列.filter((要素, インデックス) => {
  // true を返した要素だけが残ります
  // false を返した要素は捨てられます
  return 条件式;
});

例1：100円以上の商品だけを抽出する

const products = [
  { name: 'ノート', price: 100 },
  { name: 'ペン', price: 150 },
  { name: '消しゴム', price: 80 },
  { name: '定規', price: 120 },
];

const expensiveProducts = products.filter((product) => {
  // 価格が100以上なら残す
  return product.price >= 100;
});

console.log('元の商品一覧：', products);
console.log('100円以上の商品：', expensiveProducts);

const products = [
  { name: 'ノート', price: 100 },
  { name: 'ペン', price: 150 },
  { name: '消しゴム', price: 80 },
  { name: '定規', price: 120 },
];

const expensiveProducts = products.filter((product) => {
  // 価格が100以上なら残す
  return product.price >= 100;
});

console.log('元の商品一覧：', products);
console.log('100円以上の商品：', expensiveProducts);

• expensiveProducts には、price >= 100 の商品だけが入ります。
• 条件式が true のものだけが残る、というのが filter のルールです。

例2：名前に「ペン」が含まれる商品だけを抽出する

const products = [
  { name: 'ノート', price: 100 },
  { name: 'ボールペン', price: 150 },
  { name: '消しゴム', price: 80 },
  { name: 'シャープペンシル', price: 200 },
];

const penProducts = products.filter((product) => {
  // 商品名に「ペン」が含まれているかどうかを判定します
  return product.name.includes('ペン');
});

console.log('ペン関連の商品：', penProducts);

const products = [
  { name: 'ノート', price: 100 },
  { name: 'ボールペン', price: 150 },
  { name: '消しゴム', price: 80 },
  { name: 'シャープペンシル', price: 200 },
];

const penProducts = products.filter((product) => {
  // 商品名に「ペン」が含まれているかどうかを判定します
  return product.name.includes('ペン');
});

console.log('ペン関連の商品：', penProducts);

重要ポイント：

• filter() は「条件によるデータ抽出」にぴったりのメソッドです。
• 元の配列はそのまま、新しい配列に「条件に合うものだけ」が入ります。

find()：条件に合う「1件だけ」を見つける

find() の基本イメージ

find() は、配列の中から 条件に合う最初の1件だけ を返すメソッドです。

• 見つかったら、その要素を返す
• 見つからなければ undefined を返す

というのがルールです。

基本構造

const 見つかった要素 = 元の配列.find((要素, インデックス) => {
  // true を返した最初の要素が返されます
  return 条件式;
});

const 見つかった要素 = 元の配列.find((要素, インデックス) => {
  // true を返した最初の要素が返されます
  return 条件式;
});

例1：名前が「ペン」の商品を1件だけ探す

const products = [
  { name: 'ノート', price: 100 },
  { name: 'ペン', price: 150 },
  { name: '消しゴム', price: 80 },
];

const penProduct = products.find((product) => {
  return product.name === 'ペン';
});

console.log('ペンの商品：', penProduct);
// { name: 'ペン', price: 150 }

const products = [
  { name: 'ノート', price: 100 },
  { name: 'ペン', price: 150 },
  { name: '消しゴム', price: 80 },
];

const penProduct = products.find((product) => {
  return product.name === 'ペン';
});

console.log('ペンの商品：', penProduct);
// { name: 'ペン', price: 150 }

例2：価格が200円以上の最初の商品を探す

const products = [
  { name: 'ノート', price: 100 },
  { name: 'ペン', price: 150 },
  { name: '高級ノート', price: 300 },
];

const premiumProduct = products.find((product) => {
  return product.price >= 200;
});

console.log('200円以上の最初の商品：', premiumProduct);
// { name: '高級ノート', price: 300 }

const products = [
  { name: 'ノート', price: 100 },
  { name: 'ペン', price: 150 },
  { name: '高級ノート', price: 300 },
];

const premiumProduct = products.find((product) => {
  return product.price >= 200;
});

console.log('200円以上の最初の商品：', premiumProduct);
// { name: '高級ノート', price: 300 }

重要ポイント：

• find() は「1件だけ欲しい」場面で使います。
• 「全部欲しい」なら filter()、「1件だけでいい」なら find() と覚えると整理しやすいです。

実践：商品検索と条件によるデータ抽出

ここからは、map() / filter() / find() を組み合わせて、 商品検索と条件によるデータ抽出をステップバイステップで見ていきます。

商品データの例

const products = [
  { id: 1, name: 'ノート', price: 100 },
  { id: 2, name: 'ペン', price: 150 },
  { id: 3, name: '消しゴム', price: 80 },
  { id: 4, name: '定規', price: 120 },
  { id: 5, name: 'シャープペンシル', price: 200 },
];

const products = [
  { id: 1, name: 'ノート', price: 100 },
  { id: 2, name: 'ペン', price: 150 },
  { id: 3, name: '消しゴム', price: 80 },
  { id: 4, name: '定規', price: 120 },
  { id: 5, name: 'シャープペンシル', price: 200 },
];

1. map() で「表示用ラベル」を作る

const productLabels = products.map((product) => {
  return `${product.name}（${product.price}円）`;
});

console.log('表示用ラベル一覧：', productLabels);

const productLabels = products.map((product) => {
  return `${product.name}（${product.price}円）`;
});

console.log('表示用ラベル一覧：', productLabels);

• 商品オブジェクトから「表示用の文字列」を作っています。
• 画面に出すときに、そのまま使える形に変換するイメージです。

2. filter() で「100円以上の商品だけ」を抽出する

const over100Products = products.filter((product) => {
  return product.price >= 100;
});

console.log('100円以上の商品一覧：', over100Products);

const over100Products = products.filter((product) => {
  return product.price >= 100;
});

console.log('100円以上の商品一覧：', over100Products);

• 条件に合う商品だけを抽出しています。
• 「条件によるデータ抽出」の典型的なパターンです。

3. find() で「idが3の商品」を検索する

const productId3 = products.find((product) => {
  return product.id === 3;
});

console.log('idが3の商品：', productId3);

const productId3 = products.find((product) => {
  return product.id === 3;
});

console.log('idが3の商品：', productId3);

• id === 3 の商品を1件だけ探しています。
• 見つからなければ undefined になるので、 実際のアプリでは「見つからなかった場合」の処理も書くことが多いです。

Day 18 前半 練習テンプレート（ブラウザで実行可能）

以下のテンプレートをブラウザで開き、 コンソールを見ながら map() / filter() / find() の動きを確認してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 18 前半：配列メソッド① 練習テンプレート</title>
</head>
<body>
  <h1>Day 18 前半：配列メソッド①（map / filter / find）</h1>
  <p>ブラウザのコンソールを開いて、商品データの変換・抽出・検索の結果を確認してください。</p>

  <script>
    console.log('--- 商品データを用意 ---');

    const products = [
      { id: 1, name: 'ノート', price: 100 },
      { id: 2, name: 'ペン', price: 150 },
      { id: 3, name: '消しゴム', price: 80 },
      { id: 4, name: '定規', price: 120 },
      { id: 5, name: 'シャープペンシル', price: 200 },
    ];

    console.log('元の商品一覧：', products);

    console.log('--- map()：表示用ラベルを作成 ---');

    const productLabels = products.map((product) => {
      // 商品オブジェクトから表示用の文字列を作ります
      return `${product.name}（${product.price}円）`;
    });

    console.log('表示用ラベル一覧：', productLabels);

    console.log('--- filter()：100円以上の商品を抽出 ---');

    const over100Products = products.filter((product) => {
      // 価格が100以上の商品だけを残します
      return product.price >= 100;
    });

    console.log('100円以上の商品一覧：', over100Products);

    console.log('--- find()：idが3の商品を検索 ---');

    const productId3 = products.find((product) => {
      // idが3の商品を1件だけ探します
      return product.id === 3;
    });

    console.log('idが3の商品：', productId3);

    console.log('--- Day 18 前半：配列メソッド①の練習が完了しました ---');
  </script>
</body>
</html>

Day 18 前半のまとめ

Day 18前半では、配列をより賢く扱うための3つのメソッド

• map()：配列を「変換」して新しい配列を作る
• filter()：条件に合う要素だけを「絞り込む」
• find()：条件に合う「最初の1件だけ」を見つける

を、商品検索と条件によるデータ抽出を通して学びました。

ここで意識してほしいのは、

• 3つとも「元の配列を壊さず、新しい結果を返す」こと
• 「全部変換したい」なら map()
• 「条件に合うものだけ欲しい」なら filter()
• 「1件だけ欲しい」なら find()

という使い分けのイメージです。

この3つに慣れておくと、 今後の「検索機能」「絞り込み機能」「表示用データの整形」など、 実際のWebアプリでよく使う処理が、ぐっと書きやすく・読みやすくなっていきます。

Day 18：配列メソッド①（後半）

「検索」と「絞り込み」をコードで自然に書けるようになる

Day 18後半では、前半で学んだ

• map()
• filter()
• find()

を、商品検索 と 条件によるデータ抽出 にしっかり結びつけていきます。 ここからは「ただ動くコード」ではなく、 意図が読みやすいコードを書く視点 を意識して進めていきます。

商品データを用意して「現実っぽい」前提を作る

商品データの配列（オブジェクトの配列）

まず、次のような商品データを前提にします。

const products = [
  { id: 1, name: 'ノート', price: 100, category: '文房具' },
  { id: 2, name: 'ペン', price: 150, category: '文房具' },
  { id: 3, name: '消しゴム', price: 80, category: '文房具' },
  { id: 4, name: '定規', price: 120, category: '文房具' },
  { id: 5, name: 'シャープペンシル', price: 200, category: '文房具' },
  { id: 6, name: 'ノートPC', price: 80000, category: '電子機器' },
];

const products = [
  { id: 1, name: 'ノート', price: 100, category: '文房具' },
  { id: 2, name: 'ペン', price: 150, category: '文房具' },
  { id: 3, name: '消しゴム', price: 80, category: '文房具' },
  { id: 4, name: '定規', price: 120, category: '文房具' },
  { id: 5, name: 'シャープペンシル', price: 200, category: '文房具' },
  { id: 6, name: 'ノートPC', price: 80000, category: '電子機器' },
];

• 1つ1つの商品は「オブジェクト」で表現されています。
• 配列の中に複数の商品オブジェクトが入っている形です。
• id, name, price, category など、現実のアプリに近い情報を持たせています。

この配列に対して、map() / filter() / find() を使って 「検索」「絞り込み」「表示用データの変換」を行っていきます。

map() を実践で深掘りする：表示用データを作る

ステップ1：商品オブジェクトから「表示用ラベル」を作る

画面に商品一覧を表示したいとき、 そのままオブジェクトを出すのではなく、 ユーザー向けの表示用文字列 に変換したほうが扱いやすいです。

const productLabels = products.map((product) => {
  // 1つの商品オブジェクトから、表示用の文字列を作ります
  return `${product.name}（${product.price}円／カテゴリ：${product.category}）`;
});

console.log('表示用ラベル一覧：', productLabels);

const productLabels = products.map((product) => {
  // 1つの商品オブジェクトから、表示用の文字列を作ります
  return `${product.name}（${product.price}円／カテゴリ：${product.category}）`;
});

console.log('表示用ラベル一覧：', productLabels);

• map() の中では「1つの商品をどう変換するか」だけに集中します。
• productLabels は「画面にそのまま出せる形」の配列になります。

ステップ2：HTMLに表示することを意識した変換

const productListItems = products.map((product) => {
  return `<li>${product.name}：${product.price}円（${product.category}）</li>`;
});

console.log('HTML用のli文字列一覧：', productListItems);

const productListItems = products.map((product) => {
  return `<li>${product.name}：${product.price}円（${product.category}）</li>`;
});

console.log('HTML用のli文字列一覧：', productListItems);

• ここでは <li>...</li> の形に変換しています。
• 実際のアプリでは、この文字列を innerHTML にまとめて入れる、という使い方もよくあります。

重要な視点：

• map() は「表示用」「API送信用」「ログ用」など、 目的に合わせてデータの形を変える ときに非常に役立ちます。
• 「元データ」と「表示用データ」を分けて考える癖をつけると、 コードの見通しが良くなります。

filter() を実践で深掘りする：条件によるデータ抽出

ステップ1：価格で絞り込む（例：200円以上の商品）

const over200Products = products.filter((product) => {
  // 価格が200以上なら残す
  return product.price >= 200;
});

console.log('200円以上の商品一覧：', over200Products);

const over200Products = products.filter((product) => {
  // 価格が200以上なら残す
  return product.price >= 200;
});

console.log('200円以上の商品一覧：', over200Products);

• 「条件に合うものだけ欲しい」場面で filter() が活躍します。
• true を返した要素だけが新しい配列に残ります。

ステップ2：カテゴリで絞り込む（例：文房具だけ）

const stationeryProducts = products.filter((product) => {
  // カテゴリが「文房具」の商品だけを残します
  return product.category === '文房具';
});

console.log('文房具カテゴリの商品一覧：', stationeryProducts);

const stationeryProducts = products.filter((product) => {
  // カテゴリが「文房具」の商品だけを残します
  return product.category === '文房具';
});

console.log('文房具カテゴリの商品一覧：', stationeryProducts);

• 「カテゴリ別一覧」「ジャンル別表示」など、 実際のWebサービスでよくある機能に直結します。

ステップ3：複数条件で絞り込む（例：文房具かつ100円以上）

const stationeryOver100 = products.filter((product) => {
  // 文房具で、かつ価格が100以上
  return product.category === '文房具' && product.price >= 100;
});

console.log('文房具かつ100円以上の商品一覧：', stationeryOver100);

const stationeryOver100 = products.filter((product) => {
  // 文房具で、かつ価格が100以上
  return product.category === '文房具' && product.price >= 100;
});

console.log('文房具かつ100円以上の商品一覧：', stationeryOver100);

重要な視点：

• filter() は「検索結果一覧」「条件付きリスト表示」に直結するメソッドです。
• 条件式を工夫することで、かなり柔軟な絞り込みができます。
• 「全部欲しい」なら filter()、「1件だけでいい」なら find() と使い分けます。

find() を実践で深掘りする：1件だけ商品を見つける

ステップ1：idで商品を検索する（例：idが3）

const productId3 = products.find((product) => {
  return product.id === 3;
});

console.log('idが3の商品：', productId3);

const productId3 = products.find((product) => {
  return product.id === 3;
});

console.log('idが3の商品：', productId3);

• find() は「条件に合う最初の1件だけ」を返します。
• 見つからなければ undefined になります。

ステップ2：名前で商品を検索する（例：「ノートPC」）

const notebookPC = products.find((product) => {
  return product.name === 'ノートPC';
});

console.log('ノートPCの商品：', notebookPC);

const notebookPC = products.find((product) => {
  return product.name === 'ノートPC';
});

console.log('ノートPCの商品：', notebookPC);

ステップ3：見つからなかった場合の扱いを考える

const eraserPro = products.find((product) => {
  return product.name === '消しゴムPRO'; // 存在しない名前
});

if (eraserPro === undefined) {
  console.log('消しゴムPROは見つかりませんでした。');
} else {
  console.log('消しゴムPROの商品情報：', eraserPro);
}

const eraserPro = products.find((product) => {
  return product.name === '消しゴムPRO'; // 存在しない名前
});

if (eraserPro === undefined) {
  console.log('消しゴムPROは見つかりませんでした。');
} else {
  console.log('消しゴムPROの商品情報：', eraserPro);
}

重要な視点：

• find() は「詳細画面を開くときの対象商品を探す」といった場面に直結します。
• 「見つからなかったとき」の処理を必ず考える癖をつけると、 エラーに強いコードになります。

実践：商品検索＋条件によるデータ抽出を組み合わせる

ここからは、map() / filter() / find() を組み合わせて、 「検索して、絞り込んで、表示用に変換する」 という流れを作ってみます。

ステップ1：検索キーワードで商品を絞り込む

const keyword = 'ペン'; // ユーザーが入力した検索キーワードだと仮定します

const searchedProducts = products.filter((product) => {
  // 商品名にキーワードが含まれているかどうかを判定します
  return product.name.includes(keyword);
});

console.log(`キーワード「${keyword}」で検索した結果：`, searchedProducts);

const keyword = 'ペン'; // ユーザーが入力した検索キーワードだと仮定します

const searchedProducts = products.filter((product) => {
  // 商品名にキーワードが含まれているかどうかを判定します
  return product.name.includes(keyword);
});

console.log(`キーワード「${keyword}」で検索した結果：`, searchedProducts);

• includes() を使って「部分一致検索」をしています。
• 実際の検索機能の基本的な考え方と同じです。

ステップ2：検索結果を表示用ラベルに変換する

const searchedProductLabels = searchedProducts.map((product) => {
  return `${product.name}（${product.price}円／カテゴリ：${product.category}）`;
});

console.log('検索結果の表示用ラベル：', searchedProductLabels);

const searchedProductLabels = searchedProducts.map((product) => {
  return `${product.name}（${product.price}円／カテゴリ：${product.category}）`;
});

console.log('検索結果の表示用ラベル：', searchedProductLabels);

• filter() で絞り込んだ結果に対して、map() で表示用に変換しています。
• 「検索結果一覧画面」のイメージに近い処理です。

ステップ3：特定の商品を find() で詳細表示用に取得する

const targetId = 2; // 例えば「id=2の商品詳細を見たい」とします

const targetProduct = products.find((product) => {
  return product.id === targetId;
});

if (targetProduct) {
  console.log('詳細表示する商品：', targetProduct);
} else {
  console.log('指定された商品は見つかりませんでした。');
}

const targetId = 2; // 例えば「id=2の商品詳細を見たい」とします

const targetProduct = products.find((product) => {
  return product.id === targetId;
});

if (targetProduct) {
  console.log('詳細表示する商品：', targetProduct);
} else {
  console.log('指定された商品は見つかりませんでした。');
}

• 検索結果一覧から「1件を選んで詳細表示する」イメージです。
• filter() と find() の役割の違いがここでハッキリします。

Day 18 後半 練習テンプレート（ブラウザで実行可能）

以下のテンプレートをブラウザで開き、 コンソールを見ながら「商品検索」と「条件によるデータ抽出」の流れを確認してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 18 後半：配列メソッド① 実践テンプレート</title>
</head>
<body>
  <h1>Day 18 後半：配列メソッド①（map / filter / find）商品検索と条件抽出</h1>
  <p>ブラウザのコンソールを開いて、検索・絞り込み・表示用変換の結果を確認してください。</p>

  <script>
    console.log('--- 商品データを用意 ---');

    const products = [
      { id: 1, name: 'ノート', price: 100, category: '文房具' },
      { id: 2, name: 'ペン', price: 150, category: '文房具' },
      { id: 3, name: '消しゴム', price: 80, category: '文房具' },
      { id: 4, name: '定規', price: 120, category: '文房具' },
      { id: 5, name: 'シャープペンシル', price: 200, category: '文房具' },
      { id: 6, name: 'ノートPC', price: 80000, category: '電子機器' },
    ];

    console.log('元の商品一覧：', products);

    console.log('--- map()：表示用ラベルを作成 ---');

    const productLabels = products.map((product) => {
      return `${product.name}（${product.price}円／カテゴリ：${product.category}）`;
    });

    console.log('表示用ラベル一覧：', productLabels);

    console.log('--- filter()：文房具カテゴリの商品を抽出 ---');

    const stationeryProducts = products.filter((product) => {
      return product.category === '文房具';
    });

    console.log('文房具カテゴリの商品一覧：', stationeryProducts);

    console.log('--- filter()：文房具かつ100円以上の商品を抽出 ---');

    const stationeryOver100 = products.filter((product) => {
      return product.category === '文房具' && product.price >= 100;
    });

    console.log('文房具かつ100円以上の商品一覧：', stationeryOver100);

    console.log('--- find()：idが3の商品を検索 ---');

    const productId3 = products.find((product) => {
      return product.id === 3;
    });

    console.log('idが3の商品：', productId3);

    console.log('--- find()：存在しない商品名を検索 ---');

    const eraserPro = products.find((product) => {
      return product.name === '消しゴムPRO';
    });

    if (eraserPro === undefined) {
      console.log('消しゴムPROは見つかりませんでした。');
    } else {
      console.log('消しゴムPROの商品情報：', eraserPro);
    }

    console.log('--- 検索キーワードで商品を絞り込み（filter + map） ---');

    const keyword = 'ペン';

    const searchedProducts = products.filter((product) => {
      return product.name.includes(keyword);
    });

    const searchedProductLabels = searchedProducts.map((product) => {
      return `${product.name}（${product.price}円／カテゴリ：${product.category}）`;
    });

    console.log(`キーワード「${keyword}」で検索した結果（表示用ラベル）：`, searchedProductLabels);

    console.log('--- Day 18 後半：配列メソッド①の実践が完了しました ---');
  </script>
</body>
</html>

Day 18 後半のまとめ

Day 18後半では、

• map()：表示用データや別形式のデータに「変換」する
• filter()：条件に合うデータだけを「絞り込む」
• find()：条件に合う「1件だけ」を「検索する」

という3つのメソッドを、商品検索と条件によるデータ抽出の文脈で深く扱いました。

意識してほしいポイントは、

• 3つとも「元の配列を壊さず、新しい結果を返す」こと
• 「全部変換したい」→ map()
• 「条件に合うものだけ一覧で欲しい」→ filter()
• 「条件に合う1件だけ欲しい」→ find()

という使い分けの軸です。

この感覚が身につくと、 検索機能・絞り込み機能・一覧表示・詳細表示など、 現実のWebアプリでよく使う処理を、 短く・読みやすく・意図が伝わるコード で書けるようになっていきます。