#22 JavaScriptで学ぶ正規表現の基本

はじめに

「メールアドレスの形式が正しいかチェックしたい」「文章の中から電話番号だけを抜き出したい」——こういった作業を一気に片付けてくれるのが正規表現(せいきひょうげん)です。正規表現とは、文字列の「パターン」を専用の記号で表現し、そのパターンに一致する部分を検索・抽出・置換するための仕組みのことです。最初は記号の羅列で身構えますが、基本の型さえ覚えれば強力な武器になります。この記事では、JavaScriptにおける正規表現の書き方と、よく使うメソッドの使い方を初心者向けに解説します。

正規表現オブジェクトの作り方

JavaScriptで正規表現を使うには、大きく分けて2つの書き方があります。

// 1. リテラル記法(スラッシュで囲む)
const re1 = /abc/;

// 2. RegExpコンストラクタを使う方法
const re2 = new RegExp("abc");

ほとんどの場合はリテラル記法で十分ですが、パターンを変数として動的に組み立てたいときはRegExpコンストラクタを使います。文字列として渡すため、バックスラッシュを二重にする点に注意してください。

基本のメソッドを使ってみる

test()で「含まれているか」を判定する

もっともシンプルなのがtest()メソッドです。パターンに一致する部分が文字列内にあるかどうかを、true/falseの真偽値で返してくれます。

const re = /\d{3}-\d{4}/; // 数字3桁-数字4桁
console.log(re.test("郵便番号は123-4567です")); // true

\dは「0〜9のいずれか1文字」を表す特殊な記号で、{3}は直前の要素を3回繰り返す、という意味です。組み合わせることで「数字が3個続く」というパターンを表現できます。

match()・matchAll()で抜き出す

一致した部分の文字列そのものが欲しいときは、文字列側のメソッドmatch()を使います。

const text = "電話は03-1234-5678、携帯は090-1111-2222です";
const result = text.match(/\d{2,4}-\d{3,4}-\d{4}/g);
console.log(result); // ["03-1234-5678", "090-1111-2222"]

gは「グローバルフラグ」と呼ばれ、一致するすべての箇所を探すオプションです。付けないと最初の1件しか返りません。一致ごとの詳細情報も取得したい場合は、より新しいmatchAll()が便利です。

replace()で置換する

パターンに一致した部分を別の文字列に置き換えるにはreplace()を使います。

const msg = "2026年09月05日";
const formatted = msg.replace(/(\d{4})年(\d{2})月(\d{2})日/, "$1/$2/$3");
console.log(formatted); // "2026/09/05"

()で囲んだ部分は「キャプチャグループ」といい、パターンの一部分だけを取り出して後から$1のように参照できます。日付の区切り文字を変換するような場面で非常に役立つテクニックです。

よく使う記号の早見表

正規表現には多くの記号がありますが、まずは次の6つを覚えるだけでも大半のパターンが書けるようになります。

  • \d … 数字1文字
  • \w … 英数字・アンダースコア1文字
  • \s … 空白文字(半角スペースやタブなど)
  • + … 直前の要素が1回以上続く
  • * … 直前の要素が0回以上続く(無くてもよい)
  • ^と$ … それぞれ文字列の先頭・末尾を表す

JavaScriptならではの注意点

他の言語(PythonやJavaなど)では正規表現を文字列として扱うのが一般的ですが、JavaScriptには/pattern/flagsという専用のリテラル記法があるのが大きな特徴です。バックスラッシュのエスケープが減り、慣れると読み書きしやすくなります。

もう一つ初心者がつまずきやすいのが、gフラグを付けた正規表現オブジェクトの挙動です。test()やexec()を繰り返し呼び出すと、次に検索を始める位置を示す内部プロパティlastIndexが更新され、2回目以降の結果が意図せず変わってしまいます。同じオブジェクトをループ内で使い回すときは、この挙動に注意してください。また、名前付きキャプチャグループ(?<name>...)を使えば番号ではなく名前で結果を参照でき、可読性が上がります。

まとめ

正規表現は記号だらけで難しく感じますが、「パターンを作る」「test/match/replaceのどれを使うか決める」という2ステップさえ押さえれば、入力チェックや文字列整形など実務でも強力な武器になります。まずは\dやgフラグといった基本の記号から使ってみて、徐々に複雑なパターンにも挑戦してみてください。

関連記事

本ページはプロモーションを含みます。

参考書籍(PR)

JavaScriptをもっと学びたい方には「改訂新版JavaScript本格入門」がおすすめです。

PR

コードを書かずに自動化したい方へ

「学んだけど自分の作業に組み込む時間がない」という方向けに、ダブルクリックで動くWindows専用の自動化ツールをオーダーメイドで作成しています。気になる方はこちらをご覧ください。

コメント

コメントを投稿

このブログの人気の投稿

