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

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

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

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


---

今回は

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

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


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

---

#:pencil2: サンプルプログラム

```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);
```

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

---

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

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


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

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

```javascript:password.js
     
      var letters = 'abcdefghijklmnopqrstuvwxyz';
    　var numbers = '0123456789';

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

      
     console.log(string);
    //  abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789
```

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

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


#:pencil2: 文字を取り出すには？


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

```javascript:password.js

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

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


```javascript: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（） メソッド**です。

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


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

**…あれ？、文字列？**


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


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

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

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

```javascript:password.js

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

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

```javascript: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 文字のランダムパスワードが完成しました！！

#:pencil2: 応用例

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

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

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

```javascript: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)


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


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