JavaScript

JavaScriptでパスワード生成プログラム

JavaScriptで、パスワードを生成するWebアプリを作りました。

ランダムな文字列をWebサイト上に表示するものです。

 

こちらが作ったアプリです。

GitHubで公開しております。

 

この記事では、JavaScriptでパスワードを生成するプログラムの作り方をご紹介します。

 

 

目次
  1. パスワード生成アプリの仕様
  2. パスワード生成アプリの作り方
  3. まとめ
  4. 参考サイト

パスワード生成アプリの仕様

まずは、このパスワード生成アプリの仕様をご紹介します。

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

 

 

 

パスワード生成アプリの作り方

ランダムな文字を表示させるwebアプリを作るには、2つのファイルを作ります。

 

  1. ランダムな文字を生成するプログラム（JavaScript）
  2. 生成した文字を画面に表示する（HTML）

 

まずは、①ランダムな文字を生成するJavaScriptのプログラムをご紹介します。

 

①ランダムな文字を作るためのJavaScriptプログラム

ランダムな文字を表示させるためのプログラムを分解すると、4つの工程になっています。

  1. パスワードに使用する文字を決める。
  2. パスワードの桁数を決める。
  3. ランダムな文字列を作る。
  4. 作った文字を表示する。

 

下記サンプルコードのコメントに、番号がふってあるので、工程を見比べてみてください。

function password(){
  // ①パスワードに使用する文字を変数に入れておく
  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;
}

 

これで「ランダムな8桁の文字列」を作り出すことができました。

 

私が作ったアプリは、パスワードの桁数を任意に変更できるようになっていますが、この記事では、プログラム初心者にわかりやすくするため、この部分の説明は控えておきます。

知りたい方は「javascript input 値取得」などで調べてみてください。

 

 

次に、②生成した文字をブラウザに表示する（HTML）を作っていきます。

 

②作ったパスワードをブラウザに表示する（HTML）

<p id="result"></p>
<button onclick="password()">生成する</button>

 

HTMLはシンプルです。

 

  1. パスワードを表示する段落を（pタグ）で作ります。
  2. ボタン（buttonタグ）を設置します。
  3. ボタンが押されたら、さきほど作っておいた、JavaScriptのプログラムが動くように、onclick を設定します。

 

 

これで完成です！！

 

 

まとめ

  • プログラム部分(JavaScript)と表示部分(HTML)を分けて考える。
  • ランダムな文字列を作るプログラムを関数（function）で設定する。
  • ボタンを押した時に関数を実行させるには、button onclick=”関数名()”
  • 変数の中身を表示するには、要素をidで指定して、要素.textContent = 変数名;

 

 

参考サイト

こちらの記事も参考になるので、読んでみてください。

 

 

JavaScript初心者におすすめの本はこちら

JavaScriptの本を10冊読んだ中からおすすめを3つJavaScriptの本を10冊読んだ中からおすすめを3つ紹介します。...
関連記事