JavaScriptでオブジェクト配列から条件に合うプロパティ値を選択的に抽出する方法

はじめに

JavaScriptでは、オブジェクトが格納された配列の中から、特定の条件を満たす要素だけを抜き出して、そのプロパティ値を取得したい場面がよくあります。本記事では、isActive プロパティが true のオブジェクトのみを対象に、id プロパティの値を配列として返す関数の実装方法を解説します。

サンプルデータ

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

const arr = [
    { id : "23", name : "Item 1", isActive : true},
    { id : "25", name : "Item 2", isActive : false},
    { id : "26", name : "Item 3", isActive : false},
    { id : "30", name : "Item 4", isActive : true},
    { id : "45", name : "Item 5", isActive : true}
];

要件

求められているのは、このようなオブジェクトの配列を引数として受け取り、isActive プロパティが true になっているオブジェクトだけを対象に、その id プロパティの値を新しい配列として返すJavaScript関数です。

実装コード（forループを使用する方法）

基本的なアプローチとしては、配列をループで走査し、条件に一致した要素の値だけを結果配列に追加していきます。

const arr = [
    { id : "23", name : "Item 1", isActive : true},
    { id : "25", name : "Item 2", isActive : false},
    { id : "26", name : "Item 3", isActive : false},
    { id : "30", name : "Item 4", isActive : true},
    { id : "45", name : "Item 5", isActive : true}
];

const findActive = (arr = []) => {
    const res = [];
    for(let i = 0; i < arr.length; i++){
        const obj = arr[i];
        const {
            id,
            isActive
        } = obj;
        if(isActive){
            res.push(id);
        }
    }
    return res;
};

console.log(findActive(arr));

ポイントは、分割代入（Destructuring）を使って各オブジェクトから id と isActive を取り出している点です。これにより、必要なプロパティだけを簡潔かつ明確に扱うことができます。

出力結果

コンソールには次のように出力されます。

[ '23', '30', '45' ]

補足：filter() と map() を使ったより簡潔な書き方

モダンなJavaScriptでは、filter() メソッドと map() メソッドを組み合わせることで、同じ処理を1行で書くこともできます。

const findActive = (arr = []) =>
    arr.filter(obj => obj.isActive).map(obj => obj.id);

console.log(findActive(arr)); // [ '23', '30', '45' ]

filter() で isActive が true の要素だけを絞り込み、続く map() で id の値だけを取り出しています。可読性が高く副作用もないため、実務ではこちらの書き方が好まれることが多いです。

まとめ

• 条件に合う要素だけを抽出するには、ループ処理または filter() を使用する。
• 抽出した要素から特定のプロパティ値を取り出すには、map() が便利。
• どちらの方法でも結果は同じですが、filter() + map() の組み合わせはより宣言的で読みやすいコードになります。