【JavaScript】正規表現の基礎：文字列パターン判定とメタ文字一覧

2026年1月24日

概要

正規表現（Regular Expression）は、文字列の「パターン」を表現するための強力な記法です。

特定のキーワードが含まれているかの判定や、電話番号・メールアドレスの形式チェックなど、複雑な条件分岐を if (str.includes(...) || str.includes(...)) と羅列するよりも、短く効率的なコードで実装できます。

本記事では、ブラウザ判定を例にした実装と、主要なメタ文字（特殊文字）の一覧を解説します。

仕様（入出力）

入力: ブラウザのユーザーエージェント情報（navigator.userAgent）。
出力: 現在のデバイスが「iOS」か「Android」か「その他」かの判定結果。
動作:
1. 画面読み込み時にユーザーエージェントを取得。
2. 正規表現を用いてOSを判定。
3. 結果を画面に表示する。

基本の使い方

JavaScriptでは /パターン/ のようにスラッシュで囲んで正規表現リテラルを作成し、test() メソッドでマッチングを行います。戻り値は true または false です。

const str = "Apple iPhone 15";
const pattern = /iPhone|iPad/; // iPhone または iPad

if (pattern.test(str)) {
    console.log("iOS端末です");
}

正規表現パターン一覧表

よく使用されるメタ文字とパターンの意味です。

パターン	意味	マッチする例
`x`	文字「x」そのもの	`x`
`xyz`	文字列「xyz」の並び	`xyz`
`[xyz]`	x, y, z のいずれか1文字	`x`, `y`, `z`
`[a-z]`	aからzまでの範囲のいずれか1文字	`a`, `j`, `z`
`[^xyz]`	x, y, z 以外の1文字（否定）	`a`, `1`
`[^a-z]`	aからzの範囲以外の1文字	`1`, `A`
`abc	xyz`	文字列「abc」または「xyz」
`{3}`	直前の文字が 3回連続する	`aaa` (a{3})
`^x`	文字列の先頭が x	`x...`
`x$`	文字列の末尾が x	`...x`
`.`	改行を除く任意の1文字	`a`, `1`, `%`
`x*`	x が 0回以上繰り返す	`(なし)`, `x`, `xx`
`\`	直後のメタ文字をエスケープ（打ち消し）	`\.` でドット文字
`\d`	数字 `[0-9]`	`0`, `9`
`\D`	数字以外 `[^0-9]`	`a`,
`\w`	英数字とアンダースコア `[A-Za-z0-9_]`	`a`, `1`, `_`
`\s`	空白文字（スペース、タブ、改行など）	, `\t`
`\S`	空白文字以外	`a`, `1`
`\t`	タブ文字	(タブ)
`\n`	改行文字	(改行)

コード全文（HTML / JavaScript）

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UserAgent Regex Test</title>
    <style>
        body { font-family: sans-serif; padding: 20px; }
        .result-box {
            padding: 15px;
            background-color: #f0f0f0;
            border-left: 5px solid #007bff;
            margin-top: 10px;
        }
        .ua-text { font-size: 0.8em; color: #666; margin-bottom: 10px; display: block;}
        .os-label { font-weight: bold; font-size: 1.2em; }
        .ios { color: #e91e63; }
        .android { color: #4caf50; }
        .pc { color: #2196f3; }
    </style>
</head>
<body>

    <h2>端末・OS判定ツール</h2>
    
    <div class="result-box">
        <span class="ua-text" id="uaDisplay">UserAgent: 取得中...</span>
        <div id="resultDisplay" class="os-label">判定中...</div>
    </div>

    <script src="app.js"></script>
</body>
</html>

JavaScript

/**
 * HTML要素の参照を取得
 */
const uaDisplay = document.getElementById("uaDisplay");
const resultDisplay = document.getElementById("resultDisplay");

/**
 * ユーザーエージェントを判定して結果を表示する関数
 */
const detectDevice = () => {
    // ブラウザのユーザーエージェント文字列を取得
    const ua = navigator.userAgent;
    
    // UserAgentを画面に表示（確認用）
    uaDisplay.textContent = `UserAgent: ${ua}`;

    // 判定ロジック
    // 1. iOS判定: iPhone, iPod, iPad のいずれかを含む
    // /i フラグをつけると大文字小文字を区別しません
    if (/iPhone|iPod|iPad/i.test(ua)) {
        resultDisplay.textContent = "アクセス端末: iOS (iPhone/iPad)";
        resultDisplay.className = "os-label ios";
        return;
    }

    // 2. Android判定: Android を含む
    if (/Android/i.test(ua)) {
        resultDisplay.textContent = "アクセス端末: Android";
        resultDisplay.className = "os-label android";
        return;
    }

    // 3. その他 (主にPC)
    resultDisplay.textContent = "アクセス端末: PC / その他";
    resultDisplay.className = "os-label pc";
};

// 実行
detectDevice();

カスタムポイント

フラグの活用:正規表現リテラルの末尾にフラグを付けることで挙動を変えられます。
- /abc/i: 大文字・小文字を区別しない（Case-insensitive）。
- /abc/g: すべての一致箇所を検索する（Global）。
厳密なマッチング:^（先頭）と $（末尾）を組み合わせることで、完全一致チェックが可能です。例: /^\d{3}-\d{4}$/.test(zipCode) （郵便番号の形式チェック）

注意点

エスケープ忘れ:URLのドット . やパスの ( など、メタ文字として意味を持つ記号を単なる文字として検索したい場合は、バックスラッシュ \ でエスケープする必要があります（例: \.）。
可読性の低下:複雑すぎる正規表現は「Write Only（書いた本人しか読めない）」になりがちです。適度にコメントを残すか、複雑なロジックは分割して記述することを推奨します。

応用

郵便番号の形式チェック

数字3桁、ハイフン、数字4桁の並びであるかを判定する例です。

const zipCode = "123-4567";

// ^ : 先頭
// \d{3} : 数字が3回
// - : ハイフン
// \d{4} : 数字が4回
// $ : 末尾
const isValidZip = /^\d{3}-\d{4}$/.test(zipCode);

console.log(isValidZip); // true