はいさい！オースティンやいびーん！
概要
JavaScript・ブラウザのネイティブ機能で回帰的クローンをする方法を紹介します！
それは、structuredCloneです。
これは、グローバルで定義されている関数で、現在のEvergreenブラウザ（Chrome、Safari、Edge等）ならサポートされています。
背景
JavaScript開発においてオブジェクトをクローンすることは常の課題です。
常套手段として以下のES6 Spreadがよく使われます。
const ob1 = { a: 1 };
const ob1ShallowClone = { ...ob1 }; // OR Object.create(ob1);
これはいわゆるShallow Cloneの手法です。基本的にこれでもの足りるケースが多いのですが、非常に大きな欠点があります。
それは、配列のようなオブジェクトは回帰的にクローンされず、オブジェクト参照がコピーされるにすぎないというところです。
以下の例で問題が顕著に現れます。
const beforeUserInput = {
title: 'サーバーからのデータ',
content: '編集されていない',
tags: ['js', 'ts']
}
const userInput = { ...beforeUserInput };
userInput.tags.push('death-to-lodash');
console.log(beforeUserInput.tags); // ['js', 'ts', 'death-to-lodash']
アキサミヨー！これでは元々のデータまで変わってしまう。
そこで、Deep Cloneが誕生します。
Deep Cloneは回帰的にクローンすることで、オブジェクトの中のオブジェクトをクローンすることです。
これまでどうやってDeep Cloneをしていたのか？
そうすると、同じオブジェクト参照ではなく、独立したオブジェクトを作ることができて、上記の問題を解決できます。
ここで問題なのですが、古くからDeep Cloneのネイティブの手段がなかったのです。
そこで、多くの人はこれまでLodashの_.cloneDeep()に頼ってきました。
しかし、この投稿の本題ですが、ネイティブの手段は今だと、あります。
それが、structuredCloneです。
しかも、それを知らなくても、Service Worker、Web Workerを使っているのなら、既に使っています。
なぜなら、Web Workerから情報をMain Threadに送る時に、structuredCloneが使われています。
structuredCloneの使い方
ごくごく簡単です。今でもDevelopers Consoleを開いてやってみてください。
これだけです。本当に素晴らしい。
structuredCloneのパフォーマンス
Lodashの_.cloneDeepと比較してみましょう。
//@ts-check
import * as _ from 'lodash'
const iterations = 300000;
const baseObject = () => ({
array1: [1, 2, 3, 4, 5],
array2: [[1], [2], [3]],
array3: [[[1]], [[2]], [[3]]],
obj1: {
arr1: [[[[1]]], [[[[2]]]], [[[[3]]]]],
},
});
const lodashCloneLoop = () => {
for (let index = 0; index < iterations; index++) {
const obj = baseObject();
_.cloneDeep(obj);
}
};
const nativeCloneLoop = () => {
for (let index = 0; index < iterations; index++) {
const obj = baseObject();
structuredClone(obj);
}
};
/**
* @param {() => any} func
*/
function timeIt(func) {
const startTime = Date.now();
func();
const endTime = Date.now();
return endTime - startTime;
}
console.log("lodash cloneDeep time (ms): ", timeIt(lodashCloneLoop));
console.log("native structuredClone time (ms): ", timeIt(nativeCloneLoop));
上記のコードをESBuildでコンパイルしてブラウザで実行します。
これだ！やはり、ネイティブが早かったです。なんと25%も処理時間が早いわけです。
なぜLodashを使うべきでない
使う必要性はほぼほぼないからです。
それに、二つの問題点があります。
- Bundle Sizeが大きくなる
- 基本的にLodashよりES6のネイティブ関数の方が早い
- Lodashを知らない人が読むのに苦労する（_.partialRightは本当に解せない）
唯一、Lodashにあってネイティブ機能にない困るものは、_.isEqual。これは便利だなと思いますが、今後、JavaScriptにもRecordおよびTupleがECMAScriptにも含まれるので、時間の問題です。
structuredCloneができないこと
structuredCloneは構造化複製アルゴリズムを使って回帰的クローンを実現しているのですが、クローンできないものがあります。
それは以下の主なものです。
- 関数（() => {}など）
- DOM Node
というので、99.9%の場合は全く気にする必要はないのです。
まとめ
以上、structuredCloneを紹介してまいりました。
感動しましたか？僕は感動しています。
もっと早く気づくべきでした、すぐそばに運命の相手がずっといることに。
ぜひstructuredCloneを使っていきましょう！