【JavaScript入門】filterで配列のデータを抽出する方法

こんにちは、ライターのマサトです！今回は、配列を操作するメソッド「filter」について学習していきます！「

filter」を使いこなせば、配列データの中から条件に一致した要素だけを簡単に抽出できるようになるので、非常に活用範囲が広いメソッドと言えます。

ただし、使い方にちょっとしたコツが必要で、場合によっては想定していない動作をする場合もあるので注意が必要です。そこでこの記事では、

などの基本的な使い方や注意するべきポイントを整理してまとめ、配列データを自在に抽出するコツを順番に解説していきますので、ぜひ参考にしてみてください！

そもそも「配列」とは？

まずはそもそも「配列」とは何かについてきちんと理解しておきたい方は以下の記事を参考にしてください。

「配列」の基本知識をきちんと身につけた上で今回の「filter」の解説を読み進めるとより理解度がアップしますので、「配列」の知識に不安のある方はぜひ確認しておいて下さい。

「filter」とは

それでは、まず「filter」メソッドの基本的な構文から見ていきましょう！

var items = 配列データ;

items.filter( コールバック関数 )

「filter」の中で、特定の条件を与えて配列データを取得したい内容を「コールバック関数」に書くことで、任意のデータを抽出して新しい配列を生成します。

例えば、数値データなら「○○以下の数値だけ」を抽出したり、文字データなら「○○と同じ文字列だけ」を抽出するような使い方が出来ますね！

filterで配列のデータを抽出してみよう！

実際に、「filter」を使った事例を見てみましょう！次のサンプルでは、数値データが格納された配列に「filter」を使っています。

var items = [5,2,7,8,3,1,6,8,4];

var result = items.filter( function( value ) {

    //5よりも小さい数値だけを抽出
    return value < 5;

})

console.log( result );

出力結果は…

[2, 3, 1, 4]

となります。このサンプルでは、コールバック関数に「5より小さい数値を返す」という条件を指定しているのが分かります。

これにより、さまざまな数値が格納されている配列の中から5より小さい数値だけを新しい配列データとして出力することが出来るわけです。文字列の場合も同じで、次のサンプルは任意の文字列を抽出しています。

var items = ['user123', 'user234', 'user345', 'user456'];

var result = items.filter( function( value ) {

    //文字列「user234」を抽出する
    return value === 'user234';

})

console.log( result );

出力結果は…

["user234"]

となります。このサンプルでは、配列データの中から「user234」というユーザー名を抽出して、新しい配列に格納します。もし、見つからなければ、空の配列だけが返ることになります。

「filter」のコールバック関数について

「filter」で使う「コールバック関数」は、3つの引数を受け取ることができるので、ここで詳しく見ていきましょう！

var items = 配列データ;

//3つの引数を受け取ることが可能
items.filter( function( value, index, array ) {

})

利用できる引数は、次のとおりです！

これらの引数を有効活用することで、JavaScriptのプログラミングがさらに便利なものになります。

配列の重複を操作してみよう！

それでは、コールバック関数の引数を活用した事例を見てみましょう！例えば、配列データの中に重複した同じデータが存在した時に、この重複データを排除するプログラムを作ってみます。まずは、次のプログラムを見てください！

//重複データが含まれる配列データ
var items = [3,2,2,4,8,8,8,6,9];

var result = items.filter(function(value, index, array) {

    //配列のインデックス番号を使って重複部分を検出する
    console.log( array.indexOf( value ) + ' : ' + index );

})

出力結果は…

0 : 0
1 : 1
1 : 2
3 : 3
4 : 4
4 : 5
4 : 6
7 : 7
8 : 8

となります。のサンプルでは、コールバック関数の引数「array」「value」と「indexOf」を使い、現在処理している配列に格納されている数値のインデックス番号を取得しています。

そして、同じくコールバック関数の引数「index」と比較することで、重複したデータだけがインデックス番号と同じではないのが分かりますね！「indexOf」の基本的な使い方や、配列の検索方法は次の記事で詳しく解説しているので参考にしてみてください！

このような特性を活用すれば、次のサンプルのように重複データのみを排除することは簡単です！

var items = [3,2,2,4,8,8,8,6,9];

var result = items.filter( function( value, index, array ) {

    //インデックス番号を比較して重複データのみ排除
    return array.indexOf( value ) === index;

})

console.log( result );

出力結果は…

[3, 2, 4, 8, 6, 9]

となります。先ほどのサンプルで試した比較を行い、「true」だった数値だけを返しているわけです。つまり、インデックス番号と同じ数値のインデックスだけを返すことで、重複データのみ排除した新しい配列が生成されるというわけですね。

第2引数のオブジェクトについて

これまで、「filter」のコールバック関数を使って操作してきましたが、実は第2引数に任意のオブジェクトを指定することも出来ます！

var items = 配列データ;

//第2引数にオブジェクトを指定
items.filter( コールバック関数, オブジェクト )

このように、任意のオブジェクトを指定すると、コールバック関数内の「this」がオブジェクトを参照するようになるのです。そのため、配列以外からのデータも一緒に組み込んで処理したいようなケースで、とても便利に使えるでしょう。

例えば、次のような配列とオブジェクトがあったとします。

//果物リストのオブジェクト
var fruits = {

    'アップル': 400,
    'パイナップル': 200,
    'メロン': 600,
    'スイカ': 300,
    'ナシ': 350,
    'イチゴ': 400

};

//食品リストの配列
var items = ['オムライス', 'イチゴ', 'ケーキ', 'タルト', 'スイカ'];

この配列「items」にあるリストと、オブジェクト「fruits」を照らし合わせて、両方に存在する品名だけを抽出してみましょう！次のサンプルを見てください！

var result = items.filter( function( value, index ) {
 
  //オブジェクト内を繰り返す
  for( var item in this ) {

    //オブジェクトと配列の品名を比較する
    if( item === value ) return value;

  }

}, fruits) // 第2引数にオブジェクトを指定

console.log( result );

出力結果は…

["イチゴ", "スイカ"]

となります。このサンプルでは、「for – in文」を使ってオブジェクトの品名（プロパティ名）を取得し、配列の値と比較して同じモノだけを抽出しているのが分かります。

最終的に、両方の品名で同じモノとして「イチゴ、スイカ」が抽出されていますね！

まとめ

今回は、配列を操作するメソッド「filter」を学習しました！ポイントだけをもう一度おさらいしておきましょう！

これらの内容を踏まえて、ぜひ自分だけの抽出条件を作って試してみてください。きっと、さらなる理解が深まるはずですよ！