無料JSONマージツール – JSONオブジェクトを結合

入力（JSONオブジェクトの配列）

マージ出力

JSONマージとは？

default.jsonの設定があって、production.jsonがいくつかの設定だけを上書きする — そして単一のマージ結果が必要。まさにそのためのツールです。JSONのマージとは、2つ以上のJSONオブジェクトを1つに結合することです。シャローマージでは、後のオブジェクトが共通キーについて前のオブジェクトを上書きします。ディープマージ（Object.assignのようなパターン）では、ネストされたオブジェクトが完全に置き換えられるのではなく、再帰的に結合されます。

このツールはJSONオブジェクトの配列を期待します。シャローまたはディープモードで順番にマージします。結果は単一のオブジェクトです。処理はブラウザ内で行われます。

このツールの使い方

JSON配列を入力

JSONオブジェクトの配列を貼り付けます。例：[{"a": 1}, {"b": 2}, {"a": 3}]。順序が重要で、後のオブジェクトが競合するキーで前のオブジェクトを上書きします。ディープまたはシャローでマージ動作を選択します。

出力を確認

右のパネルにマージされたオブジェクトが表示されます。シャローモードでは、{"a": 1, "b": 2}と{"a": 3}のマージ結果は{"a": 3, "b": 2}です。ディープモードでは、ネストされたオブジェクトが再帰的にマージされます。

コピーまたはダウンロード

コピーまたはダウンロードで結果を取得します。フォーマットにはJSONフォーマッターを、検証にはJSONバリデーターを使用してください。

JSONマージが役立つ場面

設定ファイルのマージは一般的なユースケースです。default.jsonとproduction.jsonがあり、productionが必要なキーのみを上書きするようにマージしたい場合。ディープマージはネストされたデフォルトを再帰的に結合します。複数ソースのAPIレスポンスや、ベーステンプレートと環境固有のオーバーライドからオブジェクトを構築する場合、マージで単一の結合オブジェクトが得られます。JSONフォーマッターで結果を読みやすくフォーマットできます。

JSONマージの例

2つの加入者設定オブジェクトをマージする例です。後のオブジェクトが競合するキーで前のオブジェクトを上書きします。

例：加入者設定のマージ

入力（マージするオブジェクトの配列）:

入力

マージ出力:

出力

シャロー vs ディープマージ

シャローマージ：両方のオブジェクトにキーがある場合、後のオブジェクトの値が前のオブジェクトを完全に置き換えます。ネストされたオブジェクトはマージされず、置き換えられます。ディープマージ：ネストされたオブジェクトは再帰的にマージされます。したがって{"a": {"b": 1}}と{"a": {"c": 2}}のマージは、ディープモードで{"a": {"b": 1, "c": 2}}、シャローモードで{"a": {"c": 2}}になります。JavaScriptのObject.assignはシャローマージを行います。Lodash mergeなどのライブラリはディープマージを行います。

JSON仕様はオブジェクトをキーと値のペアの順序付けられていないコレクションとして定義しています。マージの順序が重要で、後の値が前の値を上書きします。PostmanやfetchのAPIレスポンスでは、設定のマージやデフォルトとオーバーライドの結合が一般的です。正式な標準はRFC 8259です。MDNのJSONガイドでパースとシリアライズを解説しています。

よくある質問

JavaScriptで2つのJSONオブジェクトをマージするには？

シャローマージにはスプレッド演算子を使用します：{...objA, ...objB}またはObject.assign({}, objA, objB)。ディープマージにはLodash _.merge()などのライブラリを使用します。このツールはコードなしで両方に対応します。

ディープマージとシャローマージの違いは？

シャローマージでは、両方のオブジェクトに同じキーがある場合、後のオブジェクトの値が前のオブジェクトを完全に置き換えます（ネストされたオブジェクトも含む）。ディープマージでは、ネストされたオブジェクトが再帰的に結合されます。{"a": {"b": 1}}と{"a": {"c": 2}}のディープマージ結果は{"a": {"b": 1, "c": 2}}で、両方のキーが保持されます。

オーバーライド付きのJSON設定ファイルをマージするには？

デフォルトを最初にオーバーライドを最後にして、JSON配列として設定を貼り付けます：[defaultConfig, productionConfig]。設定にネストされたオブジェクトがある場合はディープマージを使用してください。

マージ中にJSONオブジェクト内の配列はどのように扱われますか？

配列は連結ではなく置き換えられます。オブジェクトAが"items": [1, 2]、オブジェクトBが"items": [3]の場合、結果は"items": [3]になります。

データはサーバーに送信されますか？

いいえ。マージはブラウザ内で完全に実行されます。JSONがデバイスから出ることはありません。

JSONマージ