Hapicode

# 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

関連記事

Nuxt.js と Ant Design Vue 2 テーマカスタマイズ

Nuxt.jsとAnt Design Vue 2を使用してテーマカスタマイズしてみました。...

JavaScript ライブラリ aos.js 使ってスクロール連動アニメーション

aos.js ライブラリ使ってHTML要素がスクロールと連動してアニメーションをします。...

Jsconfig と Tsconfig

javascriptで開発する際に使うjsconfigとtsconfigのjsonファイルとはなにか...

Cookie localStorage sessionStorage の違い

Cookie とWeb Storage localStorage sessionStorageの違い...

国際化 i18n と地域化 L10N

i18n が internationalization の略で国際化という意味で、地域化は L10n...

大きいファイルをスライス分割してアップロード

大きいファイルを分割アップロードする方法、並行処理と失敗した際の自動アップロードします。...

javascript 文字列と配列検索 indexOf findIndex find some includes 関数の違い

よく使う文字列と配列検索関数比較 javascript 文字列と配列検索 indexOf findI...

Javascript DataTables で excel 風 table 作る

JQueryでエクセル風テーブルの一部だけ横スクロールできるようにDataTables使ってみました...

javascript 配列 重複排除

javascriptで配列重複排除の複数やり方をまとめ、よく使うfilterとEcmaScript ...

bootstrap vuejs 使って generate する際に babel が icons ファイル max 500KB エラー
キーコード取得 ＆ キーコード一覧

javascriptで Tabキー 無効化をする仕事があり、キーコードの一覧を備忘録的にメモ...

開発時によく使うゼロ埋めパディング作業まとめ

mysql twig phpとjavascriptでよく使うゼロ埋めのいろいろ...

laravel に vuejs 使うための初期設定

PHPフレームワークlaravelにvuejs入れる時の初期設定まとめ、備忘録的...

javascript 　指定場所にスムーズにスクロールする方法

クリックして指定のアンカーにスクロールするjavascript作成しました。scrollToとscr...

react 強制的にレンダリングする方法

React使って値は変更されるけど、画面描写されないトラブルの対応方法...

Javascript var let const 変数宣言の違い

javascript varとlet 違い これからはvarよりlet constを書くようにすべき...

Javascript 電話番号フォーマット

固定電話 携帯電話 フリーダイヤルなどの電話番号をハイフォン入で自動フォーマットしてくれるjavas...

vuejs back to top button component 作成

vue でトップに戻るボタンを作ることがよくありますが、ライブラリー使わずに実現してみました。...

Nuxtjs 動的なルーティング静的ページ自動生成

Nuxtjs 動的なルーティング使ってAPIとJSONで静的ページ一括生成してSEO対策...

Sweet Alert swal に複数 content

javascriptアラートを綺麗に表示する粋なライブラリSweetAlertのswalの中のcon...

moment.js 使って日本語曜日対応

momentjsの日本語表示、曜日の日本語表示と略称表示について...

vuejs v-if と v-show の違い

vuejs ifとshowの条件分岐について詳しく解説 よく使われる v-if と v-show の...

javascript 開発で出会った TypeError

vuepress で Cannot read property 0 of undefinedのタイプ...

ReferenceError: location is not defined

ssrレンダリングする時に出る location is not defined エラー##...

vuejs で omisejapan の決済フォーム作成した時のメモ

フロント開発 omisejapan カードペイメント vuejs でフォーム開発する時のメモ...

vuejs vuex が難しいわけではないけど覚えるのに時間かかる

vuejsの魅力であるvuexのいろいろメモしました。モジュール型のgettersの使い方とか引数の...

ブラウザーで動く javascript のクッキー操作ライブラリ js-cookie

フロントのブラウザー側で動くjs cookieについて...

vuejs スクロールでナビバー表示非表示

vuejsで上にスクロールするとナビメニューが表示、下にスクロールすると非表示の切り替えをやってみま...

nuxtjs vue router params query ルートから取得できるもの

nuxtjs使うなら必ずvueルーターのパラメータやクエリーを取得したいときがくる。...

vuejs 開発時に遭遇したエラーリスト

改めてvuejsのドキュメント読みながら只管エラーを出しまくっています。...

javascript reduce 連想配列の合計計算覚えよう

javascript 配列 sum 合計計算、reduce 使ってやってみて覚える連想配列の落とし穴...

値段をカンマと円マーク表示 vuejs money-format filter 自作

vuejsで円マークカンマ区切りのフィルター作りました。...

vuejs-datepicker 使ってカレンダー表示 日本語多言語対応

bootstrap-vue2.5 カレンダーコンポーネントがでるまでの辛抱でvuejs-datepi...

スクロールバー自由にカスタマイズできる vue-perfect-scrollbar について

スクロールイベント監視、発火の時に使える便利ツールvue-perfect-scrollbarについて...

nuxtjs と codeigniter で jwt システム構築

nuxtjsとcodeigniterでシステム構築する際のメモ...

nodejs 使う時のエラーたち

node学習しながらエラーの原因などを調べてメモります。...

javascript で作る html から PDF 変換 pdfmake の日本語対応

html pdf 変換する際に使っていたjavascriptライブラリpdfmakについて調べたこと...

javascript 楽しく遊ぼう!メッセージつぶやくウシ cowsay

楽しくjavascriptを遊ぶ用のパッケージcowsayについてのメモ...

vue hook 使って vuejs コンポーネントライフサイクル監視

vuejsのhook使って開発を便利にしていこう...

Javascript vuejs の validation 正規表現でフォームチェック作ったときのメモ

電話番号チェック・メールアドレスチェック・文字チェック・郵便番号のチェックに使えるjavascrip...

正規表現一覧 よく使う検索・置換のパターン

よく使う正規表現、文字検索・置換をまとめてみました。...

javascript 日本語 shift-js 対応 CSV ダウンロード

javascript shift-jsエンコード CSVダウンロードが必要になったので、作ってみまし...

nuxt cordova web ハイブリッドアプリ作成した時のメモ

vueのnuxtjsのSPAでハイブリッドアプリを作る、コールドバーという神使って...

chartjs でチャートコンポネント作ってみた時のメモ bar+line+pie
開発におけるコーディングルール・規約

コーディングルールと規約を大事にする、複数人で開発しても、一人で開発してもメンテナンスやコードのわか...

polyfill という宝物で開発時の ie11 対応した時のメモ