LVLPATH

日本最強無料プログラミングスクール

PATHSERVICEHANDS ONMANZI
JavaScript関数型処理: filter

関数型処理: filter

✅ filterとは

JavaScript の filter() メソッドは、配列の中から条件に合う要素だけを抽出して、新しい配列を作るためのメソッドです。

条件に合わないものが除外されるとも言えます。

実務シーンではよく使います。

✅ 基本構文

const newArray = oldArray.filter((value, index) => {
  // 条件をreturn
});
  • value: 現在の要素
  • index: 現在のインデックス(使わない場合は省略可)
  • return された値が true ならその要素が新しい配列に含まれ、false なら含まれません。

✅ filterの特徴

  • 条件を満たす要素だけを抽出した新しい配列が返ってくる
  • 元の配列は変更されない(イミュータブル)
  • 配列内のすべての要素をチェックする
    • 特定の要素をただ判定したいだけの場合はsomeのほうが計算回数が少ないケースもあります

✅ 練習

コピペせずに実際に書いて練習してみましょう。

数字が10以上の要素を抽出

const numbers = [3, 7, 9, 12, 15];
const largeNumbers = numbers.filter(num => num >= 10);
console.log(largeNumbers);
// [12, 15]

偶数だけを抽出

const nums = [1, 2, 3, 4, 5];
const evenNumbers = nums.filter(n => n % 2 === 0);
console.log(evenNumbers);
// [2, 4]

ログインしているユーザーだけを抽出

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

const loggedInUsers = users.filter(user => user.isLoggedIn);
console.log(loggedInUsers);
// [{ name: "Hanako", isLoggedIn: true }, { name: "Jiro", isLoggedIn: true }]

特定の単語を含むメッセージを抽出

const messages = ["こんにちは", "バグあり", "OKです", "エラー発生"];
const bugMessages = messages.filter(msg => msg.includes("バグ"));
console.log(bugMessages);
// ["バグあり"]

✅ まとめ(filter)

  • filter() は、条件に合う要素だけを抽出して、新しい配列を作るメソッド
  • 元の配列を変更することはない
  • 条件を満たす要素のみを新しい配列に入れるため、使いやすい
お問い合わせ