Zenn
🔑

【JavaScript】UUID Ver4と被らないオリジナルUUIDを簡単に作成しよう🤗

2023/01/14に公開
JavaScript
UUID
tech

はじめに

「UUIDを自作したい😭」
「別箇所で発行しているUUIDとはまた別のルールを持ったUUIDを作成したい！」

そんなことはないでしょうか?

今回はUUIDの作成方法を解説し、自分だけのオリジナルUUID作成する方法を解説します！

この記事を見るメリット

  • UUID Ver4の仕様が理解できる
  • オリジナルのUUID作成方法が理解できる
  • 既存のUUIDと被らないUUIDを作成できる(実際は被ることはほぼないですが...)

対象者

この記事は下記のような人を対象にしています。

  • プログラミング初学者
  • 駆け出しエンジニア
  • UUIDを自作したい方

結論

オリジナルUUIDを作成する関数を作成

// UUIDのVer4では、14文字目が必ずバージョン番号である「4」なので、この値を好きな値にすることで被りを防止
const createUniqueUserId = (versionNumber = 'A') => {
  // splitでUUIDのテンプレート文字列を配列にする
  const idTemplateArray = 'xxxxxxxx-xxxx-Cxxx-yxxx-xxxxxxxxxxxx'.split('')
  
  for (let i = 0; i < idTemplateArray.length; i += 1) {
    switch (idTemplateArray[i]) {
      case 'x':
        idTemplateArray[i] = Math.floor(Math.random() * 16).toString(16).toUpperCase()
        break
      case 'y':
        idTemplateArray[i] = (Math.floor(Math.random() * 4) + 8).toString(16).toUpperCase()
        break
      case 'C':
        idTemplateArray[i] = versionNumber
        break
    }
  }

  return idTemplateArray.join('')
}

解説

ここからはコードの中でもぱっと見わかりにくい処理を、順に解説させていただきます。

case 'x'の処理

以下のコードは一見分かりにくいですが、分解して読み解いていくとすっと理解することができます。

Math.floor(Math.random() * 16).toString(16).toUpperCase()
  1. Math.floor(Math.random() * 16)で0~16までの整数を作成
  2. .toString(16)で16進数の文字に変換(0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F)
  3. .toUpperCase()で大文字に変換

case 'y'の処理

こちらのコードはcase 'x'の処理とほぼ同じですが、変換する文字をA~Fのアルファベットのみにするようにしています

(Math.floor(Math.random() * 4) + 8).toString(16).toUpperCase()
  1. (Math.floor(Math.random() * 4) + 8)でA~Fまでの整数を作成
  2. .toString(16)で16進数の文字に変換(0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F)
  3. .toUpperCase()で大文字に変換

全体の流れ

この記事ではバージョンナンバーの箇所を自由に指定でき、既存のUUIDとも被ることのない、独自関数を作成しましたが、以下のような流れで処理をしています

  1. const idTemplateArrayでUUIDの雛形を配列で用意します
  2. forとswitchでidTemplateArrayの中身を指定した文字に変換
    • case 'x'では0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,Fの文字を代入
    • case 'y'ではA,B,C,D,E,Fの文字を代入
    • case 'C'はバージョンナンバーなので引数の文字を代入
  3. idTemplateArrayが配列のままなので、文字列に直してreturnする

おわりに

最後まで記事を見てくださりありがとうございました。
誤字や脱字、コードのリファクタリングできる箇所などがありましたらコメントくださるとありがたいです!
また、いいねをしてくださると、筆者が喜びます:)

Discussion