JavaScriptでのfilterの使い方とは？Callback関数の使い方やアロー演算子の使い方について紹介！
- システム
エンジニア - Callback関数で抽出した条件に合った要素を取り出す、filterの使い方について教えてください。
- プロジェクト
マネージャー - では、Callback関数にの使い方などについて、おさらいしながら見ていきましょう。
JavaScriptでのfilterの使い方とは？
今回は、JavaScriptでのfilterの使い方について説明します。filterを使うと、配列を指定条件で抽出できます。
ここでは、
・基本的な使い方
・整数配列に対するfilter
・文字列配列に対するfilter
・第2引数（index）の使い方
・第3引数（array）の使い方
・連想配列に対するfilter
・アロー演算子
について紹介します。
JavaScriptでのfilterの使い方に興味のある方はぜひご覧ください。
基本的な使い方
JavaScriptにおける、filterの基本的な使い方は以下です。
|
1
2
3
|
let newArray = items.filter(function callback(value[, index[, array]]) {
// filter条件
})
|
value: 配列の値、index: 配列のインデックス番号、array: 配列 を表します。indexおよびarrayはなくても良いです。
整数配列に対するfilter
JavaScriptでの整数配列に対するfilterの使い方を紹介します。実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
10
|
// 配列の宣言
let array = [12, 24, 5, 37, 54, 48, 61];
let result = array.filter( function (value) {
// 25よりも大きい数を抽出
return value > 25;
})
// 結果出力
console.log('result: ', result);
|
実行結果は以下のようになります。
|
1
|
result: [ 37, 54, 48, 61 ]
|
抽出条件に合致する要素のみが抽出されていることが分かります。
文字列配列に対するfilter
JavaScriptでの文字列配列に対するfilterの使い方を紹介します。実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
10
|
// 配列の宣言
let array = ['ichiro', 'jiro', 'saburo', 'shiro', 'goro'];
let result = array.filter( function (value) {
// 「saburo」を抽出
return value === 'saburo';
})
// 結果出力
console.log('result: ', result);
|
実行結果は以下のようになります。
|
1
|
result: [ 'saburo' ]
|
もちろん、複数条件でも抽出可能です。
|
1
2
3
4
5
6
7
8
9
10
|
// 配列の宣言
let array = ['ichiro', 'jiro', 'saburo', 'shiro', 'goro'];
let result = array.filter( function (value) {
// 「saburo」または「goro」を抽出
return value === 'saburo' || value === 'goro';
})
// 結果出力
console.log('result: ', result);
|
実行結果は以下のようになります。
|
1
|
result: [ 'saburo', 'goro' ]
|
includesメソッドを使用すれば、特定文字列を含む要素を抽出できます。
|
1
2
3
4
5
6
7
8
9
10
|
// 配列の宣言
let array = ['ichiro', 'jiro', 'saburo', 'shiro', 'goro'];
let result = array.filter( function (value) {
// 「ro」を含む文字列を抽出
return value.includes('ro');
})
// 結果出力
console.log('result: ', result);
|
実行結果は以下のようになります。
|
1
|
result: [ 'ichiro', 'jiro', 'saburo', 'shiro', 'goro' ]
|
第2引数（index）の使い方
callback関数の第2引数（index）の使い方を紹介します。実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
10
|
// 配列の宣言
let array = ['ichiro', 'jiro', 'saburo', 'shiro', 'goro'];
let result = array.filter( function (value, index) {
// 偶数のindexを抽出
return index % 2 == 0;
})
// 結果出力
console.log('result: ', result);
|
実行結果は以下のようになります。
|
1
|
result: [ 'ichiro', 'saburo', 'goro' ]
|
このように、JavaScriptのfilterでは、第2引数（index）に対して処理できます。
第3引数（array）の使い方
callback関数の第3引数（array）の使い方を紹介します。実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
10
|
// 配列の宣言
let array = [1, 2, 5, 3, 5, 4, 6, 2, 1, 6];
let result = array.filter( function (value, index, array) {
// indexを比較し、重複データを排除
return array.indexOf( value ) === index;
})
// 結果出力
console.log('result: ', result);
|
実行結果は以下のようになります。
|
1
|
result: [ 1, 2, 5, 3, 4, 6 ]
|
indexOfメソッドでインデックス番号が分かります。インデックス番号とインデックスを比較することで、重複データを排除した配列を生成できます。
同様に、重複データ以外を排除した配列も生成できます。
|
1
2
3
4
5
6
7
8
9
10
|
// 配列の宣言
let array = [1, 2, 5, 3, 5, 4, 6, 2, 1, 6];
let result = array.filter( function (value, index, array) {
// indexを比較し、重複データ以外を排除
return array.indexOf( value ) !== index;
})
// 結果出力
console.log('result: ', result);
|
実行結果は以下のようになります。
|
1
|
result: [ 5, 2, 1, 6 ]
|
このように、JavaScriptのfilterでは、第3引数（array）に対して処理できます。
連想配列に対するfilter
filterは配列だけでなく、連想配列に対しても使用できます。実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
// 連想配列の宣言
let array = [
{'id': 1, 'name': 'ichiro', 'gender': 'male'},
{'id': 2, 'name': 'hanako', 'gender': 'female'},
{'id': 3, 'name': 'jiro', 'gender': 'male'},
{'id': 4, 'name': 'satomi', 'gender': 'female'},
{'id': 5, 'name': 'saburo', 'gender': 'male'},
{'id': 2, 'name': 'hiroko', 'gender': 'female'}
];
let result = array.filter( function (value) {
// genderがmaleの要素を抽出
return value.gender === 'male';
})
// 結果出力
console.log('result: ', result);
|
実行結果は以下のようになります。
|
1
2
3
4
5
|
result: [
{ id: 1, name: 'ichiro', gender: 'male' },
{ id: 3, name: 'jiro', gender: 'male' },
{ id: 5, name: 'saburo', gender: 'male' }
]
|
このように、JavaScriptでは、連想配列に対してもfilterできます。
アロー演算子
アロー演算子を使えば、filterをシンプルに記述できます。実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
// 配列の宣言
let array = [12, 24, 5, 37, 54, 48, 61];
// アロー演算子を使わない場合
let result1 = array.filter( function (value) {
// 25よりも大きい数を抽出
return value > 25;
})
// アロー演算子による記述
let result2 = array.filter( value => value > 25);
// 結果出力
console.log('result1: ', result1);
console.log('result2: ', result2);
|
実行結果は以下のようになります。
|
1
2
|
result1: [ 37, 54, 48, 61 ]
result2: [ 37, 54, 48, 61 ]
|
結果は同じになりますが、アロー演算子を使うほうがシンプルに記述できます。
- システム
エンジニア - アロー演算子を使用することで、よりシンプルに記述でき、条件抽出も簡単にできますね。
- プロジェクト
マネージャー - そうですね。頻繁に使うメソッドではありませんが、いざというときに必要なメソッドですのでマスターしておきたいですね。
まとめ
いかがでしたでしょうか。JavaScriptでのfilterの使い方について説明しました。filterを使うと、配列や連想配列を指定条件で抽出できます。基本的な使い方だけでなく、callback関数の使い方やアロー演算子の使い方について紹介しました。
ぜひご自身でJavaScriptのソースコードを書いて、理解を深めてください。
FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
株式会社オープンアップシステムはこんな会社です
秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。
-
スマホアプリから業務系システムまで
スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
-
充実した研修制度
毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
-
資格取得を応援
スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
-
東証プライム上場企業グループ
オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。
安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。
株式会社オープンアップシステムに興味を持った方へ
株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。
年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。
新着案件New Job
-
開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク
月給29万～30万円東京都品川区(大崎駅) -
遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万～60万円東京都港区(六本木駅) -
病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク
月給30万～30万円東京都豊島区(池袋駅) -
開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万～50万円東京都豊島区(大塚駅) -
債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務
月給62万～67万円東京都文京区(後楽園駅) -
PMO/東京都豊島区/【WEB面談可】/在宅勤務
月給55万～55万円東京都豊島区(池袋駅)
関連記事Related Posts
-
JavaScriptでのDOM操作とは｜さらに活用する3つの方法
DOM操作とは？ DOM（Document Object Model）とは、JavaScriptでhtmlを参照・操作するときに使用される、Webブラウザがhtmlを解析したときに構築されるhtmlの構造です。 DOMの […]
-
jQueryのloadとは？loadの使用方法やjQueryを使わずにloadを行う方法を紹介
jQueryのloadとは？ jQueryはJavaScriptで利用できる多機能なライブラリです。その機能の1つであるloadは、自ページとは別のtxtページやhtmlページを読み込んで表示することができる機能です。複 […]
-
jQueryでのValidationの使い方を紹介！Validationを正しく使いこなそう！
jQueryでのValidationの使い方を紹介します 今回は、jQueryでのValidationの使い方について説明します。 Validationとは、ユーザが正しく値を入力したかチェックする機能です。例えば、必須 […]
-
JavaScriptでtoStringメソッドとは？コードでわかりやすく紹介
JavaScriptでのtoStringメソッドの使い方とは？ 今回は、JavaScriptでのtoStringメソッドの使い方について説明します。 toStringメソッドは、数値や日付、配列、オブジェクトなどを文字列 […]
-
jQueryでの「id」セレクタの取得方法｜指定方法やDOM操作も解説
jQueryの「id」セレクタやメソッドを利用する方法 jQueryでDOM操作するときは「セレクタ」を利用するのが基本です。その中でも「id」セレクタはJavaScript開発において利用頻度の高い項目です。 この記事 […]
