こんにちは。 今回はJavaScriptで、意外と知られていない<code>Set</code>オブジェクトを使った配列の重複削除の実装方法を紹介します。パフォーマンスに優れていますが、何でも<code>Set</code>を使えばいいという話でもないということも紹介します。

<h2 id="h63f4206de3">Setに入れてArrayに戻す</h2>配列の重複を削除する方法はいくつかありますが、パフォーマンス的に最も優れているのは<code>Set</code>オブジェクトを使う方法です。<code>Set</code>オブジェクトは一意の値を入れておくことができるコレクションで、複数の同じ値を入れても一意な値だけが残ります。 次のように使います。

コンストラクターに配列を入れるだけで重複が削除されたコレクションになります。出力を見て分かるように、入れた順番が保持されます。 <code>add</code>、<code>delete</code>、<code>has</code>といったメソッドや<code>size</code>といったプロパティが用意されているので、基本的に配列と同じように扱うことができます。一方で、メソッドの名前が違ったり<code>filter</code>や<code>map</code>といった反復処理メソッドが<code>Set</code>には用意されていなかったりするので、全く同じように扱うことはできません。 そんなときはスプレッド構文で<code>Array</code>に変換すればいいだけです。

<h3 id="he0bbe55824">IE11では使えない</h3><code>Set</code>オブジェクトはInternet Explorerでは使うことができません。厳密には、コンストラクターが使えなかったり、一意性（等価性）の判定方法が他と異なったりするので実用的でないです。Internet Explorerの最新版であるIE11も2022年6月にはサポートが終了するので、よほどのことが無ければ切ってしまって問題ないはずです。<s>EdgeのIEモードは知りません。</s><h2 id="h5787b62f83">Setはパフォーマンス優秀</h2><code>Set</code>オブジェクトを使った重複削除は、他の方法よりもパフォーマンスに優れています。それを確認するために他によく使われている手法と比べてみましょう。<h3 id="h5c4bbe25bc">filterでインデックス比較</h3>まず最初は<code>filter</code>メソッドを使ってインデックス比較をする方法です。

コールバック関数で要素を1つずつ見ていき、その要素の値が最初に見つかったインデックス（<code>indexOf</code>メソッド）とその要素自体のインデックスを比較します。それが一致したときに<code>true</code>を返せば、それぞれの値で最初に見つかったもののみが取り出され、重複が無くなっているというものです。 正直直感的ではないです。また、各要素を見るループの中でインデックスを探しに行っているため二重のループになっています。計算量が多くなることは容易に想像できるでしょう。<h3 id="hbe40714559">愚直に重複チェック</h3>次は、結果用の配列を新しく作り、その配列に存在しない値だけ追加していくという愚直な方法です。自分で重複無く配列を作れと言われたら最初に思いつく方法かもしれません。

配列の各要素が結果用の配列（<code>deduplicatedArray</code>）に含まれていないときだけ追加します。コード量は多くなってしまいますが、<code>filter</code>を使う場合と比べて直感的かなと思います。計算量については同じく二重ループになっていますが、結果用の配列の要素数が少ないうちは計算量も少ないので、<code>filter</code>を使う場合よりは良いことが予想できます。<h3 id="hcac356e993">Setオブジェクトを使う場合</h3>最後はおすすめの<code>Set</code>です。

コードもシンプルですね。重複削除のコードに見えるかは<code>Set</code>での重複削除を知っているか次第な気はしますが、少なくともすっきりしています。<h3 id="h1450b747cd">パフォーマンス比較</h3>今回は、0～1000の数値をN個ランダムに入れた配列を用意し、それを重複削除するのにかかった処理実行時間を計測しました。5種類のシード値で生成した乱数表を用いた配列で3つの実装を実行し、5回の平均を取っています。配列の要素数は100個、1000個、10000個、100000個、1000000個、10000000個で試しました。その結果がこちらです。

<code>Set</code>オブジェクトを使う方法が圧倒的に実行時間が短いことが分かります。100万個の要素の重複削除でも200ミリ秒もかかっていません。<code>filter</code>でインデックス比較する方法では10秒近くもかかっています。桁違いです。ちなみに横軸を対数目盛にすると綺麗に直線になります（それはそう）。 ちなみに愚直に重複チェックをする方法では、前述の通り重複する個数が増えるほど重複チェックの計算量が<code>filter</code>の場合よりも減っていくので、1000個まではほぼ同じところが桁が増えるにつれて大きく差が開いてきます。<h2 id="h9901cabed5">Setの弱点</h2>この結果を見ると重複削除は問答無用で<code>Set</code>オブジェクトを使うのがいいと思ってしまいますが、<code>Set</code>オブジェクトにも弱点はあります。それは厳密等価演算子（<code>===</code>）で比較できるプリミティブしか正しく重複削除できないということです。例を見てみましょう。

