JavaScriptでランダムな文字列や文字を生成する方法をわかりやすく解説
JavaScriptでランダムな文字列を生成する基本の考え方
JavaScriptでランダムな文字列や文字を生成するには、Math.random() メソッドを使うのが一般的です。Math.random()は0以上1未満のランダムな数値を返すため、これを文字セットのインデックスに変換することで、任意の文字をランダムに取り出せます。
今回は、以下の文字セットから6文字のランダムな文字列を生成する例を紹介します。
'ABCDEFGHIJKLMNOabcdefghijklmnopqrstuvwxyzPQRSTUVWXYZ';
サンプルコード
指定した文字数分だけランダムな文字列を生成する関数のコード例は次のとおりです。
function generateRandomNumber(numberOfCharacters) {
var randomValues = '';
var stringValues = 'ABCDEFGHIJKLMNOabcdefghijklmnopqrstuvwxyzPQRSTUVWXYZ';
var sizeOfCharacter = stringValues.length;
for (var i = 0; i < numberOfCharacters; i++) {
randomValues = randomValues + stringValues.charAt(Math.floor(Math.random() * sizeOfCharacter));
}
return randomValues;
}
console.log(generateRandomNumber(6));コードのポイント
このコードの仕組みを簡単に整理すると、以下のようになります。
1. 文字セットを定義する: 変数 stringValues に、ランダムに選びたい候補となるアルファベット(大文字・小文字)を格納します。
2. 文字セットの長さを取得: stringValues.length で候補文字の総数を取得し、ランダムなインデックスの範囲として使います。
3. ランダムな文字を選ぶ: Math.random() * sizeOfCharacter で0〜文字数未満のランダムな小数を作り、Math.floor() で整数に切り下げます。その値を charAt() に渡すことで、対応位置の1文字を取り出します。
4. 指定回数だけ繰り返す: forループで目的の文字数になるまで連結し、最終的なランダム文字列として返します。
プログラムの実行方法
上記のプログラムを実行するには、Node.js環境で次のコマンドを使用します。
node fileName.js
ここでは、ファイル名を「demo270.js」として保存しているものとします。その場合、実行コマンドは以下になります。
node demo270.js
実行結果
プログラムを実行すると、コンソールには6文字のランダムな英字文字列が出力されます。実行するたびに結果が変わる点に注目してください。
PS C:\Users\Amit\javascript-code> node demo270.js qIcoCT
応用:より安全なランダム文字列が必要な場合
Math.random()は手軽ですが、暗号論的に安全な乱数ではありません。パスワードやトークンなどセキュリティに関わる用途では、crypto.getRandomValues() や Node.js の cryptoモジュール(randomBytes) を使うことをおすすめします。一方、一時的なIDやテストデータの生成などであれば、今回のようなシンプルな実装で十分実用的です。
-
JavaScriptでランダムな16進数カラーコード(HEX)を生成する方法
JavaScriptを使えば、ランダムな16進数のカラーコード(HEXコード)を簡単に生成できます。この記事では、ボタンをクリックするたびにランダムな色が表示されるシンプルなサンプルを紹介します。 実装例 以下のコードでは、「GENERATE」ボタンをクリックするとランダムなHEXカラーコードが生成され、その色がボックスの背景に適用されると同時に、コード自体も画面に表示されます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" />
-
JavaScriptのエスケープ文字とは?特殊文字のエスケープ方法と一覧を解説
エスケープ文字とは?エスケープ文字とは、プログラム上で本来意図した意味とは別の特別な意味に解釈されてしまう文字のことです。たとえば、ダブルクォートやシングルクォート、改行コードなどが該当します。こうした文字を「そのままの文字」として扱い、画面に出力したい場合には、直前にバックスラッシュ「\」を付けて記述します。この操作を「エスケープ処理」と呼びます。JavaScriptの主なエスケープ文字一覧コード意味・出力結果\bバックスペース\fフォームフィード\n改行(ニューライン)\rキャリッジリターン\t水平タブ\v垂直タブ\シングルクォート()\ダブルクォート()\\バックスラッシュ(\)バックス