TL;DR
このページでは、filter メソッドの実装方法について解説しますね。一言でいうとfilter メソッドとは、配列の中から特定の条件を満たす要素だけを抽出し、新たな配列を作成するメソッドです。
| 開発環境 | バージョン |
|---|---|
| Next.js | 13.4.4 |
| TypeScript | 5.0.4 |
| Emotion | 11.11.0 |
| React | 18.2.0 |
「filter() メソッド」とは？
「filter() メソッド」は JavaScript の配列に用意されているメソッドの一つで、配列の要素のうち、ある条件を満たすものだけを取り出して新しい配列を生成します。そのため、配列の中から特定の条件に一致する要素を抽出したいときに活用できます。
それでは具体的な使用例を見てみましょう。
const numbers = [1, 2, 3, 4, 5]
const evenNumbers = numbers.filter((number) => {
return number % 2 === 0
})
console.log(evenNumbers) // [2, 4]
上記のコードでは、filterメソッドを使って偶数だけを抽出しています。filterメソッドに渡す関数（この場合は(number) => { return number % 2 === 0; }）は各要素に対して呼び出され、その結果がtrueと評価される要素だけが新しい配列に含まれます。
特定の文字を含む要素を抽出する
次に、文字列の配列から特定の文字を含む要素を抽出する例を示します。
const fruits = ['apple', 'banana', 'grape', 'orange', 'watermelon']
const aFruits = fruits.filter((fruit) => fruit.includes('a'))
console.log(aFruits) // ["apple", "banana", "grape", "watermelon"]
このコードでは、fruitsという文字列の配列から、文字列が'a'を含むものだけを抽出して新たな配列aFruitsを作成しています。filterメソッドを使うことで、このように特定の文字列を含む要素を抽出することができます。
また、次のように、オブジェクトの配列から特定のキーと値を持つ要素を抽出することも可能です。
type User = {
id: number
name: string
isActive: boolean
}
const users: User[] = [
{ id: 1, name: 'John', isActive: true },
{ id: 2, name: 'Jane', isActive: false },
{ id: 3, name: 'Bob', isActive: true },
{ id: 4, name: 'Alice', isActive: false },
]
const activeUsers = users.filter((user) => user.isActive)
console.log(activeUsers) // [{ id: 1, name: 'John', isActive: true }, { id: 3, name: 'Bob', isActive: true }]
このコードでは、usersというユーザ情報が格納された配列から、isActiveのプロパティがtrueのユーザだけを抽出して新たな配列activeUsersを作成しています。filterメソッドを使うことで、オブジェクトの特定のプロパティに基づいて要素を抽出することができます。
filterメソッドは非常に強力なツールであり、多種多様な場面での活用が可能です。上記の例を参考に、自分の必要に応じて適切に使用してみてください。
Next.js で、filter メソッドを実装
それでは、Next.js と TypeScript を使って、filter メソッドを使う具体的なコードを見ていきましょう。
ファイル名: components/EvenNumbers.tsx
import { useEffect, useState } from 'react'
type NumberArray = number[]
const EvenNumbers = () => {
const [numbers, setNumbers] = useState<NumberArray>([1, 2, 3, 4, 5])
const [evenNumbers, setEvenNumbers] = useState<NumberArray>([])
useEffect(() => {
setEvenNumbers(numbers.filter((number) => number % 2 === 0))
}, [numbers])
return (
<div>
{evenNumbers.map((number) => (
<div key={number}>{number}</div>
))}
</div>
)
}
export default EvenNumbers
useStateを使って配列numbersを定義し、初期値として[1, 2, 3, 4, 5]を設定しています。そして、抽出した偶数を保持するためのevenNumbersも同様に定義しています。
次に、useEffectフックを使って、numbersの値が変化したときにfilterメソッドを実行し、結果をevenNumbersに設定します。
最後に、evenNumbersの各要素をdiv要素としてレンダリングしています。
filter メソッドを活用
filterメソッドを使うと、より複雑な条件で要素を抽出することも可能です。以下に、オブジェクトの配列から特定のプロパティを持つ要素を抽出する例を示します。
type Student = {
id: number
name: string
score: number
}
const students: Student[] = [
{ id: 1, name: 'Alice', score: 90 },
{ id: 2, name: 'Bob', score: 70 },
{ id: 3, name: 'Charlie', score: 85 },
{ id: 4, name: 'Dave', score: 60 },
]
const highScoreStudents = students.filter((student) => student.score >= 80)
上記のコードでは、studentsという学生の情報が格納された配列から、スコアが 80 点以上の学生だけを抽出して新たな配列highScoreStudentsを作成しています。filterメソッドを使うことで、このように複雑な条件に一致する要素を効率的に抽出することができます。
以上がfilterメソッドの基本的な使い方と Next.js と TypeScript 環境での実装例になります。特定の条件に一致する要素だけを効率よく抽出するために、ぜひ活用してみてください。