【JavaScript】複数オブジェクトをマージ（結合）する方法

記事の文字数：1093

JavaScriptで複数のオブジェクトを結合する場合は、Object.assign()メソッドまたはスプレッド構文を使用します。本記事では、それぞれの実装例と実行方法を解説します。

2024/9/15 2024/10/6更新

JavaScript

前提（検証環境）

Node.jsがインストールされていること。

# 確認したバージョン
$ node -v
v20.13.1

Node.jsをインストールしていない場合は、ブラウザから実行する場合をご参照ください。

Object.assign() を使用する方法

Object.assign()メソッド

Object.assign()は、第一引数に指定したコピー先のオブジェクトに、第二引数以降の全てのオブジェクトをマージするメソッドです。

// 構文
Object.assign(target, source1, source2, …);

上記の場合、targetに対してsource1, source2…をマージします。

検証コード（assign_test.js）

実際にコードを実行して確認します。
以下内容をファイル名：assign_test.jsで保存します。

const foods1 = { banana: 'バナナ', apple: 'りんご'};
const foods2 = { grapes: 'ぶどう', orange: 'オレンジ'};
Object.assign(foods1, foods2);

console.log(foods1);

実行コマンド（assign_test.js）

以下コマンドでファイルを実行します。

node assign_test.js

実行結果（assign_test.js）

以下のように、food1とfood2をマージした結果が、出力されることを確認できました。

{ banana: 'バナナ', apple: 'りんご', grapes: 'ぶどう', orange: 'オレンジ' }

スプレッド構文を使用する方法

スプレッド構文

スプレッド構文 (…food1) のように記載し、配列やオブジェクトの要素を展開する構文です。

検証コード（spread_syntax.js）

以下内容をファイル名：spread_syntax_test.jsで保存します。

const foods1 = { banana: 'バナナ', apple: 'りんご'};
const foods2 = { grapes: 'ぶどう', orange: 'オレンジ'};
const mergeFoods = { ...foods1, ...foods2 };

console.log(mergeFoods);

実行コマンド（spread_syntax.js）

node spread_syntax_test.js

実行結果（spread_syntax.js）

{ banana: 'バナナ', apple: 'りんご', grapes: 'ぶどう', orange: 'オレンジ' }

ブラウザから実行する場合

以下内容をファイル名：index.htmlで保存します。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>JavaScriptテスト</title>
</head>

<body>
    <div id="container">
        <button id="button">送信</button>
    </div>
    <script src="assign_test.js"></script>
</body>

</html>

Object.assign()を使用する方法で試します。
以下内容をファイル名：assign_test.jsで保存します。（※index.htmlと同階層に配置する。）

let btn = document.getElementById('button');

btn.addEventListener('click', function () {
    const foods1 = { banana: 'バナナ', apple: 'りんご' };
    const foods2 = { grapes: 'ぶどう', orange: 'オレンジ' };
    Object.assign(foods1, foods2);

    console.log(foods1);
})

ブラウザ起動

index.htmlをGoogle Chromeで起動し、Ctrl+Shift+Iで開発者ツールを表示し、Consoleをアクティブにします。

alt text

送信押下

送信ボタンを押下します。