使用法

@wordpress/is-shallow-equal のデフォルトエクスポートは、2つのオブジェクトまたは配列を受け入れる関数です： 

  1. import isShallowEqual from '@wordpress/is-shallow-equal';
  3. isShallowEqual( { a: 1 }, { a: 1, b: 2 } );
  4. // ⇒ false
  6. isShallowEqual( { a: 1 }, { a: 1 } );
  7. // ⇒ true
  9. isShallowEqual( [ 1 ], [ 1, 2 ] );
  10. // ⇒ false
  12. isShallowEqual( [ 1 ], [ 1 ] );
  13. // ⇒ true

すでに扱っている値のタイプがわかっている場合は、特定の実装をインポートできます： 

  1. import { isShallowEqualArrays } from '@wordpress/is-shallow-equal';
  2. import { isShallowEqualObjects } from '@wordpress/is-shallow-equal';

浅い比較は、深い比較とは異なり、各メンバーを他のメンバーと厳密に等しいと比較します。つまり、配列やオブジェクトはその参照によって比較され、値によっては比較されません（詳細は JavaScriptにおけるオブジェクトの等価性を参照してください）。ネストされたオブジェクトを値で比較する必要がある場合は、代わりに fast-deep-equal を使用することを検討してください。 

  1. import isShallowEqual from '@wordpress/is-shallow-equal';
  2. import fastDeepEqual from 'fast-deep-equal/es6'; // deep comparison
  4. let object = { a: 1 };
  6. isShallowEqual( [ { a: 1 } ], [ { a: 1 } ] );
  7. // ⇒ false
  9. fastDeepEqual( [ { a: 1 } ], [ { a: 1 } ] );
  10. // ⇒ true
  12. isShallowEqual( [ object ], [ object ] );
  13. // ⇒ true

理論的背景

浅い等価性ユーティリティはすでに数多く存在します。これらの操作は、重要なホットコードパスの中心にあることが多いため、WordPressの貢献者は既存のソリューションでは部分的にしか満たされない特定の要件を持っていました。

特に、次のことを考慮する必要があります…

  • 1. …非プリミティブでありながら参照的に等しいメンバーの値を等しいと見なすこと。
  • 2. …値のタイプに関係なく、インターフェースを通じて単一の関数を提供すること。
  • 3. …基本的な浅い等価性の機能のみを提供すること。
  • 4. …参照の同一性を等しいと見なすことを予測し、最適化すること。
  • 5. …Facebook以外のプロジェクトでの使用を意図すること。
  • 6. …最もパフォーマンスの高い実装であること。

ベンチマーク

以下の結果は、MacBook Pro (Late 2016) 2.9 GHz Intel Core i7上のNode v10.15.3 (LTS)で生成されました。

@wordpress/is-shallow-equal (type specific) (object, equal) x 4,519,009 ops/sec ±1.09% (90 runs sampled) >@wordpress/is-shallow-equal (type specific) (object, same) x 795,527,700 ops/sec ±0.24% (93 runs sampled) >@wordpress/is-shallow-equal (type specific) (object, unequal) x 4,841,640 ops/sec ±0.94% (93 runs sampled) >@wordpress/is-shallow-equal (type specific) (array, equal) x 106,393,795 ops/sec ±0.16% (94 runs sampled) >@wordpress/is-shallow-equal (type specific) (array, same) x 800,741,511 ops/sec ±0.22% (95 runs sampled) >@wordpress/is-shallow-equal (type specific) (array, unequal) x 49,178,977 ops/sec ±1.99% (82 runs sampled)

@wordpress/is-shallow-equal (object, equal) x 4,449,367 ops/sec ±0.31% (91 runs sampled) >@wordpress/is-shallow-equal (object, same) x 796,677,179 ops/sec ±0.23% (94 runs sampled) >@wordpress/is-shallow-equal (object, unequal) x 4,989,529 ops/sec ±0.30% (91 runs sampled) >@wordpress/is-shallow-equal (array, equal) x 44,840,546 ops/sec ±1.18% (89 runs sampled) >@wordpress/is-shallow-equal (array, same) x 794,344,723 ops/sec ±0.24% (91 runs sampled) >@wordpress/is-shallow-equal (array, unequal) x 49,860,115 ops/sec ±1.73% (85 runs sampled)

