バックエンド側からデータを受け取り、フロントエンド側で扱うときには配列としてJavaScriptで操作するケースが多いかと思います。javascriptには配列を操作するための様々なメソッドが用意されています。今回は配列から条件にあう値を取得するパターンについてまとめていきたいと思います。また、過去記事にはそれ以外にもいろんな配列を扱うメソッドについてまとめていますのでこちらもどうぞ。   （参考記事） JavaScriptで配列を扱う時によく使うメソッド＃1【配列の作成・値や総数の取得・空判定など】 JavaScriptで配列を扱う時によく使うメソッド＃2【配列の値に対して繰り返し処理を行う】 JavaScriptで配列を扱う時によく使うメソッド＃3【配列に値が含まれるか・値のインデックスを検索する】  

Array.find()

配列データから、特定の条件にマッチする値で、ユニークなものを取得する場合には「Array.find()」を使います。引数にはコールバック関数をとり、そのコールバック関数内で条件を指定することで、条件にマッチした最初のインデックスの値を返してくれます。ですので、一意の値を取得する場合に使えます。 【javascript】

const arrayObject = [
 { id: 1, name: '田中' },
 { id: 2, name: '中村' },
 { id: 3, name: '村山' },
 { id: 4, name: '山川' },
 { id: 5, name: '川本' } 
];
const search = 2;
const result = arrayObject.find((object) => {
 return object.id === search;
});
if(result) {
 console.log(`IDが2のメンバーは${result.name}さんです`);
} else {
 console.log('該当するデータはありません');
}

  【console】

"IDが2のメンバーは中村さんです"

  メディアサイトなどで、投稿記事のIDからコンテンツの情報を取得する場合などに使えますね。上記はIDで取得するケースの例ですが、それ以外の値でも検索することができます。対象となる配列は値型でもオブジェクト型でも同じように使えます。  

Array.filter()

同じく配列データから、特定の条件にマッチする値を取得するのですが、複数該当し条件に合う全ての値を取得する場合には「Array.filter()」を使います。こちらも引数にコールバック関数をとり、そのコールバック関数内で条件を指定すると、条件にマッチした全ての値が配列として返ってきます。また、条件にマッチしたものがない場合には空の配列が返ってきます。 【javascript】

const arrayObject = [
 { name: 'ジャガイモ', farm: '北海道' },
 { name: 'ニンジン', farm: '北海道' },
 { name: 'ダイコン', farm: '千葉県' },
 { name: 'タマネギ', farm: '北海道' },
 { name: 'キャベツ', farm: '長野県' },
];
const search = '北海道';
const result = arrayObject.filter((object) => {
 return object.farm === search;
});
console.log(result);

  【console】

[
 { name: 'ジャガイモ', farm: '北海道' },
 { name: 'ニンジン', farm: '北海道' },
 { name: 'タマネギ', farm: '北海道' }
]

  カテゴリやキーワード指定などの検索軸で使うことができます。配列データを条件ごとに切り分ける場合にも使えるのでとても便利なメソッドです。こちらも対象となる配列は値型でもオブジェクト型でも同じように使えます。オブジェクト型の配列では、さらにここからArray.forEach()などで個別の値を取得することができます。  

まとめ

【配列から条件に合う一意の値を取得する】 Array.find( ( value ) => { callback } );   【配列から条件に合う複数の値を取得する】 Array.filter( ( value ) => { callback } );  

---

  今回のメソッドは、膨大なデータを条件別にフィルタリングする場合に使えます。バックエンドからAPI経由でデータを受け取り、フロントエンド側で処理する場合には必須のメソッドになるのではないでしょうか。とても便利なのでぜひ覚えておきたいですね。   （こちらの記事もどうぞ） JavaScriptで配列を扱う時によく使うメソッド＃1【配列の作成・値や総数の取得・空判定など】 JavaScriptで配列を扱う時によく使うメソッド＃2【配列の値に対して繰り返し処理を行う】 JavaScriptで配列を扱う時によく使うメソッド＃3【配列に値が含まれるか・値のインデックスを検索する】