JavaScriptでUUIDを生成する方法

JavaScriptにはUUID生成のための複数のアプローチがあり、ブラウザネイティブAPIから人気のnpmパッケージまで揃っています。各方法と使用場面の包括的なガイドです。

方法1: crypto.randomUUID()（推奨） すべてのモダンブラウザ（Chrome 92+、Firefox 95+、Safari 15.4+）およびNode.js 19+で利用可能です：

const id = crypto.randomUUID();
// "36b8f84d-df4e-4d49-b662-bcde71a8764f"

最もシンプルかつ高パフォーマンスな選択肢です。OSの暗号論的乱数生成器を使用し、適切にフォーマットされたUUID v4文字列を返します。依存関係は不要です。

方法2: uuid npmパッケージ 週間5,000万以上のダウンロード数を誇る最も人気のUUIDライブラリです。すべてのUUIDバージョンをサポートします：

import { v4 as uuidv4, v7 as uuidv7, v5 as uuidv5 } from 'uuid';

const random = uuidv4();        // Random UUID v4
const timeBased = uuidv7();     // Time-ordered UUID v7
const named = uuidv5('example.com', uuidv5.DNS); // Name-based v5

// Validation
import { validate, version } from 'uuid';
validate('not-a-uuid');              // false
validate('36b8f84d-df4e-4d49-b662-bcde71a8764f'); // true
version('36b8f84d-df4e-4d49-b662-bcde71a8764f');  // 4

方法3: カスタム実装（制御が必要な場合）

// UUID v4 from scratch
function uuidv4() {
  const bytes = crypto.getRandomValues(new Uint8Array(16));
  bytes[6] = (bytes[6] & 0x0f) | 0x40;  // Version 4
  bytes[8] = (bytes[8] & 0x3f) | 0x80;  // Variant 10
  const hex = [...bytes].map(b => b.toString(16).padStart(2, '0'));
  return `${hex.slice(0,4).join('')}-${hex.slice(4,6).join('')}-${hex.slice(6,8).join('')}-${hex.slice(8,10).join('')}-${hex.slice(10).join('')}`;
}

パフォーマンスベンチマーク（Node.js 20、Apple M2）：

crypto.randomUUID():     8.2M ops/sec
uuid.v4():              5.1M ops/sec
uuid.v7():              3.8M ops/sec
Custom implementation:   2.4M ops/sec

crypto.randomUUID() はランタイム内でC++でネイティブ実装されているため最速です。

よくある落とし穴：

1. UUID生成に Math.random() を使用しないでください。 暗号論的に安全ではなく、重複を生成する可能性があります。
2. SSRハイドレーションの不一致： サーバーサイドレンダリング中にUUIDを生成すると、サーバーとクライアントで異なる値が生成されます。DOM要素IDにはReactの useId() を使用し、UUIDはイベントハンドラや useEffect 内でのみ生成してください。
3. バンドルサイズ： v4のみ必要な場合、crypto.randomUUID() はバンドルに0バイトも追加しません。uuid パッケージは約4.5KB（minified）追加されます。

TypeScriptの型付け：

// The return type of crypto.randomUUID() is `string`
// For stricter typing, use a branded type:
type UUID = string & { readonly __brand: 'UUID' };
function generateId(): UUID {
  return crypto.randomUUID() as UUID;
}