パスワード自動生成アプリ作ってみた

注意事項

まずはじめに、この記事はコードの綺麗さや簡潔さなどは一切考えていません。

もちろんそれゆえコード自体のパフォーマンスに関してもちゃんと考えていないのであらかじめご了承ください。

そして今回ボクが書いたコードは準備ができしだいgithubで公開しているのでそちらをご覧ください。

プログラミング方針

今回使う言語はTypeScriptです。

できる限りオブジェクト指向でコーディングしていきます。

出来上がったもの

下のリンクボタンから今回作成したプログラムを実行することができます。

ソースコードの説明

まずは今回どんなソースコードになっているか見ていただいた方が早いと思うので全体像を載せておきます。

class main{
    private passwordlist:string
    private count:number
    constructor(counts:number){
        this.passwordlist = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
        this.count = counts
    }
    private password():string{
        let list:string = ""
        for (let i = 0; i < this.count; i++) {
            list += this.passwordlist[Math.floor(Math.random() * this.passwordlist.length)]
        }
        return list
    }
    public init():void{
        const text = document.getElementById("app") || "ここに生成されたパスワードを表示する"
        if(text != "ここに生成されたパスワードを表示する"){
            text.innerText = this.password()
        }
    }
}
document.getElementById("btn")?.addEventListener("click",() => {
    // @ts-ignore
    let MAIN_NUMBER:number = Number(document.getElementById("inp")?.value)
    new main(MAIN_NUMBER).init()
})

ざっくり大枠を説明すると、プログラムによって生成したパスワードをHTMLに挿入しているかんじですね。

では細かく説明していきますね！

まずはオブジェクト指向ということでクラスの宣言をしています。

class main{
    // ここに様々な処理を記述していく
}

次にクラスで使う変数の宣言で、この部分ではそれぞれの変数にどんな値が入るのか宣言をしています。

private passwordlist:string
// passwordにはstring（文字列）しかいれないでね
private count:number
// countにはnumber（数字）しかいれないでね

次にこのクラスのインスタンスが生成されたときに実行する処理を記述します。

/*
* 外部から数値を受け取ってそのまま生成する
* パスワードの桁数に設定したいのでconstructorの
* 引数を設定します。
*/ 
////////////// ↓ この部分のこと
constructor(counts:number){
this.passwordlist = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
/*
* passwordlistの中身は大文字と小文字を
* 含む英数字を格納しておきます。
* 後ほど記述するコードでここからランダムに
* 文字を抜き取りそれをパスワードにします。
*/ 
this.count = counts
// 受け取った引数はcountに格納
}

ここまでがプログラムの初期設定的な部分になり、このあと処理を2つの役割に分けて記述しています。

役割に関しては下記の通りです。

• パスワードを生成するメソッド
• HTMLをいじるメソッド

このように役割を明確に分けることで可読性を上げたつもりです。

ではパスワードを生成するメソッドを見てみましょう。

/*
* パスワードを生成するメソッドなので
* 返値は文字列としておきます。
*/
////////////////// ↓ ちなみにこの部分の話
private password():string{
    /* 意味ないかもしれませんが余計なバグ
    * はやなので外部からアクセスできない
    * private の状態にしておきました。
    */
    // ↓ 出来上がった文字を格納する変数を宣言
    let list:string = ""
    // for文を回していく
    for (let i = 0; i < this.count; i++) {
        list += this.passwordlist[Math.floor(Math.random() * this.passwordlist.length)]
    }
    // ↓ 最後に完成した文字をreturnして終了
    return list
}

この部分ちょっとゴチャつくのでfor分の中身の処理は分けて解説しますね。

// この部分の役割は
Math.floor(Math.random() * this.passwordlist.length)
/*
* Math.random()は 0 以上 1 未満の乱数を返してくれます。
* Math.floor()は数字の切り下げ処理をしてくれます。
*
* random()で取得した値をpasswordlistの文字数分掛け算をし、
* floor()で切り下げ処理をすればpasswordlistから文字を取り
* 出すためのインデックス番号を抽出できます。
*/
this.passwordlist[]
/*
* passwordlistは英数字混合の文字列なので
* []の中にインデックス番号を入れることに
* よりｎ番目の文字を抽出することができます。
*/
list +=
/*
* これは左辺の値と右辺の値を足し算して
* 結果を左辺に入れるよって意味です。
* つまりこの場面だと文字を連結していく
* 意味になります。
*/

次にHTMLをいじくるメソッドを見てみましょう。

/*
* このメソッドはHTMLをいじくるもの
* なので返り値は必要ないためvoid型
* のメソッドにします。
*/ 
////////////// ↓ ちなみにこの部分の話
public init():void{
    /*
    * document.getElementByIdで要素を取得します。
    * 一応取得できなかったときのことも考えて
    * 取得できないときは指定した文字をいれる
    * ようにします。
    */ 
    const text = document.getElementById("app") || "ここに生成されたパスワードを表示する"
    // ちゃんと要素が取得できてるかif文でチェック
    if(text != "ここに生成されたパスワードを表示する"){
        // 取得できていれば生成したパスワードを挿入
        text.innerText = this.password()
    }
}

最後にトリガーを設定します。

今回はボタンを押したときに処理を実行したいのでそのようにします。

// 要素にイベントリスナーを追加します
document.getElementById("btn")?.addEventListener("click",() => {
    // @ts-ignore
    // ここでinputタブに入力された数値を取得
    let MAIN_NUMBER:number = Number(document.getElementById("inp")?.value)
    // 最後にmainクラスのインスタンスを生成と共に実行
    new main(MAIN_NUMBER).init()
})

まとめ

いかがでしたでしょうか？

短いソースコードでしたがしっかりと解説するのは大変ですね。

今回の記事ではプログラミング用語がたくさん出てきたと思います。

• インスタンス
• メソッド
• オブジェクト指向
• コンストラクター
• イベントリスナー

どれも概念的要素が強いのでここでは解説しませんが、時間があれば専門用語の解説なども考えているのでぜひTypeScriptに挑戦してみてください！

※参考リンク
コンストラクターに関しての記事