JavaScript - ランダムなパスワードを自動生成する方法

パスワードを作るには？

パスワードを作るためには、パスワードに使いたい数字や文字を用意して、パスワードの桁の数だけつなげます。今回紹介するのは、数字・小文字・大文字・記号を使ったパスワードの作り方です。JavaScript でパスワードを自動生成する方法を一緒に学んでいきましょう。

パスワードを生成する関数

ではこれから、パスワードを生成するための処理を関数としてまとめていきますよ。ここでは、generatePassword という関数名をつけます。

// パスワードを生成する関数
function generatePassword() {

  // パスワードを生成するための処理
  // …

}

関数については以下の記事で詳しく紹介していますので参考にしてください。

JavaScript - 関数の基本 - 関数宣言と関数式【初心者向け】

プログラミングをする際、関数の知識は欠かせません。関数を使えば、同じコードを何度も書くことなく特定の処理を実行できるようになります。関数の書き方、パラメータや引数、return 文や戻り値、巻き上げなどの意味を学びましょう。

PyxofyPyxofy

変数を宣言する

パスワード生成に使う変数を三つ用意しましょう。

一つ目は、パスワードに使う文字を入れておく変数 string です。今回は、数字・小文字・大文字・記号を使ってパスワードを生成していきます。

この変数の中身はプログラム実行中に変化しないので、let ではなく const で宣言してください。
数字も一緒に引用符 ' ' で囲んで、文字列として変数に格納します。

function generatePassword() {

  // パスワードに使う文字を変数stringに文字列として格納する
  const string = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!@#$%^&*()_+=';

}

二つ目は、パスワードの長さを指定するための変数 passwordLength です。

ここでは、12桁のパスワードを生成するために 12 で初期化します。

function generatePassword() {
  const string = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!@#$%^&*()_+=';

  // パスワードの長さを指定する
  const passwordLength = 12;

}

三つ目は、生成したパスワードを入れる変数 myPassword です。

この変数には、このあと生成するパスワードを格納していくので、const ではなく let で宣言してください。
最初は、変数の中身は空っぽです。何も文字がない文字列である「空文字」を表すために、引用符 '' のみを書いて初期化します。

function generatePassword() {
  const string = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!@#$%^&*()_+=';
   const passwordLength = 12;

  // 生成したパスワードを入れるための空の変数を用意する
   let myPassword = '';

}

変数の用意ができました。次のセクションからは、これらの変数を使ってパスワードを生成する処理を書いていきますよ。

変数については以下の記事で詳しく紹介していますので参考にしてください。

JavaScript - 変数の基本 - var, let, const【初心者向け】

プログラミングを学習する際に、最初の段階で学んでおきたい基礎知識のひとつが、変数です。変数とは何か？なんのために使うのか？どうやって書くのか？など、初めて変数に触れる方の疑問に答えます。

PyxofyPyxofy

繰り返し処理を行う

パスワードを作るためには、「文字列から文字をランダムに一つ取り出して連結する」という処理を、指定したパスワードの長さだけ繰り返します。繰り返し処理を行うために使うのは、for ループです。

function generatePassword() {
  const string = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!@#$%^&*()_+=';
  const passwordLength = 12;
  let myPassword = '';

  // 指定したパスワードの長さだけ繰り返す
  for ( ) {

    // 文字列から文字をランダムに一つ取り出して連結する処理
    // …

  }

}

for ループの条件は、以下のようになります。

変数 i を宣言して 0 で初期化します。i は、繰り返しの回数を数えるためのループカウンタ変数です。
パスワードの長さだけ繰り返したいので、繰り返しの条件を i < passwordLength とします。
繰り返しの数を１ずつ増やすために i++ とします。++ は、変数の値を１増加させるインクリメント演算子です。

// 指定したパスワードの長さだけ繰り返す
for (let i = 0; i < passwordLength; i++) {

  // 文字列から文字をランダムに一つ取り出して連結する処理
  // …

}

for ループについては以下の記事で詳しく紹介していますので参考にしてください。

JavaScript - for ループ (繰り返し) の基本【初心者向け】

繰り返し処理を実行するために使われる for 文の書き方や、ループの中で使われる break 文と continue 文について、プログラミング初心者の方でも分かりやすいように簡単なコードを例にして解説します。

PyxofyPyxofy

パスワードを生成するための処理

