JavaScriptでパスワードジェネレータを作ろう!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

実装するもの

今回は、「パスワードジェネレータ機能」をJavaScriptで実装したいと思います。

demoは「こちら」で確認できます。

環境構築

簡単な環境構築をお願いします。

必要なファイルは、以下の通りです。

CSS版

ページ(HTML)の作成

最初にページを作成しましょう。

このHTMLをブラウザ上で表示すると以下のようになります。

スタイル(CSS)を装飾

次にスタイルを記述しましょう。

ここまで実装すると以下のようになります。

JavaScriptの実装

パスワードジェネレータには、以下の3つの機能があります。

主な3つの機能 1: ランダム文字列生成機能
2: パスワード生成機能
3: クリップボードコピー機能

ランダム文字列生成機能

パスワードジェネレータにはランダムな文字列が必須なので、まずはそれを実装しましょう。

関数の定義

ランダム文字列は、JavaScriptのStringオブジェクトで作成します。

上記の関数では、String.fromCharCodeメソッドを使用しています。これは、与えられたコードから特定の文字列を生成するためのものです。

コードについては、Differences Between Character Setsに一覧があるので、確認してみてください。

オブジェクトの作成

作成した関数は、JavaScriptのオブジェクトに格納しておきましょう。

パスワード生成機能

次は、パスワード生成機能を作成します。

要素の取得

画面操作に必要な要素を取得しましょう。

クリックイベントの登録

クリックイベントを登録して、「Generate Password」ボタンが押下された時にイベントが発火するようにしましょう。

generatePassword関数はまだ作成していないので動きませんが、これで画面のチェックボックスの状態やパスワードの指定長によって、生成されるパスワードを制御できるようになります。

そして、generatePasswordの実行結果が、resultEl.innerTextにより画面に表示されます。

パスワードの生成

次は、パスワードの生成処理を作成します。

ここは、少し難しいかもしれません。特に以下の処理が難しいですね。

randomFuncは、文字列生成関数をオブジェクト化した変数です。typesArrには関数名をKeyにしたオブジェクトが格納されているので、そのKeyをObject.keysで取得し、関数として実行することでパスワードが生成されます。

クリップボードコピー機能

最後にクリップボードコピー機能を作って、完成です。

クリップボードのコピーでは、最初にtextareaを作成し、そこに生成したパスワードを追加して、documentのbodyの子要素とします。

そして、textarea.selectでコピーした要素を選択後、document.execCommand(‘copy’)でクリップボードにコピーしています。

textarea.removeは、bodyに追加したtextareaを削除しています。

document.execCommand廃止されたため非推奨のようですが、私のChromeでは動きました。もしかしたら、将来動かなくなるのかもしれませんね。

おわりに

ランダム文字列を生成するString.fromCharCodeメソッド、変数名をKeyにする大技、「true + true => 2」になるJavaScriptの謎の計算など、結構勉強になることが多かったですね^^

この機能も他のアプリに応用ができそうなので、覚えておいて損はないと思います!

それでは、また!

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍


コメントを残す