【JavaScript】オブジェクトの配列から特定の名前に紐づくユーザーIDをすべて取得する方法

JavaScriptでは、ユーザー名と一意のIDをマッピングしたオブジェクトの配列を扱う場面はよくあります。例えば、次のような配列を考えてみましょう。

const arr = [
    {"4": "Rahul"},
    {"7": "Vikram"},
    {"6": "Rahul"},
    {"3": "Aakash"},
    {"5": "Vikram"}
];

この配列を見ると分かるように、同じ名前が複数のIDに紐づくことはあっても、1つのIDが複数の名前に対応することはありません。

実現したいこと

ここで作成するのは、以下のような仕様の関数です。

• 第1引数: オブジェクトの配列を受け取る
• 第2引数: 検索対象となる名前の文字列を受け取る
• 戻り値: 第2引数で指定した名前に紐づくすべてのIDを格納した配列を返す

実装例(forループを使う方法)

まずは、forループを使った基本的な実装から見ていきましょう。

const arr = [
    {"4": "Rahul"},
    {"7": "Vikram"},
    {"6": "Rahul"},
    {"3": "Aakash"},
    {"5": "Vikram"}
];
const name = 'Vikram';
const findUserId = (arr, name) => {
    const res = [];
    for(let i = 0; i < arr.length; i++){
        const key = Object.keys(arr[i])[0];
        if(arr[i][key] !== name){
            continue;
        };
        res.push(key);
    };
    return res;
};
console.log(findUserId(arr, name));

コードの解説

• Object.keys() を使って、各オブジェクトのキー(つまりID)を取得します。各オブジェクトはキーを1つしか持たないため、[0] で最初の要素を取り出せば十分です。
• オブジェクトの値が検索対象の名前と一致しない場合は continue で次の要素へスキップします。
• 一致した場合のみ、そのキー(ID)を結果配列 res に追加します。
• ループが完了したら、収集したIDの配列を返します。

出力結果

上記のコードを実行すると、コンソールには次のように出力されます。

['7', '5']

'Vikram' という名前に紐づくIDは '7' と '5' の2つであるため、正しく両方が取得できていますね。

別解:filterとmapを組み合わせたモダンな書き方

forループを使わず、filter() と map() を組み合わせることで、より宣言的で読みやすいコードに書き換えることもできます。

const findUserId = (arr, name) =>
    arr
        .filter(obj => Object.values(obj)[0] === name)
        .map(obj => Object.keys(obj)[0]);

console.log(findUserId(arr, 'Vikram')); // ['7', '5']

この方法では、まず filter() で名前が一致するオブジェクトだけを抽出し、続いて map() でそれらのキー(ID)だけを取り出しています。処理の意図がひと目で分かるため、チーム開発などでも可読性の高いコードと言えるでしょう。