• 1．JavaScriptのfilterとは？
• 2．filterメソッドの基本構文
• 3．filterメソッドの使い方　
• 4．アロー関数で記述する方法
• 5．filterメソッドの使い方の具体例
• 6．map・forEach・findとの違い
  

JavaScriptを学習するうえで、「filterってなに？」と悩んでいる方も多いのではないでしょうか？

filterは、配列から条件に一致するデータを抽出し新しい配列を生成するメソッドです。

「filterメソッドの使い方は？」

「filterメソッドで複数条件を指定するには？」

「mapやforEach、findとの違いは？」

といった疑問に対して、本記事では初級者エンジニア向けに詳しく解説していきます。

1.     JavaScriptのfilterとは？

JavaScriptのfilterとは、配列から指定した条件に一致する要素を取り出し、新しい配列を生成するメソッドです。

例えば、「0より大きい数値のみ」、「〇〇を含む文字列のみ」といった抽出が簡単にできます。

条件にコールバック関数を指定できるので、コードの汎用性が高まり、シンプルなコーディングが可能です。

2．filterメソッドの基本構文

filterメソッドの基本構文は以下になります。

let arrays = [配列データ];
let newArrays = arrays.filter(callback(element[, index, [array]]) [, thisArg]);

filterメソッドは指定したcallback関数を配列データの各要素に対して一度ずつ呼び出し、callbackがtrue判定した要素のみで新しい配列を生成します。

filterメソッドの引数、返り値について詳しく解説します。

①引数

filterメソッドの引数には、”callback”、”thisArg”があります。

・callback

ひとつめの引数にはcallback関数を指定します。callback関数は以下の引数と共に呼び出します。

1. element：現在処理中の配列要素の値
   
2. index：現在処理中の配列要素の位置、省略可能
   
3. array：filterメソッドで格納される配列、省略可能

・thisArg

thisArgはコールバックを実行する際にthisとして使用する値で、省略可能です。

thisArgが引数に指定された場合、そのオブジェクトがcallback関数内のthis値として扱われます。

引数に指定されなかった場合、undefinedがthis値として扱われます。

②返り値

callback関数がtrue判定した要素で配列を作成し、false判定した要素はスキップします。

true判定した要素がない場合は、空の配列が返されます。

3．filterメソッドの使い方

ここで、filterメソッドの基本的な使い方について説明します。

①文字列の配列に対するfilter

まずは、文字列の配列から抽出するサンプルコードを見てみましょう。

以下は、文字列配列から”four”を抽出するサンプルコードです。

//配列の作成
let arrayString = ['one', 'two', 'three', 'four', 'five'];

let filterResult = arrayString.filter( function (value) {
    // fourを抽出
    return value === 'four';
})

// 結果出力
console.log('抽出結果: ', filterResult);

実行結果：

抽出結果:  [ ‘four’ ]

“four”が正しく抽出されているのがわかりますね。

②整数の配列に対するfilter

整数の配列に対するfilterメソッドの使い方を紹介します。

以下のサンプルコードは、整数の配列から50より大きい数値を取り出しています。

//配列の作成
let arrayNumeric = [123,49,185,83,20,109,74,9,12,39];

let filterResult = arrayNumeric.filter( function (value) {
    // 配列から50より大きい数値を取得
    return value > 50;
})

// 結果出力
console.log('抽出結果: ', filterResult);

実行結果：

抽出結果:  [ 123, 185, 83, 109, 74 ]

③連想配列に対するfilter

連想配列とは、自由にキーを割り振れる配列のことです。

キーを任意に設定できるので、そこに格納されている値を簡単に取り出せるようになっています。

filterメソッドは、その連想配列にも使用できます。

サンプルコードで確認してみましょう。

//連想配列の作成(※人口の単位は百万人)
let array = [
             {'ranking': 1, 'country': 'China', 'population': 1448.5},
             {'ranking': 2, 'country': 'India', 'population': 1406.6},
             {'ranking': 3, 'country': 'USA', 'population': 334.8},
             {'ranking': 4, 'country': 'Indonesia', 'population': 279.1},
             {'ranking': 5, 'country': 'Pakistan', 'population': 229.5}
            ];

let filterResult = array.filter( function (value) {
    // 人口が10億以上の国を抽出
    return value.population >= 1000;
})

// 結果出力
console.log('抽出結果: ', filterResult);

実行結果：

抽出結果:  [

  { ranking: 1, country: ‘China’, population: 1448.5 },

  { ranking: 2, country: ‘India’, population: 1406.6 }

]

サンプルコードは、人口が10億人以上の国を抽出しています。

連想配列から抽出する場合、キーを指定できるため、コードがシンプルになります。　

4．アロー関数で記述する方法

filterメソッドでは、アロー関数を使用することも可能です。

アロー関数とは、functionの代替構文で、filterメソッドをシンプルに記述できます。

サンプルコードで確認してみましょう。

先ほどの50より大きい数値を抽出するプログラムを、アロー関数で書き直してみます。

//配列の作成
let arrayNumeric = [123,49,185,83,20,109,74,9,12,39];

// 配列から50より大きい数値を取得
let filterResult = arrayNumeric.filter(value => value > 50);

