【React】randomaticを使ってパスワード乱数を自動生成する

2022.03.262021.11.30

Reactでパスワード乱数を自動生成する方法について紹介します。

Javascriptでの情報は多く出てきますが、Reactでの使用例が、検索してもなかなかヒットしないので書くことにしました。

方法は、いたってシンプルで、この2つでできます！

ライブラリをinstallとimpport
一行で呼び出し

これだけです。

インストール

$ npm install randomatic

これでpackage.jsonを確認するとinstallできていることが確認できます。

"randomatic": "^3.1.1",

コード

Appファイルにパスワードのみを表示させます。

import randomatic from "randomatic";

function App() {

  const initial_password = randomatic("*", 16)

  return (
    <>
      <p>{initial_password}</p>
    </>
  );
}

export default App;

これだけです。

(“*”, 16)の部分を変えると、生成するパスワードを変更することも可能。

記号ごとに生成される文字は以下の通りです。

a: 小文字アルファベット (abcdefghijklmnopqrstuvwxyz')
A: 大文字ある (ABCDEFGHIJKLMNOPQRSTUVWXYZ')
0: 数字(0123456789')
!: 記号(~!@#$%^&()_+-={}[];\',.)
*: 上記の全て
?: カスタマイズ

16は文字数を表しています。

詳細以下公式のリンクを参照ください。

randomatic

Generate randomized strings of a specified length using simple character sequences. The original generate-password.. Latest version: 3.1.1, last published: 6 ye...