【JavaScript入門】filterで条件に合致する値を配列から抽出する

JavaScriptで配列を扱う際に、必要な要素のみを取り出したいケースが時にはあるかと思います。

配列の各要素に対して処理を行いたい時に思い浮かぶのが、for文や forEachメソッドなどの反復処理ですが、配列型には他にも、要素の検索に役立つ様々なメソッドが用意されています。

今回はその中から、条件に一致する要素を取り出したい場合に役立つ 「filter」 メソッドについて紹介したいと思います。
メソッドの基本的な使い方から応用的な内容についてまで、詳しく解説していきたいと思いますので、ぜひ参考にしてみてくださいね。

JavaScriptのfilterメソッドとは？

filterメソッドは、配列内から特定の要素のみを抜き出したい場合に活用できるメソッドです。
検索対象とする条件を柔軟に指定することが可能であり、条件に一致する要素がある場合に、対象の要素のみを格納した新たな配列をメソッドの結果として取得することができます。

例えば、以下のような配列があるとします。

【サンプルコード】

const sampleArray = [1, 5, 12, 3, 7, 15, 9];

この中から、「10より大きい数値を持つ要素のみ」など特定の条件を満たす要素だけを取り出したい場合にfilterメソッドを使うと、簡単に処理を実現することができます。

filterメソッドの使い方

さっそく、filterメソッドの詳しい使い方について見ていきましょう。

基本構文

まずは、基本構文から解説していきます。
filterメソッドを使用する際は、以下のような構文で記述します。

【基本構文】

対象配列.filter(コールバック関数)

引数に渡したコールバック関数の中で、配列内の要素を順に取り出し処理を行います。
関数の戻り値には真偽値を指定する必要があり、trueの場合には処理対象としていた要素がメソッドの結果に含まれます。

そのため、以下のように return文で条件式を記述するのが一般的です。

【サンプルコード】

const result = sampleArray.filter(function(val) {
    return val > 2
});

アロー関数式を使用すると、より簡潔にコードを記述することができます。

【サンプルコード】

const result = sampleArray.filter(val => val > 2);

filterで配列の値を抽出する

以下のサンプルコードを元に、メソッドの実際の動きを見てみましょう。

【サンプルコード】

const sampleArray = [2, 5, 7, 8, 11, 12, 15];

const result = sampleArray.filter(function(val) {
    return val % 2 === 0
});

console.log(result);

【実行結果】

[ 2, 8, 12 ]

対象の配列の中から、偶数のみを抜き出すサンプルです。
実行結果を見ると、条件に一致する要素のみが配列に格納されているのが分かりますね。

結果として、コールバック関数の戻り値で真偽値が返されれば問題はないため、真偽値を返すメソッドを代わりに使用することも可能です。

【サンプルコード】

const sampleArray = ['user100', 'user120', 'user210', 'user230', 'user320'];

const result = sampleArray.filter(function(val) {
    return val.includes('user2');
});

console.log(result);

【実行結果】

[ 'user210', 'user230' ]

上記のサンプルの場合は、文字列型の既存メソッドである includesメソッドを使用して、値の比較を行っています。
includesメソッドは、指定の値が文字列内に含まれているかに応じて真偽値を返すため、結果をそのままコールバック関数の戻り値として使用することが可能です。

このように、条件を満たす要素のみを含んだ配列を取得したい場合に活用できるのが、filterメソッドです。

filterメソッドのコールバック関数

先ほどのサンプルコードでは、配列の要素のみをコールバック関数の引数として指定していましたが、厳密には以下の3つの引数を指定することができます。

• 第1引数 … 処理中の要素
• 第2引数 … インデックス
• 第3引数 … 処理中の配列

必要に応じて、処理中の要素の値だけでなく、インデックスや配列自身も引数で取得することが可能です。

【サンプルコード】

const sampleArray = [1, 2, 3, 4, 5];

const result = sampleArray.filter((num, index, array) => {
    console.log(`要素の値:${num}, インデックス:${index}, 対象配列:[${array}]`)
    return num > 2; 
});

【実行結果】

