# javascript password generator ランダム文字列パスワード作成

ログインパスワード作る時、一時トークン発行する時とか、たまに使うけど、いつもググって何ページも探していました。自分が好きなタイプを見つかるまで時間もったいないから、作りました。

# 任意桁のパスワード生成

  • 大文字・小文字対応
  • 数字・記号対応
  • 任意桁数対応
  • 任意個数対応

# vuejs components

このジェネレーターに使ったコンポネントです。

<template>
  <div>{{ makeRandom() }}</div>
</template>

<script>
import randomatic from "randomatic";
export default {
  props: {
    pattern: {
      type: String,
      default: "*",
    },
    length: {
      type: Number,
      default: 8,
    },
  },
  methods: {
    makeRandom() {
      return randomatic(this.pattern, this.length);
    },
  },
};
</script>

1.package randomatic install

自分で作ってもいいけど、すでに達人が作ってあるため、達人の腕を借りた

npm i randomatic

randomatic (opens new window) package は非常に優秀なもので、週間ダウンロード 400 万以上の実績があります。
使ってみて確かの性能で感謝、これで時間単位の人生が節約できたので、Github に行って⭐️スター押しました。
作者jonschlinkert の Github (opens new window)ですが、週間 400 万以上のダウンロードにも関わらず⭐️118 しかない現状です。よかったら押して上げてくださいね。

randomatic について

randomatic(pattern, length, options);

  • pattern {String}: (必須)
    • a: 小文字アルファベット (abcdefghijklmnopqrstuvwxyz')
    • A: 大文字アルファベット (ABCDEFGHIJKLMNOPQRSTUVWXYZ')
    • 0: 数字 (0123456789')
    • !: 記号 (~!@#$%^&()_+-={}[];',.)
    • *: すべて (all of the above combined)
    • ?: 自作キャラ (pass a string of custom characters to the options)
  • length {Number}: (オプション)
  • options {Object}: (オプション)

使用例;

randomatic("*", 10);
//=> SJWV}ZQ%v)

randomatic("Aa0", 10);
//=> qEbghCcK5e

randomatic("Aa0!", 10);
//=> &S@~AiUaBj

※ randomatic('000');
※ randomatic('AAAAA');
もあります。

2.コンポネント 20 行程度で完成

javascript と vuejs に感謝します! 🎉🎉🎉

2019-08-28
  • javascript
  • vuejs

関連記事

Javascript 非同期処理 async と await のメモ
Nuxtjs 3 に Ant design Vue を使う
javascript  指定場所にスムーズにスクロールする方法
Nuxt.js と Ant Design Vue 2 テーマカスタマイズ
react 強制的にレンダリングする方法
JavaScript ライブラリ aos.js 使ってスクロール連動アニメーション
Jsconfig と Tsconfig
Cookie localStorage sessionStorage の違い
Javascript var let const 変数宣言の違い
Javascript 電話番号フォーマット
国際化 i18n と地域化 L10N
大きいファイルをスライス分割してアップロード
javascript 文字列と配列検索 indexOf findIndex find some includes 関数の違い
Javascript DataTables で excel 風 table 作る
javascript 配列 重複排除
vuejs back to top button component 作成
bootstrap vuejs 使って generate する際に babel が icons ファイル max 500KB エラー
Nuxtjs 動的なルーティング静的ページ自動生成
キーコード取得 & キーコード一覧
Sweet Alert swal に複数 content
moment.js 使って日本語曜日対応
vuejs v-if と v-show の違い
javascript 開発で出会った TypeError
開発時によく使うゼロ埋めパディング作業まとめ
ReferenceError: location is not defined
vuejs で omisejapan の決済フォーム作成した時のメモ
vuejs vuex が難しいわけではないけど覚えるのに時間かかる
ブラウザーで動く javascript のクッキー操作ライブラリ js-cookie
vuejs スクロールでナビバー表示非表示
nuxtjs vue router params query ルートから取得できるもの
vuejs 開発時に遭遇したエラーリスト
javascript reduce 連想配列の合計計算覚えよう
値段をカンマと円マーク表示 vuejs money-format filter 自作
vuejs-datepicker 使ってカレンダー表示 日本語多言語対応
スクロールバー自由にカスタマイズできる vue-perfect-scrollbar について
nuxtjs と codeigniter で jwt システム構築
nodejs 使う時のエラーたち
javascript で作る html から PDF 変換 pdfmake の日本語対応
javascript 楽しく遊ぼう!メッセージつぶやくウシ cowsay
vue hook 使って vuejs コンポーネントライフサイクル監視
Javascript vuejs の validation 正規表現でフォームチェック作ったときのメモ
正規表現一覧 よく使う検索・置換のパターン
javascript 日本語 shift-js 対応 CSV ダウンロード
nuxt cordova web ハイブリッドアプリ作成した時のメモ
chartjs でチャートコンポネント作ってみた時のメモ bar+line+pie
開発におけるコーディングルール・規約
laravel に vuejs 使うための初期設定
polyfill という宝物で開発時の ie11 対応した時のメモ