はじめに

今回は、ボタンをクリックするだけでランダムなパスワードを自動生成するツールを作成します。

「0〜9」「a〜z」「A〜Z」の文字を組み合わせ、指定した長さのパスワードを抽出する仕組みです。

今回は、標準的な8桁のパスワードを生成するコードを例に解説していきます。

1. HTMLの準備

まずは、パスワードを表示するための input タグと、生成を開始する button タグを用意します。

ボタンをクリックした際に、JavaScriptの createPass 関数が実行されるように設定します。

<!-- パスワードを表示する入力欄 -->
<input type="text" id="pass-display">

<!-- クリックするとcreatePass関数を実行するボタン -->
<button onclick="createPass()">パスワード生成</button>

2. Javascriptでパスワードを生成する

それでは、メインとなる createPass 関数の中身を作っていきましょう。

ソースコード

function createPass() {
  // パスワードの素材となる文字（0-9, a-z, A-Z）
  const str = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
  
  // 生成するパスワードの長さ（今回は8桁）
  const passLength = 8;
  
  // 生成されたパスワードを一時保存する変数
  let password = "";

  // パスワードの長さ分（8回）だけ繰り返し処理を行う
  for (let i = 0; i < passLength; i++) {
    // 【重要】0以上、素材の文字数(62)未満の整数をランダムに生成
    let select = Math.floor(Math.random() * str.length);

    // substringメソッドを使い、ランダムに選ばれた位置の文字を1文字取り出して連結
    password += str.substring(select, select + 1);
  }

  // 生成された8桁の値をHTMLのinput要素に表示させる
  const inputPass = document.getElementById("pass-display");
  inputPass.value = password;
}

仕組みの解説

この記事で最も重要なポイントは、**「どうやってランダムに文字を選ぶか」**という部分です。

乱数の生成: Math.random() は「0以上1未満の数字」をランダムに生成します。これに素材の桁数（62文字）を掛け、Math.floor() で小数点を切り捨てることで、0〜61の整数（インデックス）を作り出します。
- Math.floor(Math.random() * str.length) この数式はセットで覚えておくと非常に便利です。
文字の抽出: JavaScriptの substring() メソッドを使用します。これは指定した位置から部分文字列を取り出すメソッドで、これを使ってランダムに選ばれた位置の文字を1文字ずつ取得し、変数 password に連結していきます。
結果の出力: 最後に、8回繰り返して出来上がった文字列を input 要素の value に代入して画面に表示させます。

まとめ

一見難しそうに見える繰り返し処理（for文）も、中身を紐解けば「乱数を生成して文字を取り出す」というシンプルな構造です。

この Math.floor(Math.random() * str.length) の形を覚えておけば、おみくじアプリなど、乱数を使った様々なツールに応用することができます。

ぜひ自分なりにアレンジして、新しいツール作りに挑戦してみてください！

JavaScriptで作成する！ランダムパスワード生成ツールの作り方