UUIDを配列や連想配列in配列で生成出力できるWebサービスつくった

公開日:2019-04-11
最終更新:2019-04-12

UUIDを配列連想配列in配列で指定個数生成できるWebサービスをリリースしました

サービスの紹介と使った技術とかライブラリとか紹介していきます~!

追記:v1.0.4アップデート(2019/4/12)
フォントを細めに変更
テキストを校正
テンプレートエディタに行数を表示
その他微調整

サービスのリンク

UUID v4 Generator

サービスの概要

単純にUUID(Universally Unique Identifier)を生成できるサービスです。
UUIDというのは、
bf46391a-f07a-4a5e-84df-a4a25e038823
↑こんな感じの一意な識別子のことです。

アプリの主な機能:

  • UUIDの大文字小文字の出力に対応
  • お好きなだけUUIDを生成できる(10万くらい生成できるけど時間かかる)
  • リストでUUIDを出力
  • 配列でUUIDを出力
  • ユーザー任意の連想配列で、連想配列in配列でUUIDを出力

目玉機能は、配列出力 と 連想配列in配列出力

配列出力は、そのままの意味で、生成したUUIDを配列にして出力してくれます。

連想配列in配列出力は、ユーザーがテンプレートとなる連想配列を決めて、それを元に任意のプロパティ(キー)にUUIDを含めた連想配列の配列を生成します。

元となる連想配列をユーザーが指定できるように簡易なコードエディターを用意しているので、連想配列の中身はユーザーが好きなようにプロパティ(キー)を与えられます。

例えば、こんな感じでユーザーが連想配列を指定したとします。

{  
    id: "uuid",  
    text: "",  
    value: ""  
}  

こんな感じでUUIDを含めた連想配列の配列が生成されます。

つくった目的

JSONやJavaScriptでユニークIDを手軽にサクッと生成して使いたいな~と思い、
WebにUUIDジェネレーターないかググって、ジェネレーター自体はいくつかありましたが、配列で出力してくれるものがなかったんですね。

ないなら作るぞ~!

使ったもの

  • JavaScript
    • Vue.js (JavaScript Framework)
    • CodeFlask (軽くてミニマムなコードエディタ)
    • 30 seconds of code (ES6+で書かれた便利なコードスニペット集)
  • CSS/SCSS
  • Vue CLI 3
    Vue.jsのプロジェクトを初期化からビルドまで超絶簡単に整えてくれるやつ。
    グラフィカルなUIモードもあってめっちゃ使いやすい。
  • Netlify
    超イケてるホスティングサービス。

サービス自体たいしたことないので使ってるものはこのくらい。

UUIDの生成コード

30 seconds of codeに載っているコードををそのまま使ってます。

const UUIDGeneratorBrowser = () =>  
  ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>  
    (c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16)  
  );  

Web Crypto APIを使って生成してますね。
UUIDバージョン4に準拠したUUIDが生成されます。

今後実装したいこと、改善したいこと

とりあえず作ってリリースしましたが、今回実装を見送ったものや改善したい部分はあります。

実装したい機能 🧪

  • 既存の連想配列の配列データにUUIDを加える。
    すでに静的データとして連想配列の配列があったとして、そのデータをコピーして当サービスにペーストすれば、連想配列にUUIDを付け加える機能です。

改善したいこと 🧬

  • UUIDの生成個数が増えると時間がかる。生成の高速化。
    生成数が1万・10万と増えれば、当然そのぶん生成にかかる時間が増えますから、大量に生成する場合は高速化が必要です。
    改善策は簡単で、生成数に合わせて処理をいくつかに分割して、Web Workerに投げてやればいいです。

最後に

初めてWebサービスを作って公開してみましたが、意外とあっさり公開できてしまいました。
これは、Vue CLI 3やNetlifyの影響が大きいと感じました。
Vue CLI 3のおかげでpackage.jsonやwebpack、その他もろもろな初期設定などしないで開発ができましたし、Netlifyのおかげで簡単すぎて心配になるくらい楽にデプロイできました。
開発に専念できる環境が個人でも簡単に構築できるって素晴らしいですね…。

UUIDが必要な場合はぜひ使ってみてください~!

記事が少しでもいいなと思ったらクラップを送ってみよう!
94
+1
プログラミング初心者です。作ったものとかメモ代わりのTipsとか投下していきます~。

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする