日曜エンジニアのIT道場
ITを学び、DXに備える
    JavaScript

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

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

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

     

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

    GitHubで公開しております。

     

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

     

     

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

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

    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つ紹介します。...