プログラミングで暮らしをハック
ITで暮らしを便利にするブログ
作ったアプリ紹介

JavaScriptでパスワード生成アプリを作った

「JavaScriptを使ってパスワード生成アプリを作りたい」

という初心者さん向けの記事です。

 

「ランダムな文字をブラウザに表示するプログラムの作り方」をご紹介します!

 

パスワード生成ツールの仕様

まずは、パスワード作成アプリの仕様をご紹介します。

  1. 画面のボタンを押すと、ランダムな英数字が表示される。
  2. パスワードの桁数を任意に決めることができる。

このような機能を持ったアプリを作っていきます。

 

こちらが作ったアプリです。パスワード生成アプリ

 

 

パスワード生成アプリの作り方

ランダムな文字を表示させるアプリを作るには、2つのファイルを作る必要があります。

 

①ランダムな文字を作り出すためのプログラム(JavaScript)

②作ったパスワードを画面に表示させるためのプログラム(HTML)

です。

 

まずは、、

①ランダムな文字を作るためのJavaScriptプログラムをご紹介します。

 

①ランダムな文字を作るためのJavaScriptプログラム

ランダムな文字を表示させるためのプログラムを分解してみると、4つの工程に別れます。

  1. 使用する文字を決める。
  2. パスワードの桁数を決める。
  3. ランダムな文字列を作り出す。
  4. 作った文字列を表示する。

 

サンプルコードのコメントに番号がふってあるので、上記と見比べてみてください。

function random(){
  //①使用する文字を変数に入れておく
  var str = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
    
  //②パスワードの桁数を決めておく
  var len = 8;
    
  //③ランダムな文字列を作る
  var password = "";
  for(var i=0; i<len; i++){
    password += str.charAt(Math.floor(Math.random() * str.length));
      }

  //④変数passwordの値を、resultというidを持った要素に入れる
  document.getElementById('result').textContent = password;
}

 

 

これで「ランダムな8桁の文字列」を作り出すことができました。

 

 

あとは、②作った文字列を画面に表示させるためのプログラム(HTML)を作っていきます。

 

②作ったパスワードを画面に表示させるためのプログラム(HTML)

<p id="result"></p>
<button onclick="random()">生成する</button>

 

HTMLはシンプルです。

 

  1. パスワードを表示させる段落を(pタグ)で作ります。
  2. ボタン(buttonタグ)を設置します。
  3. ボタンが押されたら、さきほど作っておいた、JavaScriptプログラムが動くように設定します。

 

これで完成です!!パチパチパチ!!

 

 

 

まとめ

  • ランダムな文字列を作るプログラムを関数(function)として設定する。
  • JavaScriptでランダムに抽選するには、random関数を使う。
  • HTMLで作ったボタンを押した時に関数を実行させるには、button onclick=”関数名()”
  • 変数の中身を表示するには、要素をidで指定して、.textContent = 変数名;

 

 

参考サイト

こちらの記事も参考になるので、わからなかった方は読んでみてください。

 

記事を読んでくださりありがとうございました。

当サイトは「好きなんだから、日曜エンジニアでもいいじゃない」をテーマにしたエンジニアの交流サイトです。

非IT企業の私ですが、Webが好きで「ITエンジニアと繋がりたい」という思いからブログをはじめました。

この記事が参考になった、おもしろかったという方は、広告をクリックしていただけると励みになります。

これからもよろしくお願い致します。