JavaScriptでのfilterの使い方とは？Callback関数の使い方やアロー演算子の使い方について紹介！

Javascript
プログラミング言語

公開日時: 2021-05-18 　更新日時: 2022-06-06

JavaScriptでのfilterの使い方とは？Callback関数の使い方やアロー演算子の使い方について紹介！

この記事でわかること

システム エンジニア: Callback関数で抽出した条件に合った要素を取り出す、filterの使い方について教えてください。

プロジェクト マネージャー: では、Callback関数にの使い方などについて、おさらいしながら見ていきましょう。

JavaScriptでのfilterの使い方とは？

今回は、JavaScriptでのfilterの使い方について説明します。filterを使うと、配列を指定条件で抽出できます。
ここでは、
・基本的な使い方
・整数配列に対するfilter
・文字列配列に対するfilter
・第2引数（index）の使い方
・第3引数（array）の使い方
・連想配列に対するfilter
・アロー演算子
について紹介します。

JavaScriptでのfilterの使い方に興味のある方はぜひご覧ください。

基本的な使い方

JavaScriptにおける、filterの基本的な使い方は以下です。

let newArray = items.filter(function callback(value[, index[, array]]) {
  // filter条件
})

let newArray = items.filter(function callback(value[, index[, array]]) {

// filter条件

})

value: 配列の値、index: 配列のインデックス番号、array: 配列を表します。indexおよびarrayはなくても良いです。

整数配列に対するfilter

JavaScriptでの整数配列に対するfilterの使い方を紹介します。実際のソースコードを見てみましょう。

// 配列の宣言
let array = [12, 24, 5, 37, 54, 48, 61];

let result = array.filter( function (value) {
    // 25よりも大きい数を抽出
    return value > 25;
})

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

// 配列の宣言

let array = [12, 24, 5, 37, 54, 48, 61];

let result = array.filter( function (value) {

// 25よりも大きい数を抽出

return value > 25;

})

// 結果出力

console.log('result: ', result);

実行結果は以下のようになります。

result:  [ 37, 54, 48, 61 ]

1	result: [ 37, 54, 48, 61 ]

抽出条件に合致する要素のみが抽出されていることが分かります。

文字列配列に対するfilter

JavaScriptでの文字列配列に対するfilterの使い方を紹介します。実際のソースコードを見てみましょう。

// 配列の宣言
let array = ['ichiro', 'jiro', 'saburo', 'shiro', 'goro'];

let result = array.filter( function (value) {
    // 「saburo」を抽出
    return value === 'saburo';
})

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

// 配列の宣言

let array = ['ichiro', 'jiro', 'saburo', 'shiro', 'goro'];

let result = array.filter( function (value) {

// 「saburo」を抽出

return value === 'saburo';

})

// 結果出力

console.log('result: ', result);

実行結果は以下のようになります。

result:  [ 'saburo' ]

1	result: [ 'saburo' ]

もちろん、複数条件でも抽出可能です。

// 配列の宣言
let array = ['ichiro', 'jiro', 'saburo', 'shiro', 'goro'];

let result = array.filter( function (value) {
    // 「saburo」または「goro」を抽出
    return value === 'saburo' || value === 'goro';
})

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

// 配列の宣言

let array = ['ichiro', 'jiro', 'saburo', 'shiro', 'goro'];

let result = array.filter( function (value) {

// 「saburo」または「goro」を抽出

return value === 'saburo' || value === 'goro';

})

// 結果出力

console.log('result: ', result);

実行結果は以下のようになります。

result:  [ 'saburo', 'goro' ]

1	result: [ 'saburo', 'goro' ]

includesメソッドを使用すれば、特定文字列を含む要素を抽出できます。

// 配列の宣言
let array = ['ichiro', 'jiro', 'saburo', 'shiro', 'goro'];

let result = array.filter( function (value) {
    // 「ro」を含む文字列を抽出
    return value.includes('ro');
})

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

// 配列の宣言

let array = ['ichiro', 'jiro', 'saburo', 'shiro', 'goro'];

let result = array.filter( function (value) {

// 「ro」を含む文字列を抽出

return value.includes('ro');

})

// 結果出力

console.log('result: ', result);

実行結果は以下のようになります。

result:  [ 'ichiro', 'jiro', 'saburo', 'shiro', 'goro' ]

1	result: [ 'ichiro', 'jiro', 'saburo', 'shiro', 'goro' ]

第2引数（index）の使い方

callback関数の第2引数（index）の使い方を紹介します。実際のソースコードを見てみましょう。

