UUIDをJavaScriptで生成する方法 - 初心者向け実装ガイド

「Webアプリで一意のIDを自動生成したい」と思ったことはありませんか？

「UUIDって何？」 「JavaScriptで作れるの？」 「どの方法が一番いいの？」

そんな疑問を抱いている方は多いと思います。 でも大丈夫です！

この記事では、JavaScriptでUUIDを生成する方法を初心者向けに詳しく解説します。 標準のWeb APIから外部ライブラリまで、様々な実装方法と実践的な使用例をわかりやすく説明していきます。

きっと「ID生成ってこんなに簡単だったんだ！」と感じられるはずですよ。

UUIDって何？基本を理解しよう

UUIDの意味を覚えよう

UUIDは、**Universally Unique Identifier（汎用一意識別子）**の略称です。

簡単に言うと、「世界中のどこで生成されても重複しない、ユニークなID」のことなんです。 128ビットの値で構成され、通常は32桁の16進数文字列として表現されます。

UUIDの形式を確認しよう

標準的なUUIDの形式は以下の通りです。

// UUID v4の例
"550e8400-e29b-41d4-a716-446655440000"

// 形式：XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
// 各部分：8-4-4-4-12文字の16進数

ハイフンで区切られた5つの部分で構成されます。 合計36文字（ハイフン含む）になりますね。

UUIDのバージョンを知ろう

UUIDには複数のバージョンがあります。

• UUID v1: タイムスタンプとMACアドレスを使用
• UUID v4: ランダムな値を使用（最も一般的）
• UUID v3/v5: 名前空間とハッシュを使用

一般的なWebアプリケーションでは、UUID v4が最も多く使用されます。

crypto.randomUUID()で簡単生成

最もおすすめの方法

モダンブラウザでは、標準のWeb APIでUUIDを生成できます。

// 最もシンプルな方法
function generateUUID() {
    return crypto.randomUUID();
}

// 使用例
const uuid = generateUUID();
console.log(uuid); // "550e8400-e29b-41d4-a716-446655440000"

crypto.randomUUID()を呼び出すだけでUUIDが生成されます。 この方法は、暗号学的に安全で最も推奨される実装方法です。

ブラウザ対応を確認しよう

crypto.randomUUID()が利用できるかチェックする方法も見てみましょう。

function isUUIDSupported() {
    return typeof crypto !== 'undefined' && 
           typeof crypto.randomUUID === 'function';
}

function generateUUID() {
    if (isUUIDSupported()) {
        return crypto.randomUUID();
    } else {
        console.warn('crypto.randomUUID() is not supported');
        return null;
    }
}

// 使用例
if (isUUIDSupported()) {
    const uuid = generateUUID();
    console.log('Generated UUID:', uuid);
} else {
    console.log('UUID generation not supported');
}

まずisUUIDSupported()でブラウザが対応しているかチェックします。 対応していればUUIDを生成、そうでなければエラーメッセージを表示します。

セキュアコンテキストでの使用

crypto.randomUUID()はセキュアコンテキスト（HTTPS）でのみ利用可能です。

function generateSecureUUID() {
    // セキュアコンテキストのチェック
    if (!window.isSecureContext) {
        throw new Error('UUIDの生成にはHTTPS接続が必要です');
    }
    
    if (!isUUIDSupported()) {
        throw new Error('crypto.randomUUID()はサポートされていません');
    }
    
    return crypto.randomUUID();
}

// 使用例
try {
    const uuid = generateSecureUUID();
    console.log('Secure UUID:', uuid);
} catch (error) {
    console.error('UUID生成エラー:', error.message);
}

window.isSecureContextでHTTPS環境かどうかをチェックしています。 HTTPS環境でない場合はエラーを投げて、適切なメッセージを表示します。

自作のUUID生成関数を作ろう

基本的な実装方法

crypto.randomUUID()が利用できない場合の自作実装を見てみましょう。

function generateUUIDv4() {
    // ランダムな16進数を生成
    const randomHex = () => Math.floor(Math.random() * 16).toString(16);
    
    // UUIDのテンプレート
    const template = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx';
    
    return template.replace(/[xy]/g, function(c) {
        const r = Math.random() * 16 | 0;
        const v = c === 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
    });
}

// 使用例
const uuid = generateUUIDv4();
console.log(uuid); // "f47ac10b-58cc-4372-a567-0e02b2c3d479"

template文字列の'x'と'y'をランダムな16進数で置き換えています。 '4'はUUID v4を示す固定値、'y'は特定のルールに従った値になります。

より高精度な実装

crypto.getRandomValues()を使ったより安全な実装も作れます。