座標を想定した<code>x</code>と<code>y</code>の2つのプロパティを持つオブジェクトの配列で重複削除するコードです。座標が一致すれば重複としてほしいところですが、残念ながら<code>{x: 2, y: 3} === {x: 2, y: 3}</code>は<code>true</code>にはなってくれません。<code>Set</code>にはオブジェクトを入れることもできますが、オブジェクト参照が入るため同一のオブジェクトを指す場合でないと一意にはなりません。 この場合はおとなしく愚直に比較するのが良いでしょう。

比較ロジックを自分で書きたい場合やはり愚直に比較していくしかないですね。<h2 id="hbfac7c80a3">大事なこと</h2>配列の重複削除には圧倒的パフォーマンスを理由に<code>Set</code>を使うことをおすすめしておきながら、愚直な方法のほうがより実用的な場合もあるのを見てきました。大事なのは、どれか1つの方法にこだわるのではなくその時々に合った方法を使うことです。 とんでもなく大量のデータを扱うとか、とんでもない頻度で処理を行うみたいな場合であればパフォーマンスに全振りした書き方が良いでしょう。しかしJavaScriptで書く程度の重さの処理であれば、上の実験でも分かるように1ミリ秒も無い体感できない差としてしか表れてきません。であれば、コードの可読性・一貫性のほうが大事になってきます。 個人的には愚直な方法が分かりやすくて好きです。もちろん<code>Set</code>での重複削除を知った今となっては<code>Set</code>を使って書きたくなりますが、その方法を知らない人が見ても分かりやすいかと言われると微妙です（一言コメントを書けばいいですが）。

というわけで今回は、JavaScriptの<code>Set</code>オブジェクトを使って配列の重複削除を実装する方法を紹介しました。画期的な方法でも向き不向きはあるので、パフォーマンスと可読性のバランスを見て実装方法を決められると良いですね。 それではまた。

【JavaScript】配列の重複削除はSetを使うと速い【パフォーマンス比較と注意点】

こんにちは。 サーバーサイドでJavaScriptを実行できるNode.jsですが、複数のプロジェクトを同時に開発するにはバージョン管理が必須です。Macではnodebrewやnodenvなどのバージョン管理ツールを使って管理することが多いですが、最近よく聞くVoltaというバージョン管理ツールを使ってみたところなかなか良かったので紹介します。

<h2 id="h8dd437f69b">Node.jsのバージョン管理ツール</h2>Node.jsに限らずランタイムで複数の安定バージョンが公開されている場合、複数のプロジェクトそれぞれで使用するランタイムバージョンが異なる場合があります。もちろん基本的に上位バージョンは後方互換性（上位互換性）があるため一番上のバージョンに合わせておけばいいですが、製品レベルの開発だと実際の実行環境のバージョンに合わせて開発するべきです。 そんなときに役に立つのがバージョン管理ツールです。複数のバージョンのランタイムをインストールし、必要なときにバージョンを切り替えて実行することができるようにするものです。Windowsだとnodist、Macだとnodebrewやnodenvなどをよく見ます。ちなみにこのブログもNode.jsで開発していますが、個人開発なのと特にバージョンにこだわりがないのでバージョン管理ツールは使っていません。また今回は、仕事で使っているMacでの環境がメインの話になります。<h2 id="hd966510369">Voltaとは</h2>今回おすすめするバージョン管理ツールがVoltaです。Voltaは2020年12月に正式版が公開された比較的新しいバージョン管理ツールで、公式には「簡単なJavaScriptツールマネージャー」と紹介されています。 公式は以下3つを特徴として挙げています。<ul><li>速い　　　：Rustで作られているのでサクサク動く</li><li>信頼できる：プロジェクトメンバーがみんな同じツールを使える</li><li>万能　　　：OSやバージョンに限らず1つのコマンドだけあればいい</li></ul>VoltaはWindowsでもUNIX系OSでも動きます。また後述しますが、プロジェクトごとのNode.jsバージョンの固定と、その設定の他の開発者との共有が簡単にできます。コマンドも実にシンプルで分かりやすいです。<h2 id="hccb5ffb3cf">Voltaのインストール</h2>VoltaはUNIX系OSでは以下のコマンドで簡単にインストールすることができます。

