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

関連記事

Javascript 非同期処理 async と await のメモ

javascript async await 使って非同期処理のいろいろ...

Nuxtjs 3 に Ant design Vue を使う

Ant-design-vue 4.x使うためのNuxt plugin 設定...

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

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

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

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

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

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

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

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

Jsconfig と Tsconfig

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

Cookie localStorage sessionStorage の違い

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

Javascript var let const 変数宣言の違い

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

Javascript 電話番号フォーマット

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

国際化 i18n と地域化 L10N

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

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

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

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

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

Javascript DataTables で excel 風 table 作る

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

javascript 配列 重複排除

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

vuejs back to top button component 作成

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

bootstrap vuejs 使って generate する際に babel が icons ファイル max 500KB エラー
Nuxtjs 動的なルーティング静的ページ自動生成

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

キーコード取得 ＆ キーコード一覧

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

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のタイプ...

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

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

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
開発におけるコーディングルール・規約

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

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

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

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