フロントエンドで短めのハッシュを得たい

React フロントエンドで短縮URLやルームIDを実装したくなった。

ライブラリあるんだろうと思って探してみると色々あったので、代表的な3つのライブラリを、短縮URL用途の観点から比較してみる。今回調査したのは下記。

SQIDs（旧 Hashids）

ハッシュ値を作ってくれるライブラリだ[公式

src]。単純に基数変換しているだけなので、可逆変換も可能らしい。その上一意性がある。

辞書データを持たず、処理も単純なため、React フロントエンドに組み込んでも バンドルサイズ・メモリ消費ともに影響は極小 である。

欠点としてはハッシュ値の最大長を指定することができない。短縮URLとしては結構問題になりそう。

unique-names-generator は、形容詞・色・動物名などの辞書を組み合わせ、人間に読みやすい単語ベースのIDを生成するライブラリ[src]。UI上に表示されるルーム名や共有コードとしての視認性は高い。

ただし、生成方式はランダムであり 一意性は保証されない。短縮URLとして利用する場合は、DBのユニーク制約や再生成処理が前提となる。また、辞書データを含むため、フロントエンドで静的 import すると初期バンドルを肥大化させやすい。

cute-words も単語の組み合わせによってIDを生成するライブラリ[src]で、よりカジュアルで柔らかい印象の文字列を生成しやすい。プロトタイプや一時的な識別子には向いている。

一方で、unique-names-generator と同様に 衝突前提の設計 が必要であり、短縮URLの主キー用途には不向きである。辞書サイズも比較的大きいため、React フロントエンドでは用途を限定して使うのが望ましい。

ただ、そのぶんunique-names-generatorよりは衝突しづらい。とはいえ、10,000個生成で85%程度の確率で衝突するらしいので、衝突対策は必須。

SQIDsは便利だが、逆変換の用途があまりない（結局テーブルで管理することになりそう）。やはりどこかで衝突の可能性は考えないといけない。