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

記事の文字数：1093

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

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

JavaScript

前提（検証環境）

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

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

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

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

Object.assign()メソッド

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

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

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

検証コード（assign_test.js）

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

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

5
console.log(foods1);

実行コマンド（assign_test.js）

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

1
node assign_test.js

実行結果（assign_test.js）

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

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

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

スプレッド構文

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

検証コード（spread_syntax.js）

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

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

5
console.log(mergeFoods);

実行コマンド（spread_syntax.js）

1
node spread_syntax_test.js

実行結果（spread_syntax.js）

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

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

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

1
<!DOCTYPE html>
2
<html>
3

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

9
<body>
10
    <div id="container">
11
        <button id="button">送信</button>
12
    </div>
13
    <script src="assign_test.js"></script>
14
</body>
15

16
</html>

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

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

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

8
    console.log(foods1);
9
})

ブラウザ起動

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

alt text

送信押下

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