2018/05/30更新

[フロントエンド] 指定文字数で、ランダムな文字列を作成するちっちゃな実装

このエントリーをはてなブックマークに追加            

こんにちは、@yoheiMuneです。
Javascriptでランダムな文字列を作りたい場面が時々があります。uuidなどのモジュールでも簡単に作れますが、独自実装する機会があったので、それをブログにも書きたいと思います。



指定文字数でランダムな文字列を作成する

今回は、利用可能な文字が決まっていたので、独自に作成しました。と言っても、数行で実装できる簡単な内容です。
// ランダムな文字数を作成する.
// 引数に、作成したい文字数を指定します.
function randomString (len = 8) {

    // 利用可能な文字一覧.
    const BASE = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'

    // 利用可能な文字数.
    const BASE_LEN = BASE.length

    // ランダムにピックアップします.
    let id = ''
    for (let i = 0; i < len; i++) {
        id += BASE[ Math.floor(Math.random() * BASE_LEN) ]
    }

    // 返却.
    return id
}
以下のように利用します。
randomString()   // MDVpbSKH
randomString(32) // Act2IJjyDqql8EwwI2BqyoT7Kdjw72As
簡単な実装なので、色々とコピペで使えそうです。



最後に

BASE変数に利用可能な文字を設定できるので、意外と使い勝手が良いのではないかなと思ってます。npmがない環境でランダムな文字列を作りたい場合には、ぜひ〜。

最後になりますが本ブログでは、フロントエンド、PHP、サーバー、インフラ、Swift、Node.js、Python、Java、Linux、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に!」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSTwitterをフォローして貰えたら嬉しいです ^ ^

最後までご覧頂きましてありがとうございました!





こんな記事もいかがですか?

[取り組み] フロントエンドでコーディングスピードをアップさせる6つの方法!と思って書いてたら30個も書いちゃった。
[フロントエンド] フロントエンドの入社試験99問!難しいですよ〜w。
[フロントエンド] Webページを表示するテストの際に、通信速度を3Gに制限して表示してみよう
[フロントエンド] スマホ実機でのデバッグ手段を増やす!Macのプロキシを利用して、通信内容を確認する。
[フロントエンド] Chrome 35 Beta の変更点。Touch制御、新しいJavaScript機能、プレフィックスなしのShadowDOM
[フロントエンド]複数アカウントでのテストには、Chromeのユーザー管理を使って、Cookieを切り替えると便利
[フロントエンド] Chrome36βが出た。変更点など。element.animate、HTML Imports、Object.observe、他。
RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。