macOSのデフォルトのシェルはbashからzshに切り替わっていますが、コマンドは<code>bash</code>のままでOKです。Windowsの場合はインストーラーでのインストールになりますが、シンボリックリンクを利用するためOSの開発者モードを有効にする必要があります。少し扱いづらいところがあるため、Windowsの場合はWSL（Windows Subsystem for Linux）で開発するのがいいかもしれません（その場合上のコマンドでインストールできます）。 ちなみにHomebrewでのインストールも可能ですが、公式がcurlでのインストールを勧めているのでおとなしく従いましょう。パッケージ管理ツールでバージョン管理ツールを管理するのもややこしいですしね。<h2 id="h6e191768a6">Node.jsのインストール</h2>VoltaでのNode.jsのインストールは非常に簡単です。以下のコマンドを入力するだけです。

この場合、Node.jsの長期サポート版がインストールされます。パッケージ管理ツールのnpmも同時にインストールされます。最新バージョンや、バージョンを具体的に指定したい場合は以下のようにします。

<code>install</code>というコマンドではありますが、実際には指定されたバージョンのツールをダウンロード（ローカルに無い場合のみ）し、デフォルトバージョンを設定するというコマンドです。つまり、後述するプロジェクトごとのバージョンの固定がされていないプロジェクトであれば、このコマンドで指定されたバージョンのNode.jsが使われることになります。一度ダウンロードしてしまえば同じ<code>install</code>コマンドでデフォルトバージョンの切り替えのみが行われるようになります。また、<code>fetch</code>コマンドを使えばデフォルトバージョンの切り替えは行わずダウンロードのみをすることができます。<h2 id="h8707c5a61a">プロジェクトごとのバージョン固定</h2>Voltaでは、Node.jsやパッケージ管理ツールのnpm、yarnなどのバージョンをプロジェクトごとに固定できます。また、その設定はプロジェクトの<code>package.json</code>に保存されるため、Voltaを利用している他の開発者とバージョン固定の設定を共有することができます。<code>.nvmrc</code>のようなそれ専用の設定ファイルが作られるのではなく、Node.jsプロジェクトでは必ず存在する<code>package.json</code>に追記する形で保存されるのも、余計なファイルを作らず済んで嬉しいポイントです。 バージョンを固定するにはプロジェクトのディレクトリで以下のコマンドを実行します。

これを実行すると、プロジェクトのNode.jsのバージョンが16.13.2に、npmのバージョンが8.1.2に固定されます。固定していない他のプロジェクトではデフォルトバージョンが利用されますが、このディレクトリに戻ってくると自動的に固定されたバージョンに変更されます。プロジェクトの<code>package.json</code>には次のように追記されます。

分かりやすいですね。<h2 id="h12e0fe2996">チームでVoltaに統一しよう</h2>Voltaは個人開発の範囲でも十分威力を発揮しますが、やはりチーム開発でバージョンを統一できるという点が大きなメリットでしょう。逆に言えば、そのメリットを最大限に発揮するにはチームみんなでVoltaを使う必要があるということです。例えばPythonプロジェクトでも仮想環境で実行するのか、仮想環境ならどの仮想環境ツールを使うのか、Pythonバージョンはどうするのかなどが結局一番最初にそのプロジェクトを作成した人の選択に依存してしまい、ローカルにあらゆるバージョン管理ツール、パッケージ管理ツールを入れるはめになります。Node.jsではメンバーの環境が異なることによる弊害はそこまで無いかもしれませんが、こうした環境は揃えるに越したことはありません。Voltaは新しめのツールですが、高速で動作しシンプルで分かりやすいので他のメンバーにもおすすめしたいところです。

ということで今回は、MacでもWindowsでも利用できるNode.jsのバージョン管理ツール、Voltaの紹介でした。みんなが円滑に開発できる環境を整えていきましょう。 それではまた。

【JavaScript】配列の重複削除はSetを使うと速い【パフォーマンス比較と注意点】

【速い】Node.jsのバージョン管理はVoltaがおすすめ（Mac/Windows）

BLOG

PROFILE

RECOMMEND