【JavaScript】オブジェクト配列を任意のプロパティの値でフィルタリングする方法

はじめに

JavaScriptでは、オブジェクトの配列から特定のキーワードに一致する要素だけを抽出したいケースがよくあります。たとえば、検索機能を実装する際、オブジェクトが持つすべてのプロパティを対象に文字列検索を行い、一致するオブジェクトだけを返す方法が必要になります。

本記事では、filter()メソッドと正規表現（RegExp）を組み合わせて、この処理を実現する方法を解説します。

サンプルデータ

まず、次のようなオブジェクトの配列を用意します。

const arr = [{
    name: 'Paul',
    country: 'Canada',
}, {
    name: 'Lea',
    country: 'Italy',
}, {
    name: 'John',
    country: 'Italy',
}];

この配列に対して、文字列キーワードを指定してフィルタリングを行います。ポイントは、検索をオブジェクトのすべてのプロパティに対して実行することです。

期待する動作

• 「lea」と入力した場合： すべてのオブジェクトとその全プロパティを走査し、「lea」を含むオブジェクトを返す。
• 「italy」と入力した場合： 同様にすべてのプロパティを確認し、「italy」を含むオブジェクトを返す。

実装コード

以下が実際のコードです。

const arr = [{
        name: 'Paul',
        country: 'Canada',
    }, {
        name: 'Lea',
        country: 'Italy',
    }, {
        name: 'John',
        country: 'Italy',
}];

const filterByValue = (arr = [], query = '') => {
    // 大文字・小文字を区別しない正規表現を作成
    const reg = new RegExp(query, 'i');
    return arr.filter((item) => {
        let flag = false;
        for (prop in item) {
            if (reg.test(item[prop])) {
                flag = true;
            }
        };
        return flag;
    });
};

console.log(filterByValue(arr, 'ita'));

コードのポイント

• new RegExp(query, 'i')：第2引数に 'i' を指定することで、大文字と小文字を区別せずにマッチングできます。「Italy」も「italy」も同じように検索可能です。
• for...in ループ：オブジェクトの各プロパティを順番に取り出し、値が正規表現に一致するかどうかを判定します。
• flag 変数：1つでもプロパティが一致すれば true になり、そのオブジェクトは結果に含まれます。
• arr.filter()：true を返した要素だけを新しい配列として返します。元の配列は変更されません。

実行結果

コンソールへの出力は次のようになります。

[
    { name: 'Lea', country: 'Italy' },
    { name: 'John', country: 'Italy' }
]

クエリ「ita」に一致した country プロパティを持つ2つのオブジェクトが正しく抽出されています。

まとめ

Array.prototype.filter() と for...in ループ、そして大文字小文字を無視する正規表現を組み合わせることで、オブジェクト配列を柔軟に検索・フィルタリングできます。この手法は検索ボックスやデータテーブルの絞り込み機能など、さまざまな場面で応用できるので、ぜひ覚えておきましょう。