はじめに

JavaScript で 16進数 ランダム文字列を簡単に生成する方法を調べた。

CDN を使う方法(chance.js)、npm からインストールする方法(crypto-random-string)についてまとめた。

TL;DR

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. chance.js
    2. crypto-random-string
      1. type オプション
      2. characters オプション
    3. その他の方法
  5. まとめ
  6. 参考文献

環境・条件

1
2
3
4
5
6
7
8
9
10
11
12
13
$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.15.1
BuildVersion:	19B88

$ node -v
v12.7.0

$ npm -v
6.10.3

$ npm ls crypto-random-string
crypto-random-string@3.0.1 | MIT | deps: 1 | versions: 4
  • chance v1.1.3 (CDN)

詳細

軽く調べた感じでは、CDN を使うなら chance.js、npm からインストールするなら crypto-random-string が良さそうだった。

chance.js

CDN から読み込んで利用できる。

jsDelivr など以外にも、公式サイトのものがある。

1
2
3
4
5
<!-- jsDelivr -->
<script src="https://cdn.jsdelivr.net/npm/chance@1.1.3/chance.min.js"></script>

<!-- 公式サイト -->
<script src="https://chancejs.com/chance.min.js"></script>

ランダム文字列の生成には chance.string を使う。

pool オプションで利用可能な文字列を指定することで、16進数 ランダム文字列を生成できる。

1
2
3
4
5
6
const randomStr = chance.string({
  length: 8,
  pool: '0123456789abcdef',
});
console.log(randomStr);
// => '11bad4d2'

chance.js はその他にも、色々なランダム値を生成できる模様。

crypto-random-string

crypto-random-string も CDN(jsDelivr) はあるがブラウザで読み込んでも使えない。

ブラウザで使いたい場合は webpack とかでどうにかするしかなさそう。

インストールは下記。

1
$ npm i crypto-random-string

cryptoRandomString({length: x}) で、ランダム文字列を生成できる。

type パラメータ(後述)もあるが、デフォルトで 16進数(type: 'hex') なので指定不要。

1
2
3
const cryptoRandomString = require('crypto-random-string');
cryptoRandomString({length: 8});
//=> '2cf05d94'

type オプション

type で指定可能なのは、hex, base64, url-safe の 3種類。

1
2
3
4
5
cryptoRandomString({length: 8, type: 'base64'});
//=> 'BCFZ5h0G'

cryptoRandomString({length: 8, type: 'url-safe'});
//=> 'Oh-2FSAB'

characters オプション

characters で、使用可能な文字を指定可能。

1
2
cryptoRandomString({length: 8, characters: 'abc'});
// => 'cbbbcabc'

絵文字は文字化けしてしまうが、漢字やひらがなは問題なく利用できた。

1
2
3
4
5
cryptoRandomString({length: 8, characters: '今日は良い天気ですね'});
// => 'すね日ね日良良で'

cryptoRandomString({length: 8, characters: '🚀🐶🎉'});
// => '�🞉�🚀��'

その他の方法

他の方法は JavaScriptでお手軽にランダム文字列の生成 - Qiita に良くまとまってた。

最初に上記を見て、色々と細かいことを考慮すると面倒そうなので、ライブラリ調べたのがこの記事。

その他は下記あたりを見ると良さそう。

まとめ

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list