function generateCryptoUUID() {
    // crypto.getRandomValues()が利用可能かチェック
    if (typeof crypto === 'undefined' || !crypto.getRandomValues) {
        return generateUUIDv4(); // フォールバック
    }
    
    // 16バイトのランダムデータを生成
    const randomBytes = new Uint8Array(16);
    crypto.getRandomValues(randomBytes);
    
    // UUID v4の形式に変換
    randomBytes[6] = (randomBytes[6] & 0x0f) | 0x40; // version 4
    randomBytes[8] = (randomBytes[8] & 0x3f) | 0x80; // variant bits
    
    // 16進数文字列に変換
    const hex = Array.from(randomBytes)
        .map(b => b.toString(16).padStart(2, '0'))
        .join('');
    
    // ハイフンを挿入
    return [
        hex.slice(0, 8),
        hex.slice(8, 12),
        hex.slice(12, 16),
        hex.slice(16, 20),
        hex.slice(20, 32)
    ].join('-');
}

まず、16バイトのランダムなデータを生成します。 その後、UUID v4の仕様に合わせてビット操作を行います。

最後に16進数文字列に変換して、ハイフンを挿入してUUID形式にします。

使用例も見てみましょう。

// 使用例
const cryptoUUID = generateCryptoUUID();
console.log(cryptoUUID);

この方法はMath.random()よりも暗号学的に安全です。

外部ライブラリを使った実装

uuidライブラリの使用

最も人気のあるUUIDライブラリの使用例を見てみましょう。

// npmでインストール: npm install uuid

// ES6モジュールでのインポート
import { v4 as uuidv4 } from 'uuid';

// CommonJSでのインポート
// const { v4: uuidv4 } = require('uuid');

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

// 複数のUUIDを生成
const uuids = Array.from({ length: 5 }, () => uuidv4());
console.log(uuids);

uuidライブラリは非常にシンプルで使いやすいです。 uuidv4()を呼び出すだけでUUIDが生成されます。

CDNを使った実装

CDNからライブラリを読み込む方法も便利です。

<!-- HTML -->
<script src="https://cdn.jsdelivr.net/npm/uuid@9.0.0/dist/umd/uuid.min.js"></script>

<script>
// ライブラリの使用
const uuid = window.uuid.v4();
console.log(uuid);

// 関数として定義
function generateLibraryUUID() {
    return window.uuid.v4();
}

// 使用例
const generatedUUID = generateLibraryUUID();
console.log('Library UUID:', generatedUUID);
</script>

CDNを使えば、npmでのインストールなしでUUIDライブラリを利用できます。 window.uuid.v4()でUUIDを生成できますね。

実践的な使用例を学ぼう

データベースのプライマリキー

データベースのレコードに一意のIDを設定する例を見てみましょう。

class UserManager {
    constructor() {
        this.users = [];
    }
    
    createUser(name, email) {
        const user = {
            id: crypto.randomUUID(),
            name: name,
            email: email,
            createdAt: new Date().toISOString(),
            isActive: true
        };
        
        this.users.push(user);
        return user;
    }
    
    findUserById(id) {
        return this.users.find(user => user.id === id);
    }
    
    getAllUsers() {
        return [...this.users];
    }
}

createUserメソッドで新しいユーザーを作成する際、crypto.randomUUID()で一意のIDを生成しています。

使用例はこんな感じです。

// 使用例
const userManager = new UserManager();

const user1 = userManager.createUser('田中太郎', 'tanaka@example.com');
const user2 = userManager.createUser('佐藤花子', 'sato@example.com');

console.log('作成されたユーザー:', user1);
console.log('ユーザー検索:', userManager.findUserById(user1.id));

生成されたUUIDでユーザーを一意に識別できます。

セッション管理システム

Webアプリケーションでのセッション管理の例も見てみましょう。

class SessionManager {
    constructor() {
        this.sessions = new Map();
    }
    
    createSession(userId) {
        const sessionId = crypto.randomUUID();
        const session = {
            id: sessionId,
            userId: userId,
            createdAt: Date.now(),
            expiresAt: Date.now() + (24 * 60 * 60 * 1000), // 24時間後
            lastAccessed: Date.now()
        };
        
        this.sessions.set(sessionId, session);
        return session;
    }
    
    getSession(sessionId) {
        const session = this.sessions.get(sessionId);
        
        if (!session) {
            return null;
        }
        
        // 有効期限チェック
        if (Date.now() > session.expiresAt) {
            this.sessions.delete(sessionId);
            return null;
        }
        
        // 最終アクセス時刻を更新
        session.lastAccessed = Date.now();
        return session;
    }
    
    deleteSession(sessionId) {
        return this.sessions.delete(sessionId);
    }
}

新しいセッションを作成する時にUUIDでセッションIDを生成しています。 有効期限のチェックや最終アクセス時刻の更新も行っています。

使用例を見てみましょう。

