filter()

フィルターメソッド

filter()を分かりやすく

filter() はJavaScriptの配列メソッドで、配列の各要素に対してテスト関数を実行し、その結果が true となる要素からなる新しい配列を生成します。配列の要素の部分集合となる配列を返すんですね。これは元の配列を変更せず、新しい配列を返す純粋な関数です。

TypeScriptとNext.jsの環境での filter() メソッドの基本的な使用例を示します。

type User = {
  id: number
  name: string
  age: number
}

const users: User[] = [
  { id: 1, name: 'Alice', age: 20 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Charlie', age: 40 },
]

const adults = users.filter(user => user.age >= 30)

この例では、users配列の各要素（user）がテスト関数 user => user.age >= 30 を通過するかどうかを評価し、30歳以上のユーザーだけを新しい配列 adults に格納します。

filter()を使うメリット

不変性: filter()メソッドは元の配列を変更しません。これは関数型プログラミングの原則に従っており、副作用を避けることができます。

可読性: filter()メソッドはその意図を明確に表現しています。コードを読む人にとって、何が行われているのかをすぐに理解することができます。

柔軟性: filter()メソッドは任意のテスト関数を受け入れるため、複雑な条件でのフィルタリングも可能です。

filter()を実装

前述の基本的な使用例に加え、Next.jsとTypeScriptを使った具体的なコンポーネント実装例を見てみましょう。次の例では、年齢によってユーザーリストをフィルタリングする機能を持つコンポーネントを作成します。

import { useState } from 'react'

type User = {
  id: number
  name: string
  age: number
}

const allUsers: User[] = [
  { id: 1, name: 'Alice', age: 20 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Charlie', age: 40 },
]

const UserList = () => {
  const [users, setUsers] = useState(allUsers)

  const handleFilter = () => {
    setUsers(prevUsers => prevUsers.filter(user => user.age >= 30))
  }

  return (
    <div>
      <button onClick={handleFilter}>Filter by age >= 30</button>
      {users.map(user => (
        <div key={user.id}>
          {user.name} ({user.age} years old)
        </div>
      ))}
    </div>
  )
}

export default UserList

この UserList コンポーネントでは、useState フックを使用してユーザーリストの状態を管理しています。ボタンがクリックされると handleFilter 関数が呼び出され、filter() メソッドを使用して30歳以上のユーザーだけを含む新しい配列に状態が更新されます。これにより、UIは自動的に新しいフィルタリングされたユーザーリストに更新されます。

補足

useState フックによる状態の更新では、新しい状態が既存の状態に基づいている場合（この例では prevUsers.filter()）、関数形式の更新を使用することが推奨されます。これにより、更新が予想外の状態に基づかないことを保証できます。
filter() メソッドは新しい配列を返すため、Reactは状態が更新されたことを検出し、UIを再レンダリングします。

以上のように、filter() メソッドは配列を効果的にフィルタリングするための強力なツールです。また、その純粋性と直感的な使用法により、コードの可読性と予測可能性を向上させます。これらの特性は、Reactのフックと相性が良く、Next.jsとTypeScriptの環境では特に有用です。

Next.js を学ぶ一覧へ