【JS】ランダム文字列を生成するサービスをPHP→JSにリファクタリングしてみた

2018/11/10 2019/01/07

リファクタリングという言葉を使いたくて、以前にPHPで作成した『ランダム文字列ジェネレータ』を、Javascriptを使って同じものを作ってみました。

ランダム文字列ジェネレータをJSにて作り直してみる

PHP版はPOST通信しているので「作成」ボタンを押すたびに画面を読み直すもっさり仕様でしたが、JSにすることによって読み直しがなくなりキビキビと動作。作成ボタン連打も耐えられる仕様となりました。

コード解説

せっかくなので（ベーシックな）コードを公開。
jQuery 必須です。

<form name="generateRandomString">

<div class="btnBox">
    <input type="reset" value="クリア" class="clearBtn">
    <input type="button" value="作成" class="generateBtn" onclick="genRandomStr();">
</div>

<h2>結果</h2>

<div class="resultBox">
    <textarea name="result" cols="10" rows="8" id="result" ></textarea>
</div>
</form>

</div>

</div>

</form>

function genRandomStr() {
    // 使用する文字の定義
    var str = "abcdefghijkmnpqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ23456789!#$%&=~/*-+";
 
    // 桁数の定義
    var len = 8;
 
    // ランダムな文字列の生成
    var result = "";
    for (var i=0; i<len; i++) {
        result += str.charAt(Math.floor(Math.random() * str.length));
    }

    // 結果表示
    $('#result').val(result);
}

function genRandomStr() {

// 使用する文字の定義

var str = "abcdefghijkmnpqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ23456789!#$%&=~/*-+";

// 桁数の定義

var len = 8;

// ランダムな文字列の生成

var result = "";

for (var i=0; i<len; i++) {

result += str.charAt(Math.floor(Math.random() * str.length));

}

// 結果表示

$('#result').val(result);

}

上記はオプションなど指定しない、一番単純な形です。
これをベースに作成・改造していけば、先程リンクを書いたものが出来上がるって寸法です。

詳しくは、ソースコードの表示をしてもらえれば分かるかと思います。

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

created by Rinker

-Javascript,jQuery
-javascript, js, ランダム文字列, ランダム文字列ジェネレータ

: jQueryでJSON、JSONP 連携してみる。

jQuery の $.ajax() を利用してjson、jsonp形式のデータを ...

: 【jQuery】下方へスクロールしたらトップへ戻るボタンを表示して、スムーズにページトップへ帰るスクリプトを組んでみた

下スクロールでふわっと表示させ、クリックすると上部へスルスルっと戻って消えるというスクリプトを組んでみました。戻るボタンもテキストではなく画像にし、ファイル名末尾に「_on」をつけた画像で差し替えも行なっています。