// 配列の宣言
let array = ['ichiro', 'jiro', 'saburo', 'shiro', 'goro'];

let result = array.filter( function (value, index) {
    // 偶数のindexを抽出
    return index % 2 == 0;
})

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

// 配列の宣言

let array = ['ichiro', 'jiro', 'saburo', 'shiro', 'goro'];

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

// 偶数のindexを抽出

return index % 2 == 0;

})

// 結果出力

console.log('result: ', result);

実行結果は以下のようになります。

result:  [ 'ichiro', 'saburo', 'goro' ]

1	result: [ 'ichiro', 'saburo', 'goro' ]

このように、JavaScriptのfilterでは、第2引数（index）に対して処理できます。

第3引数（array）の使い方

callback関数の第3引数（array）の使い方を紹介します。実際のソースコードを見てみましょう。

// 配列の宣言
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);

// 配列の宣言

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);

実行結果は以下のようになります。

result:  [ 1, 2, 5, 3, 4, 6 ]

1	result: [ 1, 2, 5, 3, 4, 6 ]

indexOfメソッドでインデックス番号が分かります。インデックス番号とインデックスを比較することで、重複データを排除した配列を生成できます。

同様に、重複データ以外を排除した配列も生成できます。

// 配列の宣言
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);

// 配列の宣言

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);

実行結果は以下のようになります。

result:  [ 5, 2, 1, 6 ]

1	result: [ 5, 2, 1, 6 ]

このように、JavaScriptのfilterでは、第3引数（array）に対して処理できます。

連想配列に対するfilter

filterは配列だけでなく、連想配列に対しても使用できます。実際のソースコードを見てみましょう。

// 連想配列の宣言
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);

// 連想配列の宣言

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);

実行結果は以下のようになります。

result:  [
  { id: 1, name: 'ichiro', gender: 'male' },
  { id: 3, name: 'jiro', gender: 'male' },
  { id: 5, name: 'saburo', gender: 'male' }
]

result: [

{ id: 1, name: 'ichiro', gender: 'male' },

{ id: 3, name: 'jiro', gender: 'male' },

{ id: 5, name: 'saburo', gender: 'male' }

]

このように、JavaScriptでは、連想配列に対してもfilterできます。

アロー演算子

アロー演算子を使えば、filterをシンプルに記述できます。実際のソースコードを見てみましょう。

// 配列の宣言
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);

// 配列の宣言

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);

実行結果は以下のようになります。

result1:  [ 37, 54, 48, 61 ]
result2:  [ 37, 54, 48, 61 ]

1 2	result1: [ 37, 54, 48, 61 ] result2: [ 37, 54, 48, 61 ]

結果は同じになりますが、アロー演算子を使うほうがシンプルに記述できます。

システム エンジニア: アロー演算子を使用することで、よりシンプルに記述でき、条件抽出も簡単にできますね。

プロジェクト マネージャー: そうですね。頻繁に使うメソッドではありませんが、いざというときに必要なメソッドですのでマスターしておきたいですね。

まとめ

いかがでしたでしょうか。JavaScriptでのfilterの使い方について説明しました。filterを使うと、配列や連想配列を指定条件で抽出できます。基本的な使い方だけでなく、callback関数の使い方やアロー演算子の使い方について紹介しました。

ぜひご自身でJavaScriptのソースコードを書いて、理解を深めてください。

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

JavaScriptでのfilterの使い方とは？Callback関数の使い方やアロー演算子の使い方について紹介！

JavaScriptでのfilterの使い方とは？

基本的な使い方

整数配列に対するfilter

文字列配列に対するfilter

第2引数（index）の使い方

第3引数（array）の使い方

連想配列に対するfilter

アロー演算子

まとめ

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

JavaScriptでのfilterの使い方とは？Callback関数の使い方やアロー演算子の使い方について紹介！

JavaScriptでのfilterの使い方とは？

基本的な使い方

整数配列に対するfilter

文字列配列に対するfilter

第2引数（index）の使い方

第3引数（array）の使い方

連想配列に対するfilter

アロー演算子

まとめ

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

関連記事Related Posts

JavaScriptでのDOM操作とは｜さらに活用する3つの方法

jQueryのloadとは？loadの使用方法やjQueryを使わずにloadを行う方法を紹介

jQueryでのValidationの使い方を紹介！Validationを正しく使いこなそう！

JavaScriptでtoStringメソッドとは？コードでわかりやすく紹介

jQueryでの「id」セレクタの取得方法｜指定方法やDOM操作も解説