#背景
自分が作業する環境で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の取り扱い方法について書きました。何かご指摘等あれば、ぜひコメントをください!
#参考