3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Vue.js(javascript)でulid

Last updated at Posted at 2022-01-25

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

#参考

3
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?