// 使用例
const sessionManager = new SessionManager();

const session = sessionManager.createSession('user123');
console.log('セッション作成:', session.id);

const retrievedSession = sessionManager.getSession(session.id);
console.log('セッション取得:', retrievedSession);

セッションIDが一意なので、複数のユーザーが同時にログインしても混同されません。

ファイルアップロード管理

ファイルアップロード時の一意なファイル名生成の例も見てみましょう。

class FileUploadManager {
    constructor() {
        this.uploadedFiles = [];
    }
    
    generateFileName(originalName) {
        const uuid = crypto.randomUUID();
        const extension = originalName.split('.').pop();
        return `${uuid}.${extension}`;
    }
    
    uploadFile(file, originalName) {
        const uniqueFileName = this.generateFileName(originalName);
        const uploadInfo = {
            id: crypto.randomUUID(),
            originalName: originalName,
            fileName: uniqueFileName,
            size: file.size,
            type: file.type,
            uploadedAt: new Date().toISOString(),
            url: `/uploads/${uniqueFileName}`
        };
        
        this.uploadedFiles.push(uploadInfo);
        return uploadInfo;
    }
    
    getFileList() {
        return this.uploadedFiles.map(file => ({
            id: file.id,
            originalName: file.originalName,
            size: file.size,
            uploadedAt: file.uploadedAt,
            url: file.url
        }));
    }
}

generateFileNameメソッドでUUIDを使った一意なファイル名を生成しています。 これにより、同じ名前のファイルをアップロードしても衝突を避けられます。

使用例はこんな感じです。

// 使用例
const fileManager = new FileUploadManager();

// ファイルアップロードのシミュレーション
const mockFile = {
    size: 1024000,
    type: 'image/jpeg'
};

const uploadResult = fileManager.uploadFile(mockFile, 'photo.jpg');
console.log('アップロード結果:', uploadResult);
// { id: "...", originalName: "photo.jpg", fileName: "550e8400-e29b-41d4-a716-446655440000.jpg", ... }

同じ「photo.jpg」をアップロードしても、毎回異なるファイル名になります。

APIリクエストの追跡システム

APIリクエストにトレースIDを付与する例も見てみましょう。

class APIClient {
    constructor(baseURL) {
        this.baseURL = baseURL;
    }
    
    async request(endpoint, options = {}) {
        const traceId = crypto.randomUUID();
        
        // リクエストヘッダーにトレースIDを追加
        const headers = {
            'X-Trace-ID': traceId,
            'Content-Type': 'application/json',
            ...options.headers
        };
        
        const requestInfo = {
            traceId: traceId,
            endpoint: endpoint,
            method: options.method || 'GET',
            timestamp: Date.now(),
            url: `${this.baseURL}${endpoint}`
        };
        
        console.log(`[${traceId}] Request started:`, requestInfo);
        
        try {
            const response = await fetch(requestInfo.url, {
                ...options,
                headers
            });
            
            const duration = Date.now() - requestInfo.timestamp;
            console.log(`[${traceId}] Request completed in ${duration}ms`);
            
            return {
                traceId: traceId,
                status: response.status,
                data: await response.json(),
                duration: duration
            };
        } catch (error) {
            const duration = Date.now() - requestInfo.timestamp;
            console.error(`[${traceId}] Request failed after ${duration}ms:`, error);
            throw error;
        }
    }
}

各APIリクエストにUUIDでトレースIDを付与しています。 このIDでリクエストの開始から終了まで追跡できます。

使用例を見てみましょう。

// 使用例
const apiClient = new APIClient('https://api.example.com');

// APIリクエストの実行
async function fetchUserData() {
    try {
        const result = await apiClient.request('/users/123');
        console.log('API Response:', result);
    } catch (error) {
        console.error('API Error:', error);
    }
}

ログでトレースIDを確認することで、特定のリクエストの処理状況を追跡できます。

パフォーマンスと最適化のコツ

大量のUUID生成

大量のUUIDを効率的に生成する方法を見てみましょう。

class UUIDGenerator {
    constructor() {
        this.cache = [];
        this.cacheSize = 100;
        this.refillThreshold = 10;
    }
    
    // キャッシュからUUIDを取得
    getUUID() {
        if (this.cache.length <= this.refillThreshold) {
            this.refillCache();
        }
        
        return this.cache.pop() || crypto.randomUUID();
    }
    
    // キャッシュを補充
    refillCache() {
        const toGenerate = this.cacheSize - this.cache.length;
        
        for (let i = 0; i < toGenerate; i++) {
            this.cache.push(crypto.randomUUID());
        }
    }
    
    // バッチでUUIDを生成
    generateBatch(count) {
        const uuids = [];
        for (let i = 0; i < count; i++) {
            uuids.push(this.getUUID());
        }
        return uuids;
    }
}

