【Javascript】乱数を使ってパスワード生成ツールを作る

JavaScript

2023年12月13日

はじめに

今回はボタンをクリックするとランダムなパスワードが生成されるツールを作っていきたいと思います。

仕組みとしては0~9,a~z,A~Zの文字を変数に入れてそこからパスワードの長さ分ランダムに文字を取得しする仕様です。

今回は8桁のパスワードが生成されるように作っていきます。

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

まず以下のようなHTMLを準備します。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./script.js"></script>
  </head>
  <body>
    <div>
      <input type="text" id="inputPass">
    </div>
    <div>
      <button id="btn">パスワード生成</button>
    </div>
  </body>
</html>

ボタンをクリックするとinputタグの中にパスワードが生成されるように作っていきます。次にJavascriptでHTMLの要素を取得します。

const inputPass = document.getElementById('inputPass');
const createBtn = document.getElementById('createBtn');

ボタンをクリックするとcreatePass関数が実行されてパスワードが生成されるように作っていきます。

createBtn.addEventListener('click', createPass);

function createPass() {
  // ここにパスワードを生成する処理を書いていく
}

それではcreatePass関数の中身を作っていきます。

function createPass() {
   // パスワードの素材を定義
   const str = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
   // パスワードの桁を定義
   const passLength = 8;
   // 中身が空の変数passwordを用意
   let password = "";
   // 設定したパスワードの桁数までループ
   for(let i = 0; i < passLength; i++) {
    // ランダムに文字を選択
    let select = Math.floor(Math.random() * str.length);
    // 選択された文字をパスワードに追加
    password += str.substring(select, select + 1);
  　}
  // inputPassに値を入れる
  inputPass.value = password;
}

コメントにほとんど記入していますが詳しく説明していきます。

まずパスワードの素材となる文字を変数strに入れてます。passLengthでパスワードの長さを設定しています。

for文はpassLengthまで繰り返されるので8回繰り返します。今回一番難しいのがその中身でまずMatch.random()で「０以上１未満の数字」をランダムで作ってくれます。

コンソールに出すとこのようになります。

しかしこのままだと使いづらいので素材の桁数(62)を掛けます。

コンソールで見ると

このようになります。

0以上の数字になりました。その値をMath.floor()の引数に渡すことで整数に変換してくれます。

Math.floor(Math.random() * str.length)　この式はセットで覚えましょう。

その結果0~62の整数を変数selectに格納しています。さらに変数selectで生成した乱数を使い、変数passwordに1文字追加します。

substring()は文字列を指定された位置から始まり、指定された位置までの部分文字列を取り出すJavaScriptのメソッドです。

これが8回繰り返された値がinputPassの中に生成されます。

画面上で見てみましょう。

ボタンをクリックすると8桁のパスワードが生成されました。

まとめ

for文の中が少し複雑でしたが

Math.floor(Math.random() * str.length)　

乱数を生成するときはこの形を覚えておきましょう。

乱数を使うことでおみくじなども作れたりするので時間のある方は作ってみてください。

ブログ

BLOG

はじめに

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

まとめ