へっぽこITエンジニア@名古屋のブログ

Follow me on GitHub

JavaScriptでパスワード自動生成

Javascriptを使ってパスワードを自動生成するサービスです。どこにも情報を送っていないですし、この画面だけで完結しています。安心して使ってください。

利用する文字列

※利用する記号・・・!#$%&()

文字数

生成されたパスワード

実装方法

実際に書いたプログラムを解説します。

HTMLを作成

まずはHTMLを作成です。 普通にチェックボックスと、それに付随する文字を書いているだけです。

各項目にはidをふって、document.getElementIdで取得できるようにしています。 また、<label for="xxx">で文字をクリックしてもチェックボックスのOn、Offが切り替わるようにしています。

<input type="checkbox" id="useSmallAlphabet" checked="checked"/>
<label for="useSmallAlphabet">アルファベット(小文字)を利用</label>

<input type="checkbox" id="useLargeAlphabet" checked="checked"/>
<label for="useLargeAlphabet">アルファベット(大文字)を利用</label>

<input type="checkbox" id="useNumber" checked="checked"/>
<label for="useNumber">数字を利用</label>

<input type="checkbox" id="useSymbol"/>
<label for="useSymbol">記号を利用※</label>

Javascriptを作成

つぎはJavascriptです。

次のサイトを参考にして関数を作成しました。 JavaScriptでお手軽にランダム文字列の生成

まずは全体です。

const smallAlphabet = "abcdefghijk"
const largeAlphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
const number = "0123456789"
const symbol = "!#$%&()"
function createPassword(){
  let useString = "";
  if(document.getElementById("useSmallAlphabet").checked){
    useString += smallAlphabet;
  }
  if(document.getElementById("useLargeAlphabet").checked){
    useString += largeAlphabet;
  }
  if(document.getElementById("useNumber").checked){
    useString += number;
  }
  if(document.getElementById("useSymbol").checked){
    useString += symbol;
  }

  let length = document.getElementById("passwordLength").value
  let lengthNumber
  if(isNaN(Number(length))){
    lengthNumber = 5;
  }else{
    lengthNumber = Number(length);
  }
  let result = Array.from(Array(lengthNumber))
                .map(()=>useString[Math.floor(Math.random()*useString.length)])
                .join('');
  document.getElementById("createdPassword").value = result;

}
window.onload = (event) => {
  createPassword()
};

最初に定数を準備。 チェックごとに利用する文字列を準備します。

const smallAlphabet = "abcdefghijk"
const largeAlphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
const number = "0123456789"
const symbol = "!#$%&()"

ここの部分でチェックを入れた文字列をuseStringに足していきます。

  if(document.getElementById("useSmallAlphabet").checked){
    useString += smallAlphabet;
  }
  if(document.getElementById("useLargeAlphabet").checked){
    useString += largeAlphabet;
  }
  if(document.getElementById("useNumber").checked){
    useString += number;
  }
  if(document.getElementById("useSymbol").checked){
    useString += symbol;
  }

文字数のところは数字以外を入れる可能性があるので、 数字以外の場合はデフォルトで5としました。

  let length = document.getElementById("passwordLength").value
  let lengthNumber
  if(isNaN(Number(length))){
    lengthNumber = 5;
  }else{
    lengthNumber = Number(length);
  }

そしてランダム文字列を作って、結果を更新します。

  let result = Array.from(Array(lengthNumber))
                .map(()=>useString[Math.floor(Math.random()*useString.length)])
                .join('');
  document.getElementById("createdPassword").value = result;

Array.from(Array(lengthNumber))これにより文字数で指定した分の配列を作ります。
注意事項として、Array(lengthNumber)だけだと、幅が文字数分のArrayを作るだけで1つずつの要素には何も入っていない状態です。そのためmapをしても処理は繰り返されません。なので、Array.from(Array(lengthNumber))とややこしいことをしています。

そしてmapで書くように使用する文字列の中からランダムな番号の文字を切り取り、1つずつ入れていきます。

その後joinで配列を結合して文字列にします。 その作られた文字列をdocument.getElementById("createdPassword").value = result;で結果の欄に入れます。

以下では初期表示の時にこの関数を呼び出して、実行しています。 window.onloadとしているのは、画面を読み終わった後に実行するためです。

window.onload = (event) => {
  createPassword()
};

以上が解説です。

完全にランダムなので、チェックボックスで選んでも文字を使われない場合があります。 チェックボックスで選んだ文字を最低1つは使うようにするなどした方がよいのですかね？

作成日:2022-03-09　 更新日:2022-03-09