事前にUUIDをキャッシュしておくことで、大量生成時のパフォーマンスを向上させています。

使用例はこんな感じです。

// 使用例
const uuidGenerator = new UUIDGenerator();

// 大量のUUIDを生成
const startTime = Date.now();
const uuids = uuidGenerator.generateBatch(1000);
const endTime = Date.now();

console.log(`1000個のUUIDを${endTime - startTime}msで生成`);
console.log('最初の10個:', uuids.slice(0, 10));

キャッシュを使うことで、毎回crypto.randomUUID()を呼び出すより高速になります。

エラーハンドリングと堅牢性

エラーハンドリングを含む堅牢な実装例も見てみましょう。

class RobustUUIDGenerator {
    constructor() {
        this.fallbackMethods = [
            () => crypto.randomUUID(),
            () => this.generateCryptoUUID(),
            () => this.generateMathUUID(),
            () => this.generateTimeBasedUUID()
        ];
    }
    
    generateUUID() {
        let lastError;
        
        for (let method of this.fallbackMethods) {
            try {
                const uuid = method();
                if (this.isValidUUID(uuid)) {
                    return uuid;
                }
            } catch (error) {
                lastError = error;
                console.warn('UUID生成方法に失敗:', error.message);
            }
        }
        
        throw new Error(`すべてのUUID生成方法に失敗しました: ${lastError?.message}`);
    }
    
    generateCryptoUUID() {
        if (typeof crypto === 'undefined' || !crypto.getRandomValues) {
            throw new Error('crypto.getRandomValues() is not available');
        }
        
        const randomBytes = new Uint8Array(16);
        crypto.getRandomValues(randomBytes);
        
        randomBytes[6] = (randomBytes[6] & 0x0f) | 0x40;
        randomBytes[8] = (randomBytes[8] & 0x3f) | 0x80;
        
        const hex = Array.from(randomBytes)
            .map(b => b.toString(16).padStart(2, '0'))
            .join('');
        
        return [
            hex.slice(0, 8),
            hex.slice(8, 12),
            hex.slice(12, 16),
            hex.slice(16, 20),
            hex.slice(20, 32)
        ].join('-');
    }
    
    generateMathUUID() {
        const template = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx';
        return template.replace(/[xy]/g, function(c) {
            const r = Math.random() * 16 | 0;
            const v = c === 'x' ? r : (r & 0x3 | 0x8);
            return v.toString(16);
        });
    }
    
    generateTimeBasedUUID() {
        const timestamp = Date.now().toString(16);
        const random = Math.random().toString(16).substr(2);
        return [
            timestamp.slice(0, 8),
            timestamp.slice(8, 12) || '0000',
            '4' + random.slice(0, 3),
            '8' + random.slice(3, 6),
            random.slice(6, 18).padEnd(12, '0')
        ].join('-');
    }
    
    isValidUUID(uuid) {
        const uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
        return uuidRegex.test(uuid);
    }
}

複数の生成方法を用意して、一つが失敗しても他の方法で生成を試みます。

使用例を見てみましょう。

// 使用例
const robustGenerator = new RobustUUIDGenerator();

try {
    const uuid = robustGenerator.generateUUID();
    console.log('Generated UUID:', uuid);
    console.log('Is valid:', robustGenerator.isValidUUID(uuid));
} catch (error) {
    console.error('UUID生成に失敗:', error.message);
}

どの環境でも確実にUUIDを生成できる堅牢なシステムになります。

まとめ

JavaScriptでのUUID生成は、モダンなWebアプリケーション開発における重要な技術です。

重要なポイントをおさらい

今回学習した内容をまとめると以下の通りです。

• crypto.randomUUID()が最も推奨される標準的な方法
• 自作実装やライブラリを使った代替手段も有効
• データベースのキー、セッション管理など幅広い用途
• パフォーマンスと堅牢性を考慮した実装が重要

これらのポイントを理解することが重要です。

実践的な活用場面

以下のような場面で特に威力を発揮します。

• データベースレコードの一意識別
• セッション管理とユーザー認証
• ファイルアップロードの重複回避
• APIリクエストの追跡とログ管理

選択の指針

用途に応じて適切な方法を選択しましょう。

• 標準機能重視: crypto.randomUUID()
• ブラウザ互換性重視: 自作実装またはライブラリ
• 大量生成: キャッシュ機能付きクラス
• 堅牢性重視: フォールバック機能付き実装

適切なUUID生成により、一意性が保証された安全なIDシステムを構築できます。

まずは基本的なcrypto.randomUUID()から始めて、徐々に高度なテクニックも取り入れてみてください。 ぜひ今日から、これらの知識を活用してより信頼性の高いWebアプリケーションを作成してみませんか？