要素の値:1, インデックス:0, 対象配列:[1,2,3,4,5]
要素の値:2, インデックス:1, 対象配列:[1,2,3,4,5]
要素の値:3, インデックス:2, 対象配列:[1,2,3,4,5]
要素の値:4, インデックス:3, 対象配列:[1,2,3,4,5]
要素の値:5, インデックス:4, 対象配列:[1,2,3,4,5]

結果を見ると、それぞれのループごとに応じた要素の値やインデックスが取得できているのが分かりますね。

filterメソッドは非破壊的メソッドのため、基本的に元の配列の中身を変更することなく、必要な要素だけを抜き出すことができますが、場合によってはこのように、引数を活用して直接配列を操作することも可能となっています。

第2引数にオブジェクトを入れる

findメソッド自身も、第２引数に任意でオブジェクトを指定することができます。

第２引数に指定したオブジェクトは、コールバック関数内で 「this」 キーワードを使用することで、対象のオブジェクトとして参照することができるようになります。
これにより、異なる配列同士の値を比較したり、クラスのメンバー関数を呼び出したりといったような、より柔軟な処理が可能となります。

以下のサンプルで、実際の動きを見てみましょう。

【サンプルコード】

const foodList = ['うどん', 'みかん', '卵', '豆腐', 'りんご', '牛乳', 'いちご']

const fruitsArray = ['いちご', 'ぶどう', 'みかん', 'バナナ', 'スイカ'];

const result = fruitsArray.filter(function(fruit) {

    let bool = false;
    
    this.forEach(function(item) {
        if (item === fruit) {
            bool = true;
        }
    });

    return bool;
    
}, foodList);

console.log(result);

通常、上記のようなケースで使用する thisキーワードは、処理するオブジェクト自身を参照するのが仕様となっていますが、第２引数でオブジェクトを指定することにより参照先を変更することができます。

コールバック関数内で特定のオブジェクトを参照する必要がある場合には、対象のオブジェクトを第２引数に指定してthisキーワードで参照するようにしましょう。

まとめ

いかがでしたか？今回は、filterメソッドの使い方について解説しました。

基本的に、配列の各要素に対して何か処理を行いたい場合には、for文か forEachメソッドのどちらかで対応することが可能です。
しかしながら、処理内容によってはコードが必要以上に多くなってしまい、可読性が下がる原因の１つとなってしまうため、目的に応じて適切にメソッドを使い分けることが重要となってきます。

今回紹介した filterメソッドを含め、様々なメソッドが配列型には用意されているので、それぞれの特徴をしっかりと押さえて使い分けられるようにしておくと良いでしょう。

JavaScriptの勉強方法は？

書籍やインターネットで学習する方法があります。昨今では、YouTubeなどの動画サイトやエンジニアのコミュニティサイトなども充実していて多くの情報が手に入ります。
そして、より効率的に知識・スキルを習得するには、知識をつけながら実際に手を動かしてみるなど、インプットとアウトプットを繰り返していくことが重要です。特に独学の場合は、有識者に質問ができたりフィードバックをもらえるような環境があると、理解度が深まるでしょう。

ただ、JavaScriptに限らず、ITスキルを身につける際、どうしても課題にぶつかってしまうことはありますよね。特に独学だと、わからない部分をプロに質問できる機会を確保しにくく、モチベーションが続きにくいという側面があります。独学でモチベーションを維持する自信がない人にはプログラミングスクールという手もあります。費用は掛かりますが、その分スキルを身につけやすいです。しっかりと知識・スキルを習得して実践に活かしたいという人はプログラミングスクールがおすすめです。

プログラミングスクールならテックマニアがおすすめ！

ITスキル需要の高まりとともにプログラミングスクールも増えました。しかし、どのスクールに通うべきか迷ってしまう人もいるでしょう。そんな方にはテックマニアをおすすめします！これまで多くのITエンジニアを育成・輩出してきたテックマニアでもプログラミングスクールを開講しています。

このような特徴を持つテックマニアはITエンジニアのスタートラインとして最適です。
話を聞きたい・詳しく知りたいという方はこちらからお気軽にお問い合わせください。