記事内にはプロモーションが含まれています

【JavaScript】正規表現とmatchメソッド完全攻略

【JavaScript】正規表現とmatchメソッド完全攻略 JavaScript

JavaScriptで文字列操作を行う際、「特定のパターンを含むかどうか調べたい」「メールアドレスの部分だけ抜き出したい」といった場面で必ず必要になるのが正規表現です。

その中でも String.prototype.match() メソッドは、文字列の中からパターンに一致する部分を検索・抽出するために頻繁に使われます。

しかし、この match() メソッドは、正規表現に g フラグ（グローバル検索）を付けるかどうかで戻り値の形が劇的に変わるという、初心者泣かせの特性を持っています。

「一致したはずなのに詳細情報が取れない」
「nullが返ってきてエラーになった」

そんなトラブルを避けるために、この記事では match() メソッドの正しい使い方から、戻り値のパターンの完全理解、そして test() や matchAll() との使い分けまで、現在の開発現場で役立つ知識を徹底解説します。

【本記事の信頼性】
プロフィール
執筆者：マヒロ
  • 執筆者は元エンジニア
  • SES⇒大手の社内SE⇒独立
  • 現在はこじんまりとしたプログラミングスクールを運営
  • モットーは「利他の精神」

matchメソッドの基本的な使い方と構文

match() メソッドは、文字列に対して正規表現で検索をかけ、その結果を返します。

基本構文

const result = 対象の文字列.match(正規表現);

引数には正規表現リテラル（/pattern/）または RegExp オブジェクトを渡します。
もし文字列を渡した場合は、暗黙的に new RegExp(文字列) として変換され、正規表現として扱われます。

シンプルな検索の例

まずは、最も単純な「文字列が含まれているか」を確認する例を見てみましょう。

const str = "Hello, JavaScript World!";
const result = str.match(/JavaScript/);

console.log(result);

実行結果

[
  "JavaScript",
  index: 7,
  input: "Hello, JavaScript World!",
  groups: undefined
]

一致した場合、配列（Array）が返されます。

ただし、単なる配列ではなく、index（一致した位置）や input（元の文字列）といったプロパティが追加された特殊な配列になっている点に注目してください。

これにより、「何が一致したか」だけでなく「どこで見つかったか」も知ることができます。

【最重要】gフラグの有無で変わる「戻り値」の違い

match() を使う上で最も重要なのが、正規表現に g フラグ（Globalオプション）を付けた時と、付けない時の挙動の違いです。

ここを理解していないと、予期せぬバグの原因になります。

1. gフラグ「なし」の場合（詳細情報の取得）

g フラグを付けない場合、match() は最初に一致した1つだけを返します。
戻り値は、先ほど見たような「詳細情報を含んだ配列」です。

const text = "apple, orange, apple, banana";
// gフラグなし
const result = text.match(/apple/);

console.log(result);
console.log(result[0]); // 一致した文字列
console.log(result.index); // 一致した位置

実行結果

['apple', index: 0, input: 'apple, orange, apple, banana', groups: undefined]
apple
0

キャプチャグループ () を使った部分一致の抽出を行いたい場合は、必ずこの「gフラグなし」モードを使用します。

2. gフラグ「あり」の場合（全件検索）

g フラグを付けると、文字列全体を検索し、一致したすべての文字列を単純な配列で返します。
この場合、index や input などの詳細情報は含まれません。

const text = "apple, orange, apple, banana";
// gフラグあり
const result = text.match(/apple/g);

console.log(result);

実行結果

['apple', 'apple']

2回登場する “apple” が両方とも配列に格納されています。
しかし、それぞれの出現位置（インデックス）などの情報は失われています

「何個あるか数えたい」「一覧が欲しい」という場合には便利ですが、詳細な解析には向きません。

3. 一致しなかった場合（nullの返却）

g フラグの有無に関わらず、検索に失敗した（一致しなかった）場合は null が返されます。
空の配列 [] ではないことに注意が必要です。

