Vue.js(javascript)でulid

背景

自分が作業する環境でULIDをJavascript(Vue.js)で使用する機会が出てきたため、調べたところ記事もそんなに出てないし、投稿しようと思いました。

環境

ulidx 0.3.0
vue 2.6.14

実装方法

関連するライブラリをインストール

ulidx

今回使用するライブラリはulidxです。npmにはulidというライブラリがあるんですが、長くメンテナンスがされていないようです。そのulidを元にしつつ、機能を拡張させたものがulidxになります。今回はこのulidxの使い方を紹介していきます。

　インストール

npm install ulidx

使い方

ulidの作成

ulidxをインポートします。以下のコードはulidの作成をしています。

import { ulid } from "ulidx";

    createULID(){
      let ulidCreated = ulid(); // 01FT83PSC9VD2BB77H1M0K5P2A
      let ulidSeed = ulid(100); //シードを指定してULIDを作成 //0000000034WMEBWSY2JZC947HD    
    },

単調増加するulidの作成

monotonicFactoryは単調増加するULIDを作成できます。

import { monotonicFactory } from "ulidx";

     monoULID(){
      let ulidMono = monotonicFactory();
      let ulidM1 = ulidMono(150000); //0000004JFGTT02CT60BNH4SDCR
      let ulidM2 = ulidMono(150000); //0000004JFGTT02CT60BNH4SDCS
      let ulidM3 = ulidMono(150000); //0000004JFGTT02CT60BNH4SDCT

    }

ulidからUNIX時間に変換

ULIDをUNIXに変換します。

import { decodeTime } from "ulidx";

    decodeULID(){

       let Unix = decodeTime("01FT850VYMMNZR7CNMTZZCD90V"); //1643098697684
       //UNIXから日本時間に変換
       let date = new Date(Unix)
       console.log(date.toString()) //Tue Jan 25 2022 17:18:17 GMT+0900 (日本標準時)
    }

サンプルコード

HelloWorld.vue

<template>
  <div class="hello">
    <ul style="margin:0 auto 0 auto;  width:600px; text-right">
      <li>normal create:{{ulidCreated}}</li>
      <li>seed create:{{ulidSeed}}</li>
      <li>mono create1:{{ulidM1}}</li>
      <li>mono create2:{{ulidM2}}</li>
      <li>mono create3:{{ulidM3}}</li>
      <li>decode(UNIX):{{ulidDecoded}}</li>
    </ul> 
  </div>
</template>

<script>
import { ulid,monotonicFactory,decodeTime } from "ulidx";

export default {
  name: 'HelloWorld',
  data: () => ({
    ulidCreated:null,
    ulidDecoded:null,
    ulidSeed:null,
    ulidM1:null,
    ulidM2:null,
    ulidM3:null

  }),

  mounted(){
    this.createULID();
    this.seedULID();
    this.monoULID();
    this.decodeULID();
  },

  methods:{
    createULID(){
      this.ulidCreated = ulid();
    },

    seedULID(){
      this.ulidSeed = ulid(100);
    },

    monoULID(){
      let ulidMono = monotonicFactory();
      this.ulidM1 = ulidMono(150000); 
      this.ulidM2 = ulidMono(150000); 
      this.ulidM3 = ulidMono(150000); 
    },

    decodeULID(){
      this.ulidDecoded = decodeTime("01FT850VYMMNZR7CNMTZZCD90V");
      let date = new Date( this.ulidDecoded)
      console.log(date.toString())
    }
  }
}
</script>

まとめ

今回はVueでのULIDの取り扱い方法について書きました。何かご指摘等あれば、ぜひコメントをください！

参考

• ulidxのドキュメントページ
• JavaScriptでunixtimeから日時へ変換するやり方のメモ