#25 Rustで学ぶAI API(ChatGPT等)の呼び出し方の基本

ChatGPTのようなAI(人工知能)の機能を自分のアプリに組み込みたいとき、多くの場合は「AI API」と呼ばれる仕組みを使います。APIとは「Application Programming Interface」の略です。簡単に言えば、「あるサービスの機能を、プログラムから呼び出せるようにした窓口」のことです。この記事では、Rustから外部のAI APIをHTTPリクエストで呼び出す基本的な流れを、初心者向けに解説します。 AI APIを呼び出すとはどういうことか ChatGPTを提供するOpenAI社などは、インターネット経由でAIに質問を送り、回答を受け取れる「AI API」を公開しています。これはWebブラウザで検索するときのように、決まった宛先(URL)にデータを送信し、返ってきた結果を受け取る仕組みです。この「データを送って結果を受け取る」通信方式を、HTTPリクエストと呼びます。Rustのプログラムからこの通信を行うことで、自分のアプリの中でAIに質問し、回答を取得できるようになります。 reqwestクレートを使う Rustには標準でHTTP通信の機能は含まれていません。そこで使うのが「クレート」と呼ばれる外部ライブラリです。クレートはPythonのライブラリやJavaScriptのパッケージに近いもので、 Cargo.toml というファイルに追記するだけで簡単に導入できます。HTTP通信でよく使われるのが reqwest というクレートです。 Cargo.toml に次のように追記します(バージョン番号は執筆時点の例なので、実際に使う際は最新版を確認してください)。 [dependencies] reqwest = { version = "0.11", features = ["json"] } tokio = { version = "1", features = ["full"] } serde_json = "1.0" ここで tokio という見慣れないクレートも一緒に入れています。これは「非同期処理」と呼ばれる、通信の待ち時間の間に他の処理を進められる仕組みを扱うためのものです。ネットワーク通信は結果が返ってくるまで時間...
続きを読む

#8 C++で学ぶ文字列操作の基本

C++の文字列操作は、`std::string`という型を使うのが現代的な基本の書き方です。この記事では、C++における文字列操作の基本と、注意しておきたい落とし穴を解説します。 文字列を連結する std::string greeting = "こんにちは、" + name + "さん"; `std::string`同士であれば、`+`を使った連結がそのまま使えます。既存の文字列に追加する場合は`+=`や`append`メソッドも使えます。 greeting += "。よろしくお願いします。"; よく使う文字列操作 name.length() 文字数を調べる(バイト数であることに注意、後述) name.substr(0, 3) 一部分を取り出す(開始位置と長さを指定) name.find("A") 特定の文字の位置を探す(見つからなければ`std::string::npos`) name.replace(0, 2, "XX") 一部分を置き換える 文字列を数値に変換する 文字列を数値に変換したい場合は`std::stoi`(整数)や`std::stod`(小数)、逆に数値を文字列にしたい場合は`std::to_string`を使います。 int num = std::stoi("123"); std::string s = std::to_string(456); 文字列を分割する C++の標準ライブラリには、他言語の`split`のような文字列分割の関数が長らく用意されていませんでした。`std::stringstream`を使うのが伝統的な方法です。 #include <sstream> std::stringstream ss("a,b,c"); std::string item; while (std::getline(ss, item, ',')) { std::cout << item << std::endl; } C++ならではの注意点 C++には、古くからある`char`の配列を...
続きを読む

#16 TypeScriptで学ぶ辞書型(マップ)の基本

TypeScriptの辞書に相当する仕組みは、JavaScriptと同じですが、キーと値の型をあらかじめ決めておけるのが特徴です。この記事では、TypeScriptにおける辞書の扱い方と、用途別の型の選び方を解説します。 型付きのオブジェクト interface Person { name: string; age: number; } const person: Person = { name: "太郎", age: 20 }; キーの型が決まっていない辞書 キーの名前が事前に決まっていない辞書のような使い方をしたい場合は、次のように書きます。 const scores: { [key: string]: number } = {}; scores["太郎"] = 90; 同じ意味を Record というユーティリティ型で簡潔に書くこともできます。 const scores: Record = {}; Mapを使う場合 const person = new Map (); person.set("name", "太郎"); console.log(person.get("name")); Map<string, string> のように、キーと値それぞれの型を指定できます。 Object と違い、キーの数を person.size で正確に取得できる、キーの型を文字列以外にもできるといった利点があります。 値が存在しないかもしれない場合 キーが実在するとは限らない辞書の場合、値の型に | undefined を含めておくと、より正確な型になります。 const scores: { [key: string]: number | undefined } = {}; const value = scores["三郎"]; // number | undefined 型 こうしておくと、存在しないキーへのアクセスがコンパイル時に見過ごされにくくなります。 存在しないキーへのアクセスを防ぐ tsconfig.json で noUncheckedIndexedAccess を有効にす...
続きを読む