JavaScriptで2つの配列からJSONオブジェクトを作成する方法（forEachの活用例）

はじめに

JavaScriptの開発では、複数の配列を組み合わせて1つのオブジェクト（JSON形式のデータ）にまとめたいケースがよくあります。例えば、料理名の配列と、それぞれの料理に対応する食材リストの配列がある場合、これらをキーと値のペアを持つオブジェクトに変換すると、データの管理や操作が格段に行いやすくなります。

本記事では、2つの配列を受け取り、それらを対応付けて新しいオブジェクトを生成するJavaScript関数の実装方法を解説します。

前提となるデータ

以下のような2つの配列を想定します。

const meals = ["breakfast", "lunch", "dinner"];
const ingredients = [
    ["eggs", "yogurt", "toast"],
    ["falafel", "mushrooms", "fries"],
    ["pasta", "cheese"]
];

ここで求められているのは、2つ目の配列内の各サブ配列を、1つ目の配列の対応する文字列（キー）にマッピングすることです。

つまり、上記の配列からは次のような出力が得られることが理想です。

const output = {
    "breakfast": ["eggs", "yogurt", "toast"],
    "lunch": ["falafel", "mushrooms", "fries"],
    "dinner": ["pasta", "cheese"]
};

実装方法：forEachを使った変換

この処理を実現するコードは以下の通りです。ポイントは、forEachメソッドの第2引数としてthisArgを渡し、結果を格納するオブジェクトをthis経由で参照できるようにしている点です。

const meals = ["breakfast", "lunch", "dinner"];
const ingredients = [
    ["eggs", "yogurt", "toast"],
    ["falafel", "mushrooms", "fries"],
    ["pasta", "cheese"]
];

const combineMealAndIngredient = (meals, ingredients) => {
    const res = {};
    meals.forEach(function (el, ind) {
        this[el] = ingredients[ind];
    }, res);
    return res;
};

console.log(combineMealAndIngredient(meals, ingredients));

コードの解説

• res オブジェクト： 最終的な結果を格納するための空のオブジェクトです。
• forEach の thisArg： forEachの第2引数にresを渡すことで、コールバック関数内のthisがresを指すようになります。これにより、各要素をキーとして動的にプロパティを追加できます。
• インデックスの活用： コールバック関数の第2引数ind（インデックス番号）を使うことで、ingredients配列の対応するサブ配列にアクセスしています。

実行結果

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

{
    breakfast: [ 'eggs', 'yogurt', 'toast' ],
    lunch: [ 'falafel', 'mushrooms', 'fries' ],
    dinner: [ 'pasta', 'cheese' ]
}

代替手段：Object.fromEntries を使ったモダンな書き方

ES2019以降の環境では、mapとObject.fromEntriesを組み合わせることで、より簡潔に関数型スタイルで書くこともできます。

const combineMealAndIngredient = (meals, ingredients) =>
    Object.fromEntries(meals.map((el, ind) => [el, ingredients[ind]]));

この方法では、mapによって「キーと値のペア」からなる配列を生成し、Object.fromEntriesがそれを一括してオブジェクトに変換します。可読性が高く、元の配列を破壊しないため、モダンなJavaScript開発ではこちらが推奨されることが多いです。

まとめ

2つの配列を対応付けてオブジェクト化する処理は、forEachのthisArgを利用する方法でも、Object.fromEntriesとmapを組み合わせる方法でも実装できます。データ構造を整理して扱いやすくするこのテクニックは、APIレスポンスの整形や設定データの生成など、さまざまな場面で役立つので、ぜひ覚えておきましょう。