JavaScriptでUUIDを生成する方法を紹介します。
方法1 : crypto.randomUUID()を利用
コード
以下のコードを記述します。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
window.onload = function onLoad() {
var uuid = crypto.randomUUID();
target = document.getElementById("output");
target.innerHTML = uuid;
}
</script></head>
<body>
<div id="output"></div>
</body>
</html>
解説
crypto.randomUUID() メソッドで16進数表記の
(8桁)-(4桁)-(4桁)-(4桁)-(12桁)のUUIDを作成できます。
var uuid = crypto.randomUUID();
実行結果
上記のHTMLファイルをWebブラウザで表示すると下図の画面が表示されます。UUIDが生成され画面に表示されています。
方法2 : コードで実装
コード
以下のコードを記述します。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
window.onload = function onLoad() {
var uuid = (function () {
var S4 = function () {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
}
return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
})();
target = document.getElementById("output");
target.innerHTML = uuid;
}
</script>
</head>
<body>
<div id="output"></div>
</body>
</html>
実行結果
上記のHTMLファイルをWebブラウザで表示すると下図の画面が表示されます。UUIDが生成され画面に表示されています。
方法3 : ライブラリを使用する
https://github.com/LiosK/UUID.jsのUUID生成ライブラリを用いてUUIDを生成できます。
ライブラリの配置
ダウンロードしたライブラリファイル"uuid.js", "uuid.core.jp"はuuidフォルダ内に配置しました。
コード
以下のコードを記述します。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript" src="uuid/uuid.js"></script>
<script type="text/javascript">
window.onload = function onLoad() {
var id = UUID.generate()
target = document.getElementById("output");
target.innerHTML = id;
}
</script></head>
<body>
<div id="output"></div>
</body>
</html>
実行結果
上記のHTMLファイルをWebブラウザで表示すると下図の画面が表示されます。UUIDが生成され画面に表示されます。
著者
iPentecのプログラマー、最近はAIの積極的な活用にも取り組み中。
とっても恥ずかしがり。
最終更新日: 2023-12-11
改訂日: 2023-12-11
作成日: 2014-03-10
