JavaScript初心者必見!ランダム文字列生成の5つの方法と実践例

JavaScript初心者がランダム文字列生成を学ぶイメージ JS
この記事は約10分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、JavaScriptでランダム文字列を生成する方法が分かるようになります。

JavaScript初心者でも理解できるように、基本的な生成方法や実践的なサンプルコードを紹介します。

また、注意点やカスタマイズ方法も解説しているので、ぜひ参考にしてください。

●ランダム文字列生成の基本

ランダム文字列を生成する際には、まず文字セットと生成方法を決める必要があります。

○文字セット

ランダム文字列に使用する文字セットは、通常英数字や記号が使われます。

例えば、英大文字(A-Z)、英小文字(a-z)、数字(0-9)、記号(!@#$%&*)などです。

必要に応じて、文字セットをカスタマイズしてください。

○生成方法

ランダム文字列の生成方法には、様々な手法があります。

下記では、5つの代表的な生成方法を紹介します。

●5つのランダム文字列生成方法

JavaScriptでランダム文字列を生成する方法はいくつかありますが、ここでは5つの代表的な方法をご紹介します。

○方法1:forループとMath.random()を使う

この方法では、forループとMath.random()関数を使ってランダム文字列を生成します。

まず文字セットを定義し、forループで指定された文字数分、ランダムに文字を選んで結果の文字列に追加します。

function getRandomString(length) {
  const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  let result = "";
  
  for (let i = 0; i < length; i++) {
    const randomIndex = Math.floor(Math.random() * chars.length);
    result += chars[randomIndex];
  }
  
  return result;
}

console.log(getRandomString(10)); // 例: "G5h8TsQ2xZ"

○方法2:Array.from()とMath.random()を使う

Array.from()関数を使って、ランダム文字列を生成することもできます。

この方法では、指定された文字数分の配列を作成し、配列の各要素にランダムな文字を代入します。

function getRandomString(length) {
  const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  const result = Array.from({ length }, () => chars[Math.floor(Math.random() * chars.length)]).join('');
  
  return result;
}

console.log(getRandomString(10)); // 例: "k9Hn8Rf4Gt"

○方法3:crypto.getRandomValues()を使う

Web Crypto APIのcrypto.getRandomValues()関数を使って、より安全なランダム文字列を生成することができます。

ただし、この方法はブラウザ環境でのみ使用できます。

function getRandomString(length) {
  const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  const randomValues = new Uint32Array(length);
  crypto.getRandomValues(randomValues);
  
  const result = Array.from(randomValues, (value) => chars[value % chars.length]).join('');
  
  return result;
}

console.log(getRandomString(10)); // 例: "X7p1fTm9Yw"

○方法4:リカーシブ関数を使う

リカーシブ関数を使って、ランダム文字列を生成することもできます。

この方法では、指定された文字数に達するまで、関数を繰り返し呼び出します。

function getRandomString(length, result = "") {
  const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  
  if (length <= 0) {
    return result;
  }
  
  const randomIndex = Math.floor(Math.random() * chars.length);
  return getRandomString(length - 1, result + chars[randomIndex]);
}

console.log(getRandomString(10)); // 例: "q3Df8Gh1Jk"

○方法5:外部ライブラリを使う

外部ライブラリを使って、簡単にランダム文字列を生成することができます。

ここでは、人気のあるライブラリ「nanoid」を使用します。

まず、ライブラリをインストールし、プロジェクトにインポートします。

npm install nanoid
import { nanoid } from 'nanoid';

const randomString = nanoid(10);
console.log(randomString); // 例: "h2Gt7vKjL0"

nanoidは、指定された文字数のランダム文字列を簡単に生成できます。

●実践的なサンプルコード

ランダム文字列生成を応用した実践的なサンプルコードをいくつかご紹介します。

○サンプル1:ランダムなパスワード生成

安全なパスワードを生成するために、英大文字、英小文字、数字、特殊文字を組み合わせたランダムなパスワードを作成します。

function generateRandomPassword(length) {
  const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+";
  let password = "";

  for (let i = 0; i < length; i++) {
    const randomIndex = Math.floor(Math.random() * chars.length);
    password += chars[randomIndex];
  }

  return password;
}

console.log(generateRandomPassword(12)); // 例: "A3$b7^Gh1@Jk"

○サンプル2:ランダムなURLショートカット生成

短縮URLサービスを作成する際に、ランダムなURLショートカットを生成するコードを下記に紹介します。

function generateShortUrl(baseUrl, length) {
  const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  const path = Array.from({ length }, () => chars[Math.floor(Math.random() * chars.length)]).join('');
  
  return `${baseUrl}/${path}`;
}

console.log(generateShortUrl('https://example.com', 6)); // 例: "https://example.com/4gH2tQ"

○サンプル3:ランダムなID生成

ユーザーやオブジェクトに一意なIDを割り当てる際に、ランダムなIDを生成するコードを下記に紹介します。

function generateRandomId(prefix, length) {
  const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  const id = Array.from({ length }, () => chars[Math.floor(Math.random() * chars.length)]).join('');
  
  return `${prefix}-${id}`;
}

console.log(generateRandomId('user', 8)); // 例: "user-A1b2C3d4"

○サンプル4:ランダムなクーポンコード生成

プロモーションキャンペーンで使用するクーポンコードをランダムに生成するコードを下記に紹介します。

クーポンコードは、英大文字と数字の組み合わせで構成されます。

function generateCouponCode(length) {
  const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
  let couponCode = "";

  for (let i = 0; i < length; i++) {
    const randomIndex = Math.floor(Math.random() * chars.length);
    couponCode += chars[randomIndex];
  }

  return couponCode;
}

console.log(generateCouponCode(10)); // 例: "A3B7C9D5E1"

○サンプル5:ランダムな色コード生成

ランダムな色コード(16進数のカラーコード)を生成するコードを下記に紹介します。

生成された色コードは、Webページのデザインやグラフィックスなどで使用できます。

function generateRandomColorCode() {
  const chars = "0123456789ABCDEF";
  let colorCode = "#";

  for (let i = 0; i < 6; i++) {
    const randomIndex = Math.floor(Math.random() * chars.length);
    colorCode += chars[randomIndex];
  }

  return colorCode;
}

console.log(generateRandomColorCode()); // 例: "#1A2B3C"

●注意点と対処法

ランダム文字列生成にはいくつかの注意点があります。

たとえば、生成された文字列が一意であることを保証できないことや、短い文字列や限定された文字セットを使用すると、推測されやすくなることが挙げられます。

これらの問題に対処するために、適切な長さや文字セットを選択し、生成された文字列をデータベースやリストと照らし合わせて確認することが重要です。

●カスタマイズ方法

ランダム文字列生成の方法は、用途に応じてカスタマイズが可能です。

例えば、特定の文字セットを使用したり、文字列の長さを変更したりすることができます。

また、外部ライブラリを使用する場合は、そのライブラリが提供するオプションや機能を活用して、カスタマイズを行うことができます。

まとめ

この記事では、5つのランダム文字列生成方法と、それらを応用した実践的なサンプルコードを紹介しました。

注意点やカスタマイズ方法についても触れました。

ランダム文字列生成は、多くのアプリケーションやシステムで役立つ機能ですので、ぜひ参考にして下さい。