JavaScript Tips | 基本・共通ユーティリティ：汎用 – UUID 生成

JavaScript JavaScript
スポンサーリンク

UUID ってそもそも何者？

まず言葉から整理します。
UUID は Universally Unique Identifier（ほぼ世界中で一意な識別子） の略です。

見た目はだいたいこんな感じの文字列です。

550e8400-e29b-41d4-a716-446655440000

ハイフンで区切られた 32 桁の 16 進数。
これを「ID」として使うことで、

  • ほぼかぶらない
  • どこで生成してもいい（サーバーでもフロントでも）
  • 形式が決まっていて扱いやすい

というメリットがあります。

業務では、ユーザー ID、リクエスト ID、トレース ID、リソース ID など、
「とにかく一意な識別子が欲しい」場面でよく使われます。

一番簡単な UUID 生成：crypto.randomUUID を使う

モダン環境ならこれ一択でいいレベル

ブラウザや Node.js の新しめの環境では、
標準で crypto.randomUUID() が使えます。

const id = crypto.randomUUID();
console.log(id); // 例: "550e8400-e29b-41d4-a716-446655440000"
JavaScript

これだけで、UUID v4（ランダムベースの UUID）が生成されます。

ここでの重要ポイントは二つです。

形式が正しい UUID になっていること
暗号学的に安全な乱数を使っていること（Math.random よりずっと良い）

業務で「ちゃんとした UUID が欲しい」なら、
使える環境ではまずこれを素直に使うのがベストです。

ユーティリティ関数として包んでおく

直接 crypto.randomUUID() を呼んでもいいのですが、
プロジェクトとしてはユーティリティにしておくと差し替えやすくなります。

function generateUuid() {
  return crypto.randomUUID();
}
JavaScript

こうしておけば、もし将来「別の実装に変えたい」となっても、
この関数の中身だけ変えれば済みます。

crypto.randomUUID が使えない環境向けの実装イメージ

ざっくり「UUID っぽいもの」を自前で作る

古い環境や、crypto.randomUUID がない状況では、
自前で「UUID v4 形式の文字列」を組み立てることもあります。

よく見るパターンの一つは、テンプレート文字列を置き換える方法です。

function generateUuidFallback() {
  const template = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx";

  return template.replace(/[xy]/g, (c) => {
    const r = (Math.random() * 16) | 0;
    const v = c === "x" ? r : (r & 0x3) | 0x8;
    return v.toString(16);
  });
}

console.log(generateUuidFallback());
// 例: "550e8400-e29b-41d4-a716-446655440000"
JavaScript

ここでの深掘りポイントは少しテクニカルですが、重要です。

"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx" が UUID v4 の形を表している
4 の位置は「バージョン 4」を意味する固定値
y の位置は「バリアント」を表し、(r & 0x3) | 0x8 で 8〜b の範囲にしている

つまり、「ただのランダム文字列」ではなく、
UUID v4 の仕様に沿ったビットパターンを作っているわけです。

ただし、乱数源が Math.random() なので、
暗号学的な強さは crypto.randomUUID には及びません。
「形式が UUID であればよい」「そこまで厳密な一意性は求めない」用途向けです。

環境に応じて実装を切り替えるユーティリティ

使えるなら crypto.randomUUID、なければフォールバック

実務では、「新しい環境では crypto.randomUUID、古い環境ではフォールバック」という書き方がよく使われます。

function generateUuid() {
  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
    return crypto.randomUUID();
  }

  const template = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx";

  return template.replace(/[xy]/g, (c) => {
    const r = (Math.random() * 16) | 0;
    const v = c === "x" ? r : (r & 0x3) | 0x8;
    return v.toString(16);
  });
}
JavaScript

これで、

  • モダン環境 → 安全で正確な UUID
  • 古い環境 → 形式は UUID v4 だが、乱数は Math.random ベース

という「現実的な落としどころ」が作れます。

UUID をどう使うか（具体例）

一意なリソース ID として使う

例えば、フロント側で一時的に作るオブジェクトに ID を振りたいとき。

const item = {
  id: generateUuid(),
  name: "新規アイテム",
};
JavaScript

サーバー側でも UUID を使っていれば、
「クライアントで生成した ID をそのまま DB の主キーにする」といった設計も可能です。

リクエストごとのトレース ID

ログや監視の世界では、「このリクエストの流れを一意に追いたい」というニーズがあります。
そのときに UUID をトレース ID として使います。

const traceId = generateUuid();

console.log("[traceId]", traceId, "API を呼び出します");
// ...
console.log("[traceId]", traceId, "レスポンスを受信しました");
JavaScript

ログを後から見るときに、
同じ traceId をたどることで「一連の処理の流れ」が追いやすくなります。

ランダム ID との違いを整理しておく

前に話した「ランダム ID 生成」と UUID は、似ているようで少し役割が違います。

ランダム ID
自由な形式（英数字だけ、長さも自由）
用途に合わせて軽く作れる
「画面内だけで一意ならいい」など、ローカルな用途向き

UUID
形式が決まっている（8-4-4-4-12 の 16 進数＋ハイフン）
ライブラリや他システムと連携しやすい
「システム全体で一意な ID」として扱いやすい

業務では、

  • UI 内部の一時キー → ランダム ID で十分
  • システム間で共有する ID、ログのトレース ID、DB の主キー → UUID を使う

といった使い分けをすると、設計がきれいになります。

小さな練習で感覚をつかむ

次のようなことを試してみると、UUID 生成の感覚がつかみやすいです。

const ids = new Set();

for (let i = 0; i < 1000; i++) {
  ids.add(generateUuid());
}

console.log("生成した数:", ids.size);
JavaScript

1000 回生成しても、ほぼ確実に重複しないはずです。
（もちろん理論上はゼロではないですが、実務的には十分小さい確率です）

そこから一歩進んで、

  • プレフィックスを付けた UUID（user_${uuid} など）
  • ログ用の traceId として UUID を使う
  • フロントとバックエンドで同じ UUID 形式を使う

といった形で、自分のプロジェクトに「UUID 生成ユーティリティ」を組み込んでみてください。

ポイントは一つだけです。
「UUID が欲しくなったら、毎回バラバラに書かず、必ず同じユーティリティを通す」。

それだけで、ID 周りの設計が一気に整い、
後から仕様変更やライブラリ置き換えが必要になっても、驚くほど楽になります。

スポンサーリンク
タイトルとURLをコピーしました