UUIDジェネレーターをVanilla JSで作った話（crypto.randomUUIDの中身まで）

作ったもの

開発者向けの無料ツール群「devnestio」に、UUID Generator を追加しました。ボタンひとつでUUIDを生成し、件数指定の一括生成やワンクリックコピーにも対応した、シンプルなWebツールです。

👉 https://uuid-generator-bsf.pages.dev/

外部ライブラリゼロ・単一HTMLファイル・サーバー送信なし（すべてブラウザ内で完結）という、devnestioの共通方針に沿って作っています。

作った動機

UUIDって「ちょっと1個ほしい」場面が地味に多いんですよね。テストデータを作るとき、APIのモックを書くとき、DBにダミーレコードを入れるとき。そのたびにターミナルで uuidgen を叩いたり、適当なサイトを開いたりしていました。

ただ既存のオンライン生成ツールは、広告が重かったり、生成したUUIDをサーバーに送っていそうで気持ち悪かったりするものもあります。UUIDのような「とりあえず一意ならいい値」でも、生成過程がブラウザの外に出るのは避けたい。であれば、完全クライアントサイドで、軽くて、信頼できるものを自分で持っておけばいい、というのが動機です。

主な機能

• UUID v4（ランダム）の生成 — 標準的なランダムUUID
• 件数を指定した一括生成 — テストデータ用にまとめて出力
• ワンクリックコピー — 個別 / 全件コピーに対応
• 大文字・小文字の切り替え、ハイフン有無の切り替え
• 完全オフライン動作 — 生成はすべてブラウザ内、ネットワーク送信なし

技術的なポイント：crypto.randomUUID()

UUID v4の生成は、ブラウザ標準の Web Crypto API を使えば一行で済みます。

const uuid = crypto.randomUUID();
// 例: "f47ac10b-58cc-4372-a567-0e02b2c3d479"

Math.random() で自前生成しているサンプルもよく見かけますが、Math.random() は暗号学的に安全な乱数ではありません。一意性が欲しいだけなら実用上は問題が出にくいものの、わざわざ品質の劣る乱数を使う理由もないので、crypto.randomUUID() を採用しています。これは内部で crypto.getRandomValues() 相当のCSPRNGを使い、RFC 4122のv4フォーマット（13桁目が 4、17桁目が 8/9/a/b）も保証してくれます。

古い環境向けのフォールバックも一応用意していて、crypto.getRandomValues() で16バイト取得し、バージョン・バリアントビットを手で立てる実装にしています。

function uuidv4Fallback() {
  const b = crypto.getRandomValues(new Uint8Array(16));
  b[6] = (b[6] & 0x0f) | 0x40; // version 4
  b[8] = (b[8] & 0x3f) | 0x80; // variant
  const h = [...b].map(x => x.toString(16).padStart(2, "0"));
  return `${h.slice(0,4).join("")}-${h.slice(4,6).join("")}-${h.slice(6,8).join("")}-${h.slice(8,10).join("")}-${h.slice(10).join("")}`;
}

フレームワークは使っていません。状態が少ないツールにReactを持ち込むと、ビルド・バンドルサイズ・依存更新のコストのほうが大きくなります。単一HTMLに素のJSを書くほうが、読みやすく落ちにくいというのが今のところの結論です。

実装はAIエージェントに任せた

devnestioのツールは、Claude Code sessions に発注書（PRD）を渡して自律的に実装してもらう形で作っています。今回も「UUID v4生成・一括生成・コピー・大文字小文字切替」という要件を渡し、実装からテストまでをエージェント側で完結させました。

特に効いたのは「Math.random() ではなく crypto.randomUUID() を使い、未対応環境にはフォールバックを用意する」という指示を最初の発注書に書いておいたことです。仕様の穴を人間が先に埋めておくと、エージェントの出力品質が安定します。逆に丸投げすると技術的には正しいけど雑な実装になりがちで、「何を作るか」と「品質の線引き」は人間側の仕事だと毎回感じます。

テスト結果

ブラウザ実行型のテストハーネス（test.html）で 58/58 PASS。フォーマット検証（ハイフン位置・バージョンビット・バリアントビット）、一括生成時の重複チェック、大文字小文字・ハイフン有無の切替、コピー処理あたりを網羅しています。1万件生成しても重複が出ないことも確認済みです。

今後の展望

• UUID v7（時系列ソート可能）への対応
• ULID生成の追加
• 生成したUUIDのバリデーション／パース機能

UUID v7は最近DBの主キーとして注目されているので、需要がありそうなら優先して入れたいところです。

使ってみてください

devnestioでは、開発者が「ちょっと使いたい」小ツールを無料で揃えています。UUID Generatorも含め、全部ブラウザ内で完結する軽量ツールです。

👉 devnestio - Developer Tools Hub

使いにくい点や「こんな機能がほしい」など、フィードバックは大歓迎です。次のツール選定の参考にさせてもらいます。