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

React

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.

コメント