JavaScriptでUUIDを生成する実践ガイド

はじめに

JavaScriptアプリケーションで一意の識別子が必要ですか?データベース駆動型アプリの構築、ユーザーセッションの管理、分散リクエストの追跡など、UUID生成はすべての開発者が習得すべき基本的なスキルです。

本ガイドでは、組み込みのcrypto.randomUUID()メソッドから汎用性の高いuuid npmパッケージまで、JavaScriptにおけるUUID生成の最新アプローチを解説します。最先端のWebアプリ、Node.jsサービス、または広範な互換性が必要なレガシーシステムなど、特定のユースケースに適した方法を学べます。

UUIDとは何か、なぜ使用するのか?

UUID(Universally Unique Identifier:汎用一意識別子)は、128ビットの識別子で、36文字の形式で表現されます:550e8400-e29b-41d4-a716-446655440000。GUIDとしても知られるこれらの識別子は、中央管理機関やデータベースの調整を必要とせずに、実質的に一意性が保証されます。

フロントエンドおよびNode.js開発者にとって、UUIDは以下の重要な問題を解決します:

• データベースレコード: 自動インクリメントの競合なしに主キーを生成
• セッショントークン: 予測不可能で一意なセッション識別子を作成
• ファイル命名: アップロードされたコンテンツの命名衝突を防止
• リクエスト追跡: マイクロサービス間で操作を追跡

モダンな方法: crypto.randomUUID()

crypto.randomUUID()メソッドは、モダンな環境で一意のID値を生成する現在の標準です。ブラウザとNode.js(14.17+)に組み込まれており、依存関係が不要で、暗号学的に安全なUUID v4値を生成します。

ブラウザでの実装

const uuid = crypto.randomUUID();
console.log(uuid); // "3b99e3e0-7598-4bf8-b9c1-e915af91713c"

Node.jsでの実装

import { randomUUID } from 'crypto';

const uuid = randomUUID();
console.log(uuid); // "b7e44f0a-811f-4c1c-b7f0-48d51f5dbc1f"

ブラウザサポート: Chrome 92+、Firefox 95+、Safari 15.4+、Edge 92+
Node.jsサポート: バージョン14.17.0+

外部依存関係なしでモダンなアプリケーションで安全でランダムなUUIDが必要な場合は、crypto.randomUUID()を使用してください。

フォールバック方法: crypto.getRandomValues()

crypto.randomUUID()をサポートしていない環境では、crypto.getRandomValues()を使用してUUID v4生成を実装できます。この方法は、Chrome 11以降のブラウザやcryptoモジュールを持つNode.jsバージョンで動作します。

function generateUUID() {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
    const r = crypto.getRandomValues(new Uint8Array(1))[0];
    const v = c === 'x' ? (r & 0x0f) : ((r & 0x03) | 0x08);
    return v.toString(16);
  });
}

const uuid = generateUUID();
console.log(uuid); // "42254574-affd-47cc-9915-0ecae592351b"

このアプローチは、古い環境をサポートしながら暗号学的セキュリティを維持します。

最大限の柔軟性を提供するuuid npmパッケージ

uuid npmパッケージは、特に特定のUUIDバージョンや最大限の互換性が必要な場合に、JavaScriptのUUID生成において最も汎用性の高いソリューションです。

インストール

npm install uuid

基本的な使用方法(UUID v4)

import { v4 as uuidv4 } from 'uuid';

const uuid = uuidv4();
console.log(uuid); // "1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed"

その他のUUIDバージョン

import { v1, v3, v5 } from 'uuid';

// v1: タイムスタンプベース(ソート可能)
const uuid1 = v1(); 

// v3/v5: 名前ベース(決定論的)
const uuid5 = v5('hello.example.com', v5.DNS);

uuidパッケージはすべてのUUIDバージョン(v1-v5)をサポートしており、以下が必要な場合に最適です:

• ソート可能な識別子のためのタイムスタンプベースのUUID(v1)
• 名前空間/名前ペアからの決定論的なUUID(v3、v5)
• 古いNode.jsバージョンとの後方互換性
• React Nativeやその他の非標準環境

Math.random()を避けるべき場合

Math.random()を使用したUUID実装を見かけることがありますが、これらはテストや非セキュアなコンテキストでのみ使用すべきです:

// ⚠️ セキュアではない - テストのみ
function testUUID() {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
    const r = Math.random() * 16 | 0;
    const v = c === 'x' ? r : (r & 0x3 | 0x8);
    return v.toString(16);
  });
}

Math.random()は暗号学的セキュリティを欠いているため、本番環境のUUIDには使用すべきではありません。

ベストプラクティスとバリデーション

UUIDのバリデーション

外部ソースからのUUIDは常にバリデーションを行ってください:

function isValidUUID(uuid) {
  const uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
  return uuidRegex.test(uuid);
}

console.log(isValidUUID('550e8400-e29b-41d4-a716-446655440000')); // true

適切な方法の選択

• モダンなWebアプリまたはNode.js 14.17+: crypto.randomUUID()を使用
• レガシーブラウザサポートが必要: crypto.getRandomValues()で実装
• 特定のUUIDバージョン(v1、v3、v5): uuid npmパッケージを使用
• 最大限の互換性: uuid npmパッケージを使用
• クイックテスト/プロトタイプのみ: Math.random()実装

まとめ

JavaScriptでのUUID生成は複雑である必要はありません。ほとんどのモダンなアプリケーションでは、crypto.randomUUID()がシンプルで安全なソリューションを提供します。より広範な互換性や特定のUUIDバージョンが必要な場合は、uuid npmパッケージが対応します。本番環境ではMath.random()を避け、外部ソースからのUUIDは必ずバリデーションを行うことを忘れないでください。

環境と要件に合った方法を選択してください。将来のあなた(そしてチーム)は、コードベース全体にわたるクリーンで信頼性の高い一意識別子に感謝するでしょう。

よくある質問

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.