Nano IDのオンラインテストツールでID生成を簡単に

Nano IDは、JavaScript用の小さな（109バイト）、安全でURLに適した一意の文字列IDジェネレータです。プロジェクトの詳細はこちらをご覧ください。

ツールの概要とプロジェクト背景

Nano IDは非常に軽量（109バイト）で、安全かつURLに適した一意の文字列IDジェネレータです。プロジェクトの主要なファイルはindex.jsにあります。Nano IDのパフォーマンスを直感的に理解するため、公式ではブラウザでのデモツールを提供しています。このツールはtest/demo/index.htmlとtest/demo/index.jsにコードが記述されています。

このツールは以下の機能を提供します：

10個のNano IDのサンプルをリアルタイムで生成し、基本的な効果を表示する
Nano IDとuuid、shortidなどの他の生成方法とのパフォーマンスと文字分布の比較

テストツールの迅速な起動

このオンラインテストツールを起動するには、プロジェクト内の`test/demo`ディレクトリに移動し、index.htmlファイルをダブルクリックしてブラウザで開きます。ツールは必要なJavaScriptモジュールを自動的に読み込みます。

インターフェースの詳細

ツールのインターフェースは主に2つの機能領域に分かれています。

ID生成サンプルエリア

ページの上部には、10個のランダムに生成されたNano IDが即座に表示されます。例えば：

  <div>abc123def45</div>
  <div>ghj678klm90</div>
  ...

これらのIDは、デフォルト設定で生成され、長さは21文字で、A-Z、a-z、0-9、"-"、および"_"の文字を含みます。

パフォーマンスと分布テストエリア

ページの下部には、異なるID生成方法のパフォーマンスと文字分布の均一性を示すカラフルな棒グラフが表示されます。テストデータはtest/demo/index.jsのベンチマークロジックから取得されます。以下に比較される7つの生成戦略があります：

理想的な分布（理論上の基準）
標準のNano ID（セキュアモード）
カスタム文字セットを使用したNano ID
UUID v4
shortid
Nano ID非セキュアモード
単純なランダムモジュロ法

各テスト項目の右側には、操作/秒(ops/sec)の指標が表示され、生成速度を直感的に示します。色付きのブロックの高さは、各文字の出現頻度と平均値の偏差を表し、青に近いほど分布が均一です。

コアコードの解析

テストツールのコアロジックはtest/demo/index.jsにあります。主に以下の3つの部分から構成されています。

モジュールのインポートと設定

  import * as nanoidExport from '../../index.browser.js'
  import * as nonSecureExport from '../../non-secure/index.js'
  let { customAlphabet, nanoid, random } = nanoidExport
  let nonSecure = nonSecureExport.nanoid

このコードは、Nano IDのセキュアと非セキュアの実装、およびカスタム文字セットの機能をインポートします。

IDの生成と表示

  let html = ''
  for (let i = 0; i < 10; i++) {
    html += `<div>${nanoid()}</div>`
  }
  document.body.innerHTML = `<main>${html}</main>`

ページが読み込まれたときに、10個のサンプルIDを生成し、ページの主体に挿入します。

パフォーマンステスト関数

  function calcDistr(title, fn) {
    let start = Date.now()
    for (let j = 0; j < COUNT; j++) ids.push(fn())
    let end = Date.now()
    // 文字頻度の統計ロジック...
    return { chars, time: end - start, title }
  }

この関数は、50,000回のID生成操作を繰り返し、平均速度を計算し、文字分布の状況を統計します。

実際の使用例

このオンラインテストツールは、以下のシナリオに特に適しています：

迅速な検証：Nano IDをプロジェクトに組み込む前に、ターゲットブラウザでのパフォーマンスを確認する
教育的なデモンストレーション：異なるID生成アルゴリズムのランダム性の違いを直感的に示す
パフォーマンスの最適化：test/demo/index.jsのパラメータ（COUNT値など）を変更して、さまざまな条件でのパフォーマンスをテストする

例えば、カスタム文字セットを使用してテストするには、以下のコードを修正します：

  let nanoid2 = customAlphabet('ABCDEF123456', 8) // カスタム文字セットと長さを使用

まとめと拡張

Nano IDのブラウザテストツールは、シンプルな実装ながら豊富な視覚的なテスト結果を提供し、プロジェクトの"tiny yet powerful"という設計理念を体現しています。オンラインテストだけでなく、完全なTypeScriptの型定義index.d.tsと複数言語のREADMEドキュメントも提供されています。

このツールページをブックマークして、ID生成方法を選択する際や既存の実装を最適化する際にいつでも比較テストを行えるようにしましょう。

詳細については、プロジェクトリポジトリをご覧ください。

タグ: javascript nanoid UUID shortid id-generator

7月20日 21:16 投稿

異端開発室

Nano IDのオンラインテストツールでID生成を簡単に