Web Crypto API（ランダム値生成） — crypto.getRandomValues(new Uint8Array(16))
JavaScript には Web Crypto API という「暗号用途に使える安全な乱数生成機能」があります。Math.random() は簡単ですがセキュリティ用途には不向きです。パスワード生成やトークン作成には crypto.getRandomValues を使うのが基本です。
基本のコード例
// 16バイトの安全な乱数を生成
const array = new Uint8Array(16);
crypto.getRandomValues(array);
console.log(array);
// 例: Uint8Array(16) [123, 45, 67, ...]
Uint8Array(16): 0〜255 の整数を16個格納できる配列。crypto.getRandomValues(...): 配列を埋める形で乱数を生成。暗号的に安全。
よく使うテンプレート集
ランダムな16進文字列を作る
function randomHex(len = 16) {
const arr = new Uint8Array(len);
crypto.getRandomValues(arr);
return Array.from(arr).map(b => b.toString(16).padStart(2, "0")).join("");
}
console.log(randomHex()); // 例: "a3f9c1d4..."
ランダムな英数字文字列を作る
function randomString(len = 16) {
const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
const arr = new Uint8Array(len);
crypto.getRandomValues(arr);
return Array.from(arr).map(b => chars[b % chars.length]).join("");
}
console.log(randomString()); // 例: "k9AzX2pQ..."
UUID風の文字列を作る
function randomUUID() {
const arr = new Uint8Array(16);
crypto.getRandomValues(arr);
// RFC4122 version 4 に準拠
arr[6] = (arr[6] & 0x0f) | 0x40;
arr[8] = (arr[8] & 0x3f) | 0x80;
return [...arr].map((b, i) => {
const s = b.toString(16).padStart(2, "0");
return [4,6,8,10].includes(i) ? "-" + s : s;
}).join("");
}
console.log(randomUUID()); // 例: "550e8400-e29b-41d4-a716-446655440000"
例題: ワンタイムパスワード生成
function generateOTP(length = 6) {
const arr = new Uint8Array(length);
crypto.getRandomValues(arr);
return Array.from(arr).map(b => (b % 10)).join(""); // 0〜9の数字
}
console.log("あなたのOTP:", generateOTP()); // 例: "482913"
- 効果: 6桁の数字をランダムに生成。ログイン認証などに応用可能。
実務でのコツ
- セキュリティ用途:
Math.random()は予測可能なので使わない。必ずcrypto.getRandomValues。 - 配列型:
Uint8ArrayやUint32Arrayなど TypedArray を渡す必要がある。 - 長さ: 必要なバイト数を指定。例えば 16バイトなら
Uint8Array(16)。 - 文字列化: そのままでは数値配列なので、16進や英数字に変換して使う。
- UUID生成: 最近のブラウザには
crypto.randomUUID()も用意されている。
ありがちなハマりポイントと対策
- 普通の配列を渡すとエラー:
- 対策:
new Uint8Array(...)のように TypedArray を必ず使う。
- 対策:
- 乱数が偏る？:
- 対策:
crypto.getRandomValuesは暗号的に安全。偏りはなく安心して使える。
- 対策:
- 古いブラウザで動かない:
- 対策: サポート状況を確認。モダンブラウザならほぼ対応済み。
練習問題（ランダムパスワード生成）
function generatePassword(len = 12) {
const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*";
const arr = new Uint8Array(len);
crypto.getRandomValues(arr);
return Array.from(arr).map(b => chars[b % chars.length]).join("");
}
console.log("ランダムパスワード:", generatePassword());
- 効果: 英数字＋記号を含む安全なランダムパスワードを生成。
直感的な指針
crypto.getRandomValues= 「安全な乱数を配列に詰める」関数。- TypedArrayを渡す → 数値配列が返る → 文字列に変換して使う。
- パスワード、トークン、UUIDなどに応用できる。
- 初心者はまず「16進文字列化」から試すと理解しやすい。