shallowequal (object, equal) x 3,702,126 ops/sec ±0.87% (92 runs sampled) >shallowequal (object, same) x 796,649,597 ops/sec ±0.21% (92 runs sampled) >shallowequal (object, unequal) x 4,027,885 ops/sec ±0.31% (96 runs sampled) >shallowequal (array, equal) x 1,684,977 ops/sec ±0.37% (94 runs sampled) >shallowequal (array, same) x 794,287,091 ops/sec ±0.26% (91 runs sampled) >shallowequal (array, unequal) x 1,738,554 ops/sec ±0.29% (91 runs sampled)

shallow-equal (type specific) (object, equal) x 4,669,656 ops/sec ±0.34% (92 runs sampled) >shallow-equal (type specific) (object, same) x 799,610,214 ops/sec ±0.20% (95 runs sampled) >shallow-equal (type specific) (object, unequal) x 4,908,591 ops/sec ±0.49% (93 runs sampled) >shallow-equal (type specific) (array, equal) x 104,711,254 ops/sec ±0.65% (91 runs sampled) >shallow-equal (type specific) (array, same) x 798,454,281 ops/sec ±0.29% (94 runs sampled) >shallow-equal (type specific) (array, unequal) x 48,764,338 ops/sec ±1.48% (84 runs sampled)

is-equal-shallow (object, equal) x 5,068,750 ops/sec ±0.28% (92 runs sampled) >is-equal-shallow (object, same) x 17,231,997 ops/sec ±0.42% (92 runs sampled) >is-equal-shallow (object, unequal) x 5,524,878 ops/sec ±0.41% (92 runs sampled) >is-equal-shallow (array, equal) x 1,067,063 ops/sec ±0.40% (92 runs sampled) >is-equal-shallow (array, same) x 1,074,356 ops/sec ±0.20% (94 runs sampled) >is-equal-shallow (array, unequal) x 1,758,859 ops/sec ±0.44% (92 runs sampled)

shallow-equals (object, equal) x 8,380,550 ops/sec ±0.31% (90 runs sampled) >shallow-equals (object, same) x 27,583,073 ops/sec ±0.60% (91 runs sampled) >shallow-equals (object, unequal) x 8,954,268 ops/sec ±0.71% (92 runs sampled) >shallow-equals (array, equal) x 104,437,640 ops/sec ±0.22% (96 runs sampled) >shallow-equals (array, same) x 141,850,542 ops/sec ±0.25% (93 runs sampled) >shallow-equals (array, unequal) x 47,964,211 ops/sec ±1.51% (84 runs sampled)

fbjs/lib/shallowEqual (object, equal) x 3,366,709 ops/sec ±0.35% (93 runs sampled) >fbjs/lib/shallowEqual (object, same) x 794,825,194 ops/sec ±0.24% (94 runs sampled) >fbjs/lib/shallowEqual (object, unequal) x 3,612,268 ops/sec ±0.37% (94 runs sampled) >fbjs/lib/shallowEqual (array, equal) x 1,613,800 ops/sec ±0.23% (90 runs sampled) >fbjs/lib/shallowEqual (array, same) x 794,861,384 ops/sec ±0.24% (93 runs sampled) >fbjs/lib/shallowEqual (array, unequal) x 1,648,398 ops/sec ±0.77% (92 runs sampled)
リポジトリをクローンし、依存関係をインストールし、benchmark/index.js スクリプトを実行することで、ベンチマークを自分で実行できます： 

  1. git clone https://github.com/WordPress/gutenberg.git
  2. npm install
  3. npm run build:packages
  4. node ./packages/is-shallow-equal/benchmark

このパッケージへの貢献

これはGutenbergプロジェクトの一部である個別のパッケージです。このプロジェクトはモノレポとして整理されています。特定の目的を持つ複数の自己完結型ソフトウェアパッケージで構成されています。このモノレポ内のパッケージは、npmに公開され、WordPressや他のソフトウェアプロジェクトで使用されています。

このパッケージやGutenberg全体への貢献について詳しく知りたい場合は、プロジェクトの主要な貢献者ガイドをお読みください。