配列のデータを「自在に加工」する魔法のメソッド！ ✨

前回の記事で、for文やforEachを使って配列のデータを一つずつ処理する方法を学びましたね。しかし、現代のJavaScriptでは、配列のデータを加工したり、特定の条件で絞り込んだりする際に、もっと簡単で強力な「配列メソッド」を使うのが主流です。

これらのメソッドは、複雑なループ処理をたった一行で済ませてしまう「魔法の道具」のようなものです。今回は、特にWeb開発で頻繁に使う3つの強力な配列メソッド、map、filter、findについて徹底解説します。

1. map()：配列の「形」を変換する 🔄
1. map()の構造と例
2. filter()：条件に合う要素を「絞り込む」 🔍
1. filter()の構造と例
3. find()：最初に見つかった要素を「見つける」 👀
1. find()の構造と例
まとめ：map, filter, findを使いこなす！

1. map()：配列の「形」を変換する 🔄

map()メソッドは、配列のすべての要素に対して同じ処理を行い、新しい配列を作成して返すメソッドです。元の配列は変更されません。

イメージとしては、「工場で製品（元のデータ）を受け取り、すべて同じ加工（処理）を施して、新しい製品リスト（新しい配列）を作る」ようなものです。

map()の構造と例

以下の例では、商品の価格配列を、すべて税込み価格に変換しています。

JavaScript

const prices = [100, 250, 500];
const TAX_RATE = 1.10;

// map()を使って、各価格に税率をかけて新しい配列を作成
const taxedPrices = prices.map(price => {
  return Math.floor(price * TAX_RATE); // 小数点以下を切り捨て
});

console.log(taxedPrices); // 結果: [110, 275, 550]
console.log(prices);      // 元の配列は変更されない: [100, 250, 500]

mapに渡すアロー関数は、必ず戻り値（return）を返す必要があります。その戻り値が、新しい配列の要素となります。

2. filter()：条件に合う要素を「絞り込む」 🔍

filter()メソッドは、配列の中から特定の条件を満たす要素だけを取り出し、新しい配列として返すメソッドです。

イメージとしては、「リストの中から、基準（条件）に適合するデータだけを選別する」ようなものです。

filter()の構造と例

以下の例では、18歳以上のユーザーだけを絞り込んでいます。

JavaScript

const users = [
  { name: "A", age: 15 },
  { name: "B", age: 22 },
  { name: "C", age: 30 }
];

// ageが18以上のユーザーだけを抽出
const adults = users.filter(user => {
  return user.age >= 18; // 条件がtrueの要素だけが残る
});

console.log(adults);
/*
結果: [
  { name: "B", age: 22 },
  { name: "C", age: 30 }
]
*/

filterに渡すアロー関数は、**真偽値（trueまたはfalse）**を返します。trueを返した要素だけが、新しい配列に残されます。

3. find()：最初に見つかった要素を「見つける」 👀

find()メソッドは、配列の中から特定の条件を満たす最初の要素を一つだけ見つけて返すメソッドです。

filter()が条件に合うすべての要素を返すのに対し、find()は最初に見つかった要素だけを返します。

find()の構造と例

以下の例では、IDが「2」のユーザーを一つだけ探しています。

JavaScript

const posts = [
  { id: 1, title: "記事A" },
  { id: 2, title: "記事B" }, // これが見つかる
  { id: 3, title: "記事C" },
  { id: 2, title: "記事D" } // 2つ目のID:2は無視される
];

// IDが2の最初の記事を探す
const targetPost = posts.find(post => {
  return post.id === 2;
});

console.log(targetPost); // 結果: { id: 2, title: "記事B" }

条件に合う要素が見つからなかった場合、find()はundefinedを返します。