はじめに

こんにちは、SHIFTのITソリューション部に所属しているTanakaです。現在は開発支援プロダクト推進部のテックブースト（以下、TB）プロジェクトに参画しています。
私は現在、Node.js実行環境を用いたJavaScriptでの開発に従事しているのですが、今回はその開発の中で学んだfilterというメソッドについて、紹介させていただければと思います。

filterとは

filterとは、JavaScriptの標準ライブラリに含まれているメソッドの一つで、配列から一定条件下のデータを抽出し、抽出後のデータを新しい配列として返す機能を持っています。
基本的な構文としては、以下の通りです。

予約語 変数名 = 配列;
変数名.filter(コールバック関数);

使用例

まずは、簡単な配列を使用した例を紹介します。

//予約語 変数名 = 配列;
const rows = [1, 2, 3, 4, 5]

　　　　　　//変数名.filter(コールバック関数);
const result = rows.filter(row => row >= 3); //3以上の数値だけを抽出

console.log(result);

// 出力結果
[ 3, 4, 5 ]

上の例では、rowsに代入した1から5までのデータのうち、3以上の数値だけをfilterで抽出し、resultという新しい変数に代入しています。
結果として、3から5までの数が正しく出力されていることがわかります。

なお、今回は簡単化のためアロー関数を用いています。

注意点（連想配列と多次元配列）

次に、より複雑な、複数の行と列から成るデータから抽出する例を紹介したいと思います。
以下のように表現できる配列rowsから、45歳以上のデータを抽出したいとします。

この場合、コードは以下のようになります。

const rows = [
  {
    '氏名': '中村 裕加里',
    '年齢': '43',
    '生年月日': '1978年08月28日',
    '性別': '女',
    '血液型': 'B',
    '会社名': '株式会社匠',
  },
  {
    '氏名': '杉山 聡',
    '年齢': '33',
    '生年月日': '1988年08月18日',
    '性別': '男',
    '血液型': 'O',
    '会社名': '有限会社ミルキーウェイ',
  },
  {
    '氏名': '廣瀬 綾子',
    '年齢': '66',
    '生年月日': '1955年11月06日',
    '性別': '女',
    '血液型': 'O',
    '会社名': '株式会社エス',
  }
]

const result = rows.filter(row => row['年齢'] >= 45); //45歳よりも上の年齢のデータだけを抽出

//出力結果
[
  {
    '氏名': '廣瀬 綾子',
    '年齢': '66',
    '生年月日': '1955年11月06日',
    '性別': '女',
    '血液型': 'O',
    '会社名': '株式会社エス'
  }
]

年齢の列を指定して、その列の数値が45以上のデータを抽出するという機能を実装できました。

ここで注意する必要があるのが、データの形式です。
今回は、rowsが連想配列形式のデータだったため、row['年齢'] で列名を指定することができました。

連想配列とは、平たく言うと、列名を表す key と内容を表す value でデータの中身を紐付けるオブジェクトのことで、これがあることで列名を指定するだけで紐づいた中身を呼び出すことができます。

一方で、配列の中に配列があるオブジェクトを、多次元配列といいます。
JavaScriptには、配列は[ ]で囲まれ、オブジェクトは{ }で囲まれるというルールがあり、今回の例でいうと

[
  {
    '氏名': '中村 裕加里',
    '年齢': '43',
    '生年月日': '1978年08月28日',
    '性別': '女',
    '血液型': 'B',
    '会社名': '株式会社匠',
  },
  {
    '氏名': '杉山 聡',
    '年齢': '33',
    '生年月日': '1988年08月18日',
    '性別': '男',
    '血液型': 'O',
    '会社名': '有限会社ミルキーウェイ',
  },
  {
    '氏名': '廣瀬 綾子',
    '年齢': '66',
    '生年月日': '1955年11月06日',
    '性別': '女',
    '血液型': 'O',
    '会社名': '株式会社エス',
  }
]

は[ ]の中に{ }が入っているため、配列の中にオブジェクトが入っていると解釈することができます。
key : valueでペアが作られているため、後からプログラムで参照しやすい構造になっています。

一方で今回のデータが多次元配列だった場合は、以下のような形になります。

[
  [
    '氏名',
    '年齢',
    '生年月日',
    '性別',
    '血液型',
    '会社名',
  ],
    [
    '中村 裕加里',
    '43',
    '1978年08月28日',
    '女',
    'B',
    '株式会社匠',
  ],
  [
    '杉山 聡',
    '33',
    '1988年08月18日',
    '男',
    'O',
    '有限会社ミルキーウェイ',
  ]
  [
    '廣瀬 綾子',
    '66',
    '1955年11月06日',
    '女',
    'O',
    '株式会社エス',
  ]
]

[ ]の中に[ ]が入っている多次元配列の形だと、列名を指定してもそれがどのデータにも紐づいていないので、中身を呼び出すことが出来ません。

その場合には、以下のように列番号を指定する、もしくはあらかじめ多次元配列を連想配列に変換しておく必要があります。

const rows = [
  [
    '氏名',
    '年齢',
    '生年月日',
    '性別',
    '血液型',
    '会社名',
  ],
    [
    '中村 裕加里',
    '43',
    '1978年08月28日',
    '女',
    'B',
    '株式会社匠',
  ],
  [
    '杉山 聡',
    '33',
    '1988年08月18日',
    '男',
    'O',
    '有限会社ミルキーウェイ',
  ],
  [
    '廣瀬 綾子',
    '66',
    '1955年11月06日',
    '女',
    'O',
    '株式会社エス',
  ]
]

//ヘッダーの抽出
const header = [rows[0]];

//45歳よりも上の年齢の行だけを抽出
const result = rows.filter(row => row[1] >= 45);

//ヘッダーと抽出結果を結合
const merged = header.concat(result);

console.log(merged);

//出力結果
[
  [ '氏名', '年齢', '生年月日', '性別', '血液型', '会社名' ],
  [ '廣瀬 綾子', '66', '1955年11月06日', '女', 'O', '株式会社エス' ]
]

おわりに

今回の記事では、filterメソッドの基本的な機能の紹介と、陥りがちな注意点を紹介しました。
プロジェクトでは、最終的に抽出の処理をforEach文で実装したのですが、その際に連想配列と多次元配列の違いを意識する必要があったため、便利なメソッドに頼るだけでなく、裏の理論的な部分をしっかりと理解する必要があると感じました。
この記事が私と同じようなJavaScript初学者の助けになれば幸いです。

filterメソッドについて詳しく知りたい方: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
filterメソッドにおけるアロー関数の書き方: https://reffect.co.jp/html/javascript-arrow-function-understanding/#filter-関数でアロー関数

お問合せはお気軽に
https://service.shiftinc.jp/contact/

SHIFTについて（コーポレートサイト）
https://www.shiftinc.jp/

SHIFTのサービスについて（サービスサイト）
https://service.shiftinc.jp/

SHIFTの導入事例
https://service.shiftinc.jp/case/

お役立ち資料はこちら
https://service.shiftinc.jp/resources/

SHIFTの採用情報はこちら
https://recruit.shiftinc.jp/career/