TypeScript実践力を身につける!コードスニペットで学ぶ型付けとインターフェース
- 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関数は以下の引数と共に呼び出します。
- element:現在処理中の配列要素の値
- index:現在処理中の配列要素の位置、省略可能
- 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などがあります。
ここではそれぞれの特徴をまとめ、各メソッドの違いについて説明します。
メソッド名 | 特徴 | 利用シーン例 |
filter | 条件がtrueになる要素をすべて返す | 個人名とテストの点数がある配列に対して、80点以上の個人名を取り出す など |
map | すべての要素に対して処理を行い、すべての要素を返す | 金額がある配列に対して、すべての金額に消費税の計算を行う など |
forEach | 要素ごとにループ処理を行う | 生産予定数が登録された配列に対して、予定数を合計し、1日の総生産数を計算する など |
find | 条件がtrueになる最初の要素だけを返す | 日時とイベントログがある配列に対して、最初にログイン作業した日時を取得する など |
①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件のみが抽出されます。
※掲載された社名、製品名は、各社の商標及び登録商標です。