Reactで簡単にパスワード自動生成を行う

今回のゴール

パスワード生成ボタンをクリックするとランダムな文字列を生成し、inputタグのvalueに代入する。

実践

下記は最終的なコードです。(Aboutコンポーネントというものを使用していますが、気にしなしいでください。)

import { useState } from 'react';
import '../../../../App.css';

const About = () => {
  const [inputPassword, setInputPassword] = useState<string>('');

  function createPassword() {
    const material =
      'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+~`|}{[]:;?><,./-=';
    let password = '';
    const passwordLength = 16;
    for (let i = 0; i < passwordLength; i++) {
      const randomNumber = Math.floor(Math.random() * material.length);
      password += material.substring(randomNumber, randomNumber + 1);
    }
    setInputPassword(password);
  }
  return (
    <div>
      <h2>パスワード自動生成</h2>
      <input type="text" className="createPassword" value={inputPassword} />
      <button onClick={() => createPassword()}>パスワード生成</button>
    </div>
  );
};

export default About;

.createPassword {
  width: 500px;
}

下記は箇条書きで概ねの関数の流れです。

• 使用する文字を定数materialに格納。
• 後の文字列が入る変数passwordは空で初期化。
• 生成するパスワードの長さを定数passwordLengthに格納(ここは各自自由な数値に変更可能)。
• for文で生成する記述をループ
• 定数randomNumberに使用する文字列の長さにランダムに生成した数値にかけて、整数値だけを格納。
• 変数passwordに使用する文字列をsubstringメソッドにより先ほどrandomNumberで得た数値を元に取り出す
• 状態関数setInputPasswordの引数にpasswordを代入する。

そして、inputタグのvalue値に状態変数を代入することでランダムな文字列なパスワードを生成しました。

生成されたパスワード文字列

パスワード生成ボタンをクリックしてランダムに生成されたパスワード文字列がこちらです。

参考記事