すでにメンバーの場合は

無料会員登録

GitHubアカウントで登録 Pikawakaが許可なくTwitterやFacebookに投稿することはありません。

登録がまだの方はこちらから

Pikawakaにログイン

GitHubアカウントでログイン Pikawakaが許可なくTwitterやFacebookに投稿することはありません。

JavaScript

【JavaScript】 filterメソッドについて徹底解説!

ぴっかちゃん
ぴっかちゃん

filterメソッドは、配列の各要素に対して条件を適用し、条件を満たす要素のみを含む新しい配列を作成するメソッドです。

filterメソッドの基本構文
1
2
3
配列.filter(function(配列内の各要素) {
  特定の条件
});

filterメソッドの基礎情報

この章では、filterメソッドの基礎情報について解説します。

filterメソッドの基本的な使い方

filterメソッドは配列に対して使用するメソッドで、配列内の要素をフィルタリングするときに使われます。このメソッドを使うことで、条件に合致する要素だけを取り出すことができます。

以下が基本的な書き方です。

filterメソッドの基本構文
1
配列.filter(コールバック関数);

わかりやすく書くと以下のようになります。

filterメソッドの基本構文
1
2
3
配列.filter(function(配列内の各要素) {
  特定の条件
});

もしくは以下のようにも書くことができます。

filterメソッドの基本構文
1
配列.filter(配列内の各要素 => 特定の条件); 

これだけではわかりにくいので、基本的な例を見てみましょう。

使い方の例
1
2
3
4
const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(number => number % 2 === 0);

console.log(evenNumbers); // [2, 4, 6]

このようにfilterは配列の各要素に対して特定の処理を実行し、その結果が真となる要素のみを含む新しい配列を生成します。この例では、数値の配列から2で割った時のあまりが0、つまり偶数のみを抽出するためfilterメソッドを使っています。

また、以下のような使い方もできます。

応用的な使い方
1
2
3
4
5
6
7
8
9
const people = [
  { name: '田中', age: 25 },
  { name: '佐藤', age: 30 },
  { name: '山本', age: 35 }
];

const youngPeople = people.filter(person => person.age < 30);

console.log(youngPeople); // [{ name: '田中', age: 25 }]

この例では、特定の条件に基づいてオブジェクトの配列をフィルタリングしています。

filterメソッドの応用的な使い方

この章では、filterメソッドの応用的な使い方について解説します。

オプションで使えるコールバック関数の引数

コールバック関数の引数には、オプションとして2つの引数を使うことができます。

応用的な使い方
1
2
3
配列.filter(function(各要素, インデックス, 使用した配列) {
  特定の条件
});

使わない場合は省略します。
以下の例ではオプションとしてインデックスを引数として渡しています。

index
1
2
3
4
const numbers = [10, 20, 30, 40, 50];
const filteredNumbers = numbers.filter((number, index) => index % 2 === 0);

console.log(filteredNumbers); // [10, 30, 50]

この例ではインデックスが偶数の要素のみを抽出しています。

filterメソッドでは、第3引数にfilterを使用している配列、つまり元の配列が代入されます。以下のようにして、配列の中から重複している値を排除するといったようなことができます。

array
1
2
3
4
5
6
7
8
const fruits = ['りんご', 'バナナ', 'りんご', 'オレンジ', 'バナナ', 'ブドウ'];

// 重複を取り除いた新しい配列を作成
const uniqueFruits = fruits.filter((fruit, index, array) => {
  return array.indexOf(fruit) === index;
});

console.log(uniqueFruits); // ['りんご', 'バナナ', 'オレンジ', 'ブドウ']

このコードではindexOfメソッドを使って各要素が元の配列(fruits)内で最初に出現するインデックスを返し、そのインデックスが現在のインデックスと一致する場合にのみその要素を新しい配列に追加しています。
今回の例では下の表のようになり、判定結果がtrueのもののみ、新たな配列に追加されます。

fruit index array.indexOf(fruit) 判定結果
りんご 0 0 true
バナナ 1 1 true
りんご 2 0 false
オレンジ 3 3 true
バナナ 4 1 false
ブドウ 5 5 true

このようにfilterメソッドのarray引数を活用することで、配列内の重複を簡単に取り除くことができます。この方法を使用すると、元の配列の順序を保持しながら、一意の要素のみを含む新しい配列を作成することができます。重複を除去する以外にも、array引数を使って様々な条件に基づくフィルタリングができます。

filterの第2引数

filterメソッドの第2引数として別のオブジェクトを指定することで、コールバック関数内でのthisの参照先を変更することができます。

第2引数を使用
1
2
3
4
5
6
7
8
9
10
const threshold = {
  value: 30
};

const numbers = [10, 20, 30, 40, 50];
const filteredNumbers = numbers.filter(function(number) {
  return number > this.value;
}, threshold); // thresholdがthisに置き換わる(filterメソッドの第二引数に渡しているため)

console.log(filteredNumbers); // [40, 50]

この例では、特定のしきい値(threshold)を基準にして配列の要素をフィルタリングし、しきい値より大きい値のみを含む新しい配列を作成しています。コールバック関数の中でthis.valueを使用して、しきい値の値を取得しています。この場合のthisはコールバック関数の第2引数で渡したthresholdのことを指します。そのためthis.value30になります。ですのでnumbersという配列の中から30より大きい要素のみをフィルタリングし、新たな配列を作成します。

このようにthisを使うことで、より柔軟なプログラミングが可能となります。thisについて詳しく知りたい方はこちらの記事を参考にしてみてください。

使う際の注意点

この章ではfilterメソッドを使う際の注意点を紹介します。

元の配列は変更されない

filterメソッドは新しい配列を作成するため、元の配列には影響を与えません。ですので、新たな変数を作成し、代入するのを忘れないようにしましょう。

元の配列を変更したい場合は、引数のオプションを渡すと覚えておきましょう。

元の配列を変更する例
1
2
3
4
5
6
7
8
9
10
11
let fruits = ['りんご', 'バナナ', 'りんご', 'オレンジ', 'バナナ', 'ブドウ'];

// filter メソッドを使用して元の配列を直接変更
fruits.filter((fruit, index, array) => {
  if (array.indexOf(fruit) !== index) {
    array.splice(index, 1);
  }
  return array.indexOf(fruit) === index;
});

console.log(fruits); // ['りんご', 'バナナ', 'オレンジ', 'ブドウ']

コールバック関数の条件

filterメソッドは、配列の各要素に対して指定されたコールバック関数を実行し、その結果がtrueとなる要素だけを新しい配列に含めます。コールバック関数内で適切な条件を設定しないと、期待通りの結果が得られないので注意しましょう。

メモリ消費が大きい

filterメソッドは新しい配列を生成して返すため、元の配列と新しい配列の両方がメモリ上に存在します。そのため、大きな配列に対して使用するとメモリ消費量が増える可能性があるので注意が必要です。

結果が空配列になる可能性

全ての要素が条件を満たさない場合、filterメソッドは空の配列を返します。そのため、これを考慮してコードを書く必要があるので注意しましょう。

この記事のまとめ

  • filterメソッドは配列に対して使い、条件を満たす要素のみを含む新しい配列を作成するメソッド
  • 元の配列には影響を与えない
  • データのフィルタリングや重複の除去など幅広い用途で使える