const text = "Hello World";
const result = text.match(/Python/);

console.log(result); // null

// 注意！以下のコードはエラーになります
// console.log(result[0]); 
// -> TypeError: Cannot read properties of null

実務では、match() の結果をすぐに参照せず、必ず if (result) などで nullチェックを行うか、オプショナルチェーン ?. を活用するのが鉄則です。

部分一致（キャプチャ）の抽出テクニック

正規表現の ()（キャプチャグループ）を使うと、マッチした文字列の一部だけを抜き出すことができます。
これは g フラグなしの場合にのみ有効です。

日付から「年・月・日」を抽出する例

const dateStr = "今日は2026-05-10です。";
const regex = /(\d{4})-(\d{2})-(\d{2})/;

const result = dateStr.match(regex);

if (result) {
  console.log("全体の一致: " + result[0]);
  console.log("年: " + result[1]);
  console.log("月: " + result[2]);
  console.log("日: " + result[3]);
}

実行結果

全体の一致: 2026-05-10
年: 2026
月: 05
日: 10

戻り値の配列の 0 番目にはマッチした文字列全体が入り、1 番目以降に () で囲った部分（キャプチャ）が順番に格納されます。

これにより、複雑なフォーマットの文字列から必要なデータだけを簡単にパース（解析）できます。

match() と test() の使い分け：チェックだけならtestを使おう

「含まれているかどうか（True/False）」だけを知りたい場合に match() を使うのは、パフォーマンス的にも意味的にも最適ではありません。

単なる存在チェックには、RegExp.prototype.test() メソッドを使用します。

test() メソッドの使い方

const str = "user_id_12345";
const regex = /^\w+$/; // 英数字とアンダースコアのみ

if (regex.test(str)) {
  console.log("正しいID形式です");
} else {
  console.log("不正な形式です");
}

実行結果

正しいID形式です

比較まとめ

  • match(): 一致した文字列やその情報が欲しいときに使う。
  • test(): 一致するかどうかの真偽値（boolean）が欲しいときに使う。

if (str.match(/pattern/)) と書くこともできますが、戻り値の配列生成コストがかかるため、チェックのみなら test() が推奨されます。

進化した検索：matchAll() メソッド（ES2020）

「全件検索したい（gフラグ）」かつ「それぞれの詳細情報（indexなど）も欲しい」というジレンマを解決するために登場したのが matchAll() メソッドです。

ES2020から導入され、現在の主要ブラウザやNode.jsで標準的に利用できます。

matchAll() で全てを取得する

const text = "test1 test2 test3";
const regex = /test(\d)/g; // gフラグが必須

// イテレータが返されるため、for...of や Array.from で扱う
const matches = text.matchAll(regex);

for (const match of matches) {
  console.log(`全体: ${match[0]}, キャプチャ: ${match[1]}, 位置: ${match.index}`);
}

実行結果

全体: test1, キャプチャ: 1, 位置: 0
全体: test2, キャプチャ: 2, 位置: 6
全体: test3, キャプチャ: 3, 位置: 12

matchAll() はイテレータを返します。

これをループで回すと、それぞれが match()（gなし）の戻り値と同じような「詳細情報付きの配列」になっています。

複数の箇所からデータを抜き出しつつ、その位置情報も活用したい高度なテキスト処理において非常に強力です。

JavaScriptのスキルを活かして年収を上げる方法

以上、JavaScriptの正規表現とmatchメソッドについて詳しく解説してきました。

なお、JavaScriptのスキルがある場合には、「副業で稼いで年収を上げる」といったことが可能です。

JavaScriptのスキルを持つ人は多いものの、その分案件数も多く、副業エージェントやフリーランスエージェントを利用することで予想外の高単価案件が見つかることもあります。

エージェントサービスは、登録も利用もすべて完全無料なので、どんな求人や案件があるのか気になる方は、気軽に利用してみるとよいでしょう。

スポンサーリンク