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

はじめに
●ランダム文字列生成の基本
- ○文字セット
○生成方法
●5つのランダム文字列生成方法
●実践的なサンプルコード
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、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"