for ループの中に、「文字列から文字をランダムに一つ取り出して連結する処理」を書いていきましょう。この処理を繰り返し行うことで、パスワードが生成されますよ。

文字列から文字をランダムに一つ取り出す

まずは、「文字列から文字をランダムに一つ取り出す」という処理です。文字列から文字を取得するために使うのが、charAt() メソッドです。charAt() メソッドは、括弧 () の中に指定したインデックス (位置) にある文字を返します。書き方は、文字列.charAt() です。

charAt() メソッドの例：

const hiragana = 'あいうえお';

const firstHiragana = hiragana.charAt(0);  // あ
const secondHiragana = hiragana.charAt(1); // い

上の例でも分かるように、charAt() メソッドの引数に 0 を指定すると、文字列の最初の文字が返ります。インデックスは１ではなく０から始まる、ということに注意してくださいね。

さて、今回は、ランダムな位置を指定して文字を取り出したいので、charAt() メソッドの引数には乱数を指定します。乱数を生成するためには、Math.floor(Math.random()) を使います。

乱数については以下の記事で詳しく紹介していますので参考にしてください。

JavaScript - 乱数の作り方とランダムな色を生成するコード

JavaScript の Math.random() と Math.floor() メソッドを利用して乱数を生成する方法を紹介します。乱数を使って RGB カラーをランダムに表示する簡単なプロジェクトも掲載しているので、ぜひご覧ください。

PyxofyPyxofy

文字列 string の長さの範囲内で乱数を取得するためには、Math.random() に文字列の長さを掛けます。文字列の長さは、length プロパティで表すことができますよ。書き方は、文字列.length です。

// 文字列stringの長さの範囲内で乱数を取得する
Math.floor(Math.random() * string.length)

charAt() メソッドの引数に乱数を指定すると、文字列 string から文字をランダムに一つ取り出すことができます。

// 文字列stringから文字をランダムに一つ取り出す
string.charAt(Math.floor(Math.random() * string.length))

取り出した値は、変数 character に格納しましょう。

// 文字列から取り出したランダムな一文字を変数characterに格納する
let character = string.charAt(Math.floor(Math.random() * string.length));

ここまでで、パスワードに使う文字を一つずつランダムに取得する文ができました。

for (let i = 0; i < passwordLength; i++) {

    // 文字列から文字をランダムに一つ取り出す処理
    let character = string.charAt(Math.floor(Math.random() * string.length));

}

取り出した文字を連結する

続いて、「取り出した文字を連結する」という処理を行います。文字を連結するために使うのは、加算代入演算子 += です。+= は、変数に値を追加します。

加算代入演算子 += の例：

let myName = '田中';
myName += 'さくら';    // myName = '田中' + 'さくら'

console.log(myName); // 田中さくら

取り出した文字 character は、変数 myPassword に追加していきますよ。

// 取り出した文字を変数myPasswordに追加していく
myPassword += character;

文字列から文字をランダムに一つ取り出して連結する for ループができました。for ループは指定したパスワードの長さだけ繰り返すので、変数 myPassword には12桁のランダムな文字列が格納されます。

for (let i = 0; i < passwordLength; i++) {

    // 文字列から文字をランダムに一つ取り出して連結する処理
    let character = string.charAt(Math.floor(Math.random() * string.length));
    myPassword += character;

}

結果をコンソールに出力する

今回は、生成されたパスワードをコンソールに出力するようにします。for ループのあとに文を追加しましょう。

function generatePassword() {

  const string = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!@#$%^&*()_+=';
  const passwordLength = 12;
  let myPassword = '';

  for (let i = 0; i < passwordLength; i++) {
    let character = string.charAt(Math.floor(Math.random() * string.length));
    myPassword += character;
  }

  // 生成されたパスワードをコンソールに出力する
  console.log(myPassword);

}

以上で、関数 generatePassword を定義できました。関数を呼び出すたびに、ランダムなパスワードが生成されてコンソールに表示されますよ。

//*************************
// パスワードを生成するコード
//*************************

function generatePassword() {
  const string = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!@#$%^&*()_+=';
  const passwordLength = 12;
  let myPassword = '';

  for (let i = 0; i < passwordLength; i++) {
    let character = string.charAt(Math.floor(Math.random() * string.length));
    myPassword += character;
  }

  console.log(myPassword);
}

generatePassword();