JavaScript でパスワードを自動生成

ログインや新規登録等で目にする「パスワード」。
いちいち自分で考えるのがめんどくさい。

手軽に推測されにくいパスワードを自動生成できないか
…なら作ってみよう！

ただし、パスワードをメモするのをお忘れなく
（コレ大事）

---

今回は

● 8 文字のパスワード
● 英字（大文字・小文字）と数字を含める

というよくあるパターンのパスワードをJavaScript で自動生成させてみました。

これは**「骨格の部分のみ」**を記述しています。スタイリング等は含まれておりませんのでご了承ください。

---

# サンプルプログラム

password.js

     //英数字を用意する
      var letters = 'abcdefghijklmnopqrstuvwxyz';
    　var numbers = '0123456789';

      var string  = letters + letters.toUpperCase() + numbers;
     //toUpperCase()  小文字を大文字に変換

      var len = 8;　　　//8文字
      var password=''; //文字列が空っぽという定義をする
     

      for (var i = 0; i < len; i++) {
       password += string.charAt(Math.floor(Math.random() * string.length));
       // charAt メソッドを用いて文字列から指定した文字を返す。
      }
      
     console.log(password);

それでは詳しく見ていきましょう。

---

# 文字列を連結させているその理由は？

まずは文字を用意する必要があります。
var letters で a ~ z 、var numbersで 0~9 の文字列を定義します。

var string で用意した英数字を連結させています。

今回は大文字の英字を含めるので、toUpperCase ( ) メソッドを使って大文字に変換したものを追加します。

password.js

     
      var letters = 'abcdefghijklmnopqrstuvwxyz';
    　var numbers = '0123456789';

      var string  = letters + letters.toUpperCase() + numbers;

      
     console.log(string);
    //  abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789

そうすると、大文字・小文字を含んだ英字および数字が、変数 string に入りました。

…しかし、なぜわざわざこんなことをするのでしょうか？
次の項目で詳しく見ていきましょう。

# 文字を取り出すには？

　その前に、パスワードの文字数と本体を変数でセットしておきましょう。

password.js

   var len = 8;　　　//8文字
   var password=''; //文字列が空っぽ（空文字列）という定義をする
     

var password で空文字列定義をしないと、「undefined」が返ってしまうので忘れずに定義しておきましょう。

password.js

   //var len = 8;　　　8文字
   //var password='';  空文字列を定義した変数　password

 for (var i = 0; i < len; i++) {
       password += string.charAt(Math.floor(Math.random() * string.length));
       // charAt メソッドを用いて文字列から指定した文字を返す。
      }

ここで登場したのが、charAt（） メソッドです。

これは、**「文字列から指定した文字を返す」**という今回の重要なメソッドになります。これを使って文字を取り出してみましょう！

# 8 文字ランダムパスワード
　…さて、ここで　var string を思い出してみてください。これには大文字・小文字を含んだ英字および数字が文字列として入っていますよね。

…あれ？、文字列？

　はい、そうなんです。変数 string をわざわざあんな文字列にしたのは、charAt（） メソッドを使うためということだったんです。

では、このメソッドはどう使うのでしょうか？

( ) の中身である引数には、「0 から文字列の長さより 1 小さい整数までの間の整数」が入ります。

引数を入れなければ 「0」を引数として使用し、範囲外の整数なら「空文字」として返します。

password.js

  var stg = "abc123";
  var result1 = stg.charAt();    // 出力:a
  var result2 = stg.charAt(3);   // 出力:1
  var result3 = stg.charAt(10);  // 出力:

これらを踏まえて、いよいよ 8 文字のランダムパスワードを完成させます。

password.js

　 //var string  →　英数字
   //var len = 8;　　　8文字
   //var password='';  空文字列を定義した変数　password

 for (var i = 0; i < len; i++) {
       password += string.charAt(Math.floor(Math.random() * string.length));
       // charAt メソッドを用いて文字列から指定した文字を返す。
      }

for 文で、文字数（len) 分だけ password 変数の文字列を連結させます。

そして、string.charAt( )で、変数 string の文字列の中から一つ取り出すようにします。

引数は、Math.floor(Math.random()*string.length) で 0 から変数string の文字列の長さより 1 小さい整数をランダムに出力します。

※ charAt( ) の引数は**「0 から文字列の長さより 1 小さい整数までの間の整数」**ということに注意しましょう。

これで、8 文字のランダムパスワードが完成しました！！

# 応用例

　記号も含めたいときは新たに変数を作り、変数 string に連結をさせれば簡単にできます。

password.js

     
 var letters = 'abcdefghijklmnopqrstuvwxyz';
 var numbers = '0123456789';
 var symbols = '!#$%&()'
 var string  = letters + letters.toUpperCase() + numbers + symbols;

      

　文字数を変更したいときは、var len の値を変更するだけで簡単に出来てしまいます。

password.js

　 //var string  
   //var len = 16;　　　16文字
   //var password='';  空文字列を定義した変数　password

 for (var i = 0; i < len; i++) {
       password += string.charAt(Math.floor(Math.random() * string.length));
       }

アプリを作る時は

● 文字数に関しては入力した値を取得し、入力した値に応じた文字数のパスワードを生成する。

● 数字・記号を入れるかどうかをチェックボックスにして、チェックした項目に応じて文字列を連結させる (var string)

といったことを考慮すると、より柔軟なパスワード生成ができると思います。

# 最後に
　
　アプリを作ることに少しずつ慣れてはきましたが、分からないことがまだまだたくさんあります。トライ& エラーの連続で少しずつですが前に進んでいるような気がします。さらに上達できるように頑張りたいと思います。