【JavaScript】ネストされた配列のキーと値のペアをオブジェクトの配列に変換する方法

JavaScriptでは、APIのレスポンスや設定ファイルなどで「キーと値のペアが配列として入れ子になったデータ」を目にすることがあります。この記事では、そのようなネストされた配列を、扱いやすいオブジェクトの配列へ変換する方法を解説します。

変換前のデータ構造

たとえば、次のような「配列の中に配列があり、さらにその中にも配列が存在する」データを想定します。

const arr = [
    [
        ['firstName', 'Joe'],
        ['lastName', 'Blow'],
        ['age', 42],
        ['role', 'clerk'],
        [
            ['firstName', 'Mary'],
            ['lastName', 'Jenkins'],
            ['age', 36],
            ['role', 'manager']
        ]
    ]
];

このデータには2人分のユーザー情報が含まれており、各ユーザーは「プロパティ名, 値」という形式のペアの集まりで表現されています。

目標となる出力

求められているのは、ユーザーごとに1つのオブジェクトを持つ、次のような配列です。

const output = [
    { firstName: 'Joe', lastName: 'Blow', age: 42, role: 'clerk' },
    { firstName: 'Mary', lastName: 'Jenkins', age: 36, role: 'manager' }
];

実装コード

変換のポイントは次の3ステップです。

1. flat(Infinity) で配列を完全に平坦化する
2. 平坦化された配列から2要素ずつ取り出し、キーと値のペアを復元する
3. 新しいユーザーの始まり（firstName の再登場）を検出したら、そこでオブジェクトを切り替える

これらを実装すると、コードは以下のようになります。

const convertToObject = (arr = []) => {
    // ステップ1: 配列を完全に平坦化する
    const flat = arr.flat(Infinity);

    const result = [];
    let obj = {};

    // ステップ2: 2要素ずつキーと値のペアとして読み取る
    for (let i = 0; i < flat.length; i += 2) {
        const key = flat[i];
        const value = flat[i + 1];

        // ステップ3: 新しいユーザーの開始を検出してオブジェクトを切り替える
        if (key === 'firstName' && Object.keys(obj).length !== 0) {
            result.push(obj);
            obj = {};
        }
        obj[key] = value;
    }

    // 最後のユーザーを忘れずに追加する
    if (Object.keys(obj).length !== 0) {
        result.push(obj);
    }

    return result;
};

console.log(convertToObject(arr));

実行結果

コンソールには次の内容が出力されます。

[
    {
        firstName: 'Joe',
        lastName: 'Blow',
        age: 42,
        role: 'clerk'
    },
    {
        firstName: 'Mary',
        lastName: 'Jenkins',
        age: 36,
        role: 'manager'
    }
]

注意点：this を使うアプローチは避けよう

アロー関数の中で this を参照してオブジェクトを組み立てる実装例を見かけることがありますが、アロー関数は自身の this を持たないため、意図どおりには動作しません。外側のスコープ（グローバルやモジュール）の this を参照してしまい、'firstName,Mary' のような予期しないキーを持つ壊れたオブジェクトが生成される原因になります。

データ整形を行う場合は、flat()・reduce()・Object.fromEntries() など、配列やオブジェクト操作向けのメソッドを素直に活用するのが安全です。

まとめ

• Array.prototype.flat(Infinity) を使えば、どれだけ深くネストした配列でも一括で平坦化できる。
• 平坦化後は「偶数番目＝キー、奇数番目＝値」という規則性を利用してペアを復元できる。
• firstName のような区切りとなるキーを検出することで、複数ユーザーを個別のオブジェクトに分割できる。