配列やオブジェクトをマージする時に便利なJSライブラリ「deepmerge」

javascript で 配列やオブジェクトのマージが簡単に出来る ライブラリ「deepmerge」の紹介です。

 javascriptで 配列の要素を結合させることは難しいことではありませんが、オブジェクト克つ、階層が深くなったりすると思っていた通りにならなかったりなど、少々めんどうです。

 近年であると、複数のサーバーからデータを取得 ( ajax )したり、カレンダーなどのを代表する外部ライブラリと連携させるとなるとオブジェクトの加工や要素の結合が必要になる自体も珍しくありません。

そんな配列やオブジェクトのマージが簡単に出来るようになるライブラリが「deepmerge」です。
 

- シンプルな配列から複雑なオブジェクトまで、要素のマージ ( 要素の結合 ) が簡単にできるようになります

 deepmerge は プロジェクトルート上から ' npm ' 又は ' yarn ' コマンドを使ってインストールします。また、ブラウザ上から直接読み込めるように UMDビルドされたバージョンも用意されています。

# npm 
npm install deepmerge
# yarn
yarn add deepmerge
# cdn *スクリプトタグから読み込めます
https://unpkg.com/deepmerge/dist/umd.js

 
 webpack で使う場合は コンフィグファイルに下記の alias を 追加する必要があります。

// e.x.p : webpack.config.js
alias: {
 deepmerge$: path.resolve(__dirname, 'node_modules/deepmerge/dist/umd.js'),
}

 deepmerge の使い方は簡単で ライブラリを読み込んだ後、結合したい要素を引数に渡すだけで 使うことができます。

const merge = require("deepmerge"); // CommonJS
import merge from "deepmerge"; // ES*

let obj1 = { data: [{ id: 1 }] };

let obj2 = { data: [{ id: 2 }] };

// 要素を結合
merge(obj1, obj2);
// { data: [ { id: 1 }, { id: 2 } ] }

// CDNを通してブラウザからUMD版を読み込む場合は deepmergeメソッドから呼び出せます
// deepmerge(obj1, obj2); // 

マージさせたい要素が 2つ以上 ある場合は ' all ' メソッドを使います。

const merge = require("deepmerge");

let obj1 = { data: [{ id: 1 }] };
let obj2 = { data: [{ id: 2 }] };
let obj3 = { data: [{ id: 3 }] };

// all メソッド
merge.all([obj1, obj2, obj3]);
// { data: [ { id: 1 }, { id: 2 }, { id: 3 } ] }

下記のような階層が複雑なオブジェクトでも、要素が問題なくマージされます。

let a = {
	foo: { bar: 3 },
	array: [{
		does: 'work',
		too: [ 1, 2, 3 ]
	}]
};

let b = {
	foo: { baz: 4 },
	quux: 5,
	array: [{
		does: 'work',
		too: [ 4, 5, 6 ]
	}, {
		really: 'yes'
	}]
};

// a と b をマージ
merge(a, b);

/** ## output
{
	foo: {
		bar: 3,
		baz: 4
	},
	array: [{
		does: 'work',
		too: [ 1, 2, 3 ]
	}, {
		does: 'work',
		too: [ 4, 5, 6 ]
	}, {
		really: 'yes'
	}],
	quux: 5
}
*/

// シンプルな配列の場合
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

merge(arr1, arr2); // [ 1, 2, 3, 4, 5, 6 ]

 deepmerge はポピュラーなライブラリで、既に非常に多くのオープンソース プロジェクトの内部で使用されています。

配列やオブジェクトの結合をする必要が出てきた時は 非常に役立ちそうなライブラリです。

GitHub : KyleAMathews/deepmerge