// 結果出力
console.log('抽出結果: ', filterResult);

実行結果：

抽出結果:  [ 123, 185, 83, 109, 74 ]

アロー関数を使うと、シンプルに記述できることがわかりますね。

5．filterメソッドの使い方の具体例

ここでは、filterメソッドの使い方の具体例をサンプルコードで解説していきます。

①配列の中から奇数だけを取り出す

まずは、配列の中から奇数だけを抜き出すサンプルです。

//配列の作成
let arrayNumeric = [1,2,3,4,5,6,7,8,9,10];

let filterResult = arrayNumeric.filter(function (value) {
  // 配列から奇数(2で割り切れない)のみを取得
  return value %2 === 1;
})

// 結果出力
console.log('抽出結果: ', filterResult);

実行結果：

抽出結果:  [ 1, 3, 5, 7, 9 ]

奇数は、”2で割った余りが1”なので、条件は”value %2 === 1”となります。

②配列内の検索

次にfilterメソッドで、あいまい検索を行うサンプルを紹介します。

//配列の作成
let arrayNames = ["山田","山本","中山","鈴木","横山"];

let filterResult = arrayNames.filter(function (value) {
  //山を含んでいるかどうかチェック
  return value.indexOf("山") !== -1;
})

// 結果出力
console.log('抽出結果: ', filterResult);

実行結果：

抽出結果:  [ ‘山田’, ‘山本’, ‘中山’, ‘横山’ ]

filterメソッドとindexOfメソッドを組み合わせることで、指定の文字列が含まれているか調べられます。

③複数条件でフィルタリングする

filterメソッドは、複数条件を指定しフィルタリングすることもできます。

//連想配列の作成
let array = [
  {'no': 1, 'name': '山田', 'gender': '女','age':24},
  {'no': 2, 'name': '山本', 'gender': '男','age':45},
  {'no': 3, 'name': '中山', 'gender': '女','age':39},
  {'no': 4, 'name': '鈴木', 'gender': '女','age':30},
  {'no': 5, 'name': '横山', 'gender': '男','age':31}
 ];

let filterResult = array.filter( function (value) {
// 女性かつ30歳以上の人を抽出
return value.gender === '女' && value.age >= 30;
})

// 結果出力
console.log('抽出結果: ', filterResult);

実行結果：

抽出結果:  [

  { no: 3, name: ‘中山’, gender: ‘女’, age: 39 },

  { no: 4, name: ‘鈴木’, gender: ‘女’, age: 30 }

]

“value.gender === ‘女’ && value.age >= 30”は、”性別が女性かつ年齢が30歳以上”を意味しており、複数条件でフィルタリングできることがわかりますね。

6．map・forEach・findとの違い

JavaScriptには、配列を操作するメソッドに、mapやforEach、findなどがあります。

ここではそれぞれの特徴をまとめ、各メソッドの違いについて説明します。

①mapメソッド

mapメソッドは、配列のすべての要素に対して処理を実行し、その結果を新しい配列として返します。

サンプルコードで確認してみましょう。

//配列の作成（税抜金額）
let arrayTaxExcluded = [1200,540,130,50,2380];
//消費税率
let rate=1.1;

let arrayTaxIncluded = arrayTaxExcluded.map( function (value){
    // 消費税の計算（小数点以下を切り捨て）
    return  Math.floor(value * rate)
});

// 結果出力
console.log('税抜価格: ', arrayTaxExcluded);
console.log('税込価格: ', arrayTaxIncluded);

実行結果：

税抜価格:  [ 1200, 540, 130, 50, 2380 ]

税込価格:  [ 1320, 594, 143, 55, 2618 ]

このサンプルコードは、税抜価格の配列データに対して、消費税計算を行い、税込価格の計算を行なっています。

実行結果から、すべての要素に対して処理を行なっていることがわかりますね。

②forEachメソッド

 forEachメソッドは、配列の要素ごとにひとつずつ処理します。

filterメソッドやmapメソッドとの違いは、戻り値がないことです。

//配列の作成（税抜金額）
let arrayTaxExcluded = [1200,540,130,50,2380];
//消費税率
let rate=1.1;

arrayTaxExcluded.forEach( function(value){
    //税込価格を出力
    console.log(Math.floor(value * rate));
});

実行結果：

1320

594

143

55

2618

このサンプルは先ほどと同様に税込価格を計算しています。

forEachメソッドは戻り値がないので、ひとつずつ出力しています。

③findメソッド

findメソッドは、条件と一致する配列要素の最初に見つかった要素を取得します。

//配列の作成
let arrayNames = ["山田","山本","中山","鈴木","横山"];

let filterResult = arrayNames.find(function (value) {
  //山を含んでいるかどうかチェック 
  return value.indexOf("山") !== -1;
})

// 結果出力
console.log('抽出結果: ', filterResult);

実行結果：

抽出結果:  山田

filterメソッドは、一致するすべての要素を取得し配列を作成します。

一方findメソッドは、一致する要素の内、最初に見つかった要素のみを返します。

このサンプルコードでは、”山”を含む名前は4件ありますが、最初の1件のみが抽出されます。

※掲載された社名、製品名は、各社の商標及び登録商標です。