JavaScriptでmap()を使ってオブジェクト配列のネストを解除（フラット化）する方法

JavaScriptでネストされたオブジェクト配列をフラット化（ネスト解除）するには、map()メソッドを使うのが最もシンプルで効果的な方法です。map()は配列の各要素に対して処理を行い、新しい配列を返すため、入れ子になったプロパティを取り出して平坦な構造に変換するのに適しています。

ここでは、以下のようなネストされたオブジェクト配列を例に考えてみましょう。各学生データの中に、科目情報がsubjectDetailsとして入れ子になっています。

const studentDetails = [
    {
        "studentId": 101,
        "studentName": "John",
        "subjectDetails": {
            "subjectName": "JavaScript"
        }
    },
    {
        "studentId": 102,
        "studentName": "David",
        "subjectDetails": {
            "subjectName": "MongoDB"
        }
    }
];

このデータから、入れ子になっているsubjectNameを取り出し、フラットな1階層のオブジェクト配列に変換することを目標とします。

実装コード例

map()のコールバック関数内で、ネストされたプロパティ（obj.subjectDetails.subjectName）に直接アクセスし、新しいオブジェクトを作成します。

const studentDetails = [
    {
        "studentId": 101,
        "studentName": "John",
        "subjectDetails": {
            "subjectName": "JavaScript"
        }
    },
    {
        "studentId": 102,
        "studentName": "David",
        "subjectDetails": {
            "subjectName": "MongoDB"
        }
    }
];

const output = studentDetails.map(obj => ({
    studentId: obj.studentId,
    studentName: obj.studentName,
    subjectName: obj.subjectDetails.subjectName
}));

console.log(output);

プログラムの実行方法

上記のプログラムを実行するには、Node.js環境で以下のコマンドを使用します。

node fileName.js

実行結果

ここではファイル名をdemo92.jsとして保存しています。実行すると、以下のような出力が得られます。

PS C:\Users\Amit\JavaScript-code> node demo92.js
[
    { studentId: 101, studentName: 'John', subjectName: 'JavaScript' },
    { studentId: 102, studentName: 'David', subjectName: 'MongoDB' }
]

ご覧の通り、元々subjectDetailsの中に入れ子になっていたsubjectNameが、各オブジェクトの直下に配置されたフラットな構造に変換されました。

ポイント解説

• map()は元の配列を変更せず、新しい配列を返すため安全に使えます。
• アロー関数内でオブジェクトリテラルを返す場合は、({ ... })のように丸括弧で囲む必要があります。これを忘れると関数本体と解釈されてしまうので注意しましょう。
• ネストが深い場合も、同様にプロパティへのパスをたどるだけで対応可能です。