Javascript

JavaScriptでパスワード生成ツールを作った

「JavaScriptを使ってパスワード生成アプリを作りたい初心者向け」の記事です。

 

Webサイトやアプリの「会員登録」に「パスワード」を設定することって多いと思います。セキュリティの観点から、パスワードはサイトごとに変えたほうがいいとされています。しかし、毎回パスワードを考えるのが面倒なので、JavaScriptを使って「ランダムなパスワードを生成するツール」を作ってみました。

HTMLとJavaScriptで作るプログラムなので、Web上で誰でも使えるツールが作れます。

 

 

パスワード生成ツールの仕様

今回作ったパスワード生成ツールの仕様です。

  1. ボタンを押すと、ランダムな英数字が表示される。
  2. パスワードの桁数は、任意に決めることができる。

 

こちらが作ったアプリです。試してみてください。
パスワード生成アプリ

 

パスワード生成ツールの作り方

HTMLとJavaScriptのコードをご紹介します。

HTML

  • ボタンを押すと関数が動くように設定します。
  • buttonタグに「onclick」属性をつけておきましょう。
  • パスワードを表示させたい場所に、空のpタグを作って、idを付けておきます。
<p>ボタンをクリックするとランダムなパスワードを生成します!</p>
<button onclick="random()">生成する</button>
<p id="result"></p>

 

HTMLはこれでOKです。

つづいて、JavaScriptの解説です。

JavaScript

JavaScriptの解説です。プログラムは上から順に実行されるので、順に書いていきましょう。まず、

  • 「パスワードで使用する文字」(小文字と大文字のアルファベットと0から9の数字)を変数「str」に入れておきます。
  • パスワードの文字数を変数「len」に入れておきます。
  • 一文字ずつランダムな文字を抽選して変数「password」に入れていきます。
  • それをパスワードの文字数の分だけ繰り返します。(サンプルの場合は8回)
  • 8回の抽選が終わったら、パスワードを表示する。

という流れです。

function random(){
  //使用文字の定義
  var str = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
    
  //桁数の定義
  var len = 8;
    
  //ランダムな文字列の生成
  var password = "";
  for(var i=0; i<len; i++){
    password += str.charAt(Math.floor(Math.random() * str.length));
      }

  //変数passwordの値を、resultというidを持った要素に代入
  document.getElementById('result').textContent = password;
}

 

 

参考サイト

参考になった記事を載せておきます。

 

まとめ

  • パスワード生成のプログラムを関数(function)として設定する。
  • JavaScriptでランダムに抽選するには、random関数を使う。
  • HTMLで作ったボタンを押した時に関数を実行させるには、button onclick=”関数名()”
  • 変数の中身を表示するには、要素をidで指定して、.textContent = 変数名;