JavaScriptにおけるmatchメソッドの戻り値を使用するテクニック10選

JavaScriptのmatchメソッドの戻り値を使いこなす方法 JS
この記事は約21分で読めます。

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

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

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

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

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

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

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

●JavaScriptのmatchメソッドとは

JavaScriptのmatchメソッドは、文字列内で正規表現パターンにマッチする部分を検索するために使用される強力なツールです。

プログラミング経験が1〜2年程度あり、正規表現の基本的な知識はあるものの、まだ活用しきれていない20代後半から30代前半のエンジニアの方にとって、matchメソッドを理解し、適切に使いこなすことは、コードの品質向上やスキルアップにつながるでしょう。

では早速、matchメソッドの基本的な使い方について見ていきましょう。

○matchメソッドの基本的な使い方

matchメソッドは、文字列に対して呼び出し、引数に正規表現パターンを指定します。

マッチする部分があれば、マッチした文字列を含む配列が返され、マッチしない場合はnullが返されます。

例えば、次のようなコードを考えてみましょう。

const text = "Hello, World!";
const result = text.match(/Hello/);
console.log(result);

実行結果

["Hello"]

この例では、”Hello, World!”という文字列に対して、/Hello/という正規表現パターンを使ってmatchメソッドを呼び出しています。

マッチする部分があるため、[“Hello”]という配列が返されています。

○正規表現パターンについて

正規表現パターンは、文字列内の特定のパターンを表現するために使用される記法です。

正規表現を使うことで、柔軟かつ強力な文字列検索が可能になります。

例えば、次のような正規表現パターンを考えてみましょう。

  • /hello/i: 大文字小文字を区別せずに”hello”をマッチ
  • /\d+/: 1つ以上の数字にマッチ
  • /[a-z]/: 小文字のアルファベットにマッチ

正規表現パターンを使いこなすことで、文字列処理の幅が広がり、コードの可読性や効率性が向上します。

○マッチしない場合の戻り値

matchメソッドを呼び出したときに、マッチする部分がない場合、戻り値はnullになります。

nullは、値が存在しないことを表すJavaScriptの特別な値です。

次の例を見てみましょう。

const text = "Hello, World!";
const result = text.match(/Bye/);
console.log(result);

実行結果

null

この例では、”Hello, World!”という文字列に対して、/Bye/という正規表現パターンを使ってmatchメソッドを呼び出しています。

マッチする部分がないため、nullが返されています。

○マッチした場合の戻り値

matchメソッドを呼び出したときに、マッチする部分がある場合、戻り値は配列になります。

配列には、マッチした文字列とキャプチャグループ（括弧で囲まれた部分）の値が含まれます。

次の例を見てみましょう。

const text = "The quick brown fox jumps over the lazy dog.";
const result = text.match(/quick (brown) (fox)/);
console.log(result);

実行結果

[
  "quick brown fox",
  "brown",
  "fox"
]

この例では、”The quick brown fox jumps over the lazy dog.”という文字列に対して、/quick (brown) (fox)/という正規表現パターンを使ってmatchメソッドを呼び出しています。

マッチした文字列全体と、キャプチャグループの値がそれぞれ配列に含まれています。

●matchメソッドを使ったパターンマッチングの方法

JavaScriptのmatchメソッドを使ったパターンマッチングは、文字列処理においてとても重要な役割を果たします。

正規表現パターンを適切に指定することで、柔軟かつ効率的な文字列検索が可能になります。

それでは実際に、matchメソッドを使ったパターンマッチングの方法について、いくつかのサンプルコードを交えながら見ていきましょう。

○サンプルコード1：特定の文字列を検索する

最初のサンプルコードでは、特定の文字列を検索する方法を見てみましょう。

const text = "Hello, world! Hello, JavaScript!";
const pattern = /Hello/;
const result = text.match(pattern);
console.log(result);

実行結果

["Hello"]

この例では、”Hello, world! Hello, JavaScript!”という文字列の中から、”Hello”という文字列を検索しています。

/Hello/という正規表現パターンを使って、matchメソッドを呼び出すことで、最初にマッチした”Hello”が結果として返されています。

マッチした文字列は配列として返されるため、result[0]でアクセスすることができます。

特定の文字列を検索する場合、このような簡単な正規表現パターンを使うことが多いでしょう。

○サンプルコード2：大文字小文字を区別しない検索

次のサンプルコードでは、大文字小文字を区別せずに文字列を検索する方法を見てみましょう。

const text = "Hello, world! hello, JavaScript!";
const pattern = /hello/i;
const result = text.match(pattern);
console.log(result);

実行結果:

["Hello"]

この例では、”Hello, world! hello, JavaScript!”という文字列の中から、大文字小文字を区別せずに”hello”という文字列を検索しています。

正規表現パターンの最後にiフラグを付けることで、大文字小文字を区別しない検索が可能になります。

結果として、最初にマッチした”Hello”が返されています。

大文字小文字を区別しない検索は、ユーザー入力の処理などで役立ちます。

○サンプルコード3：複数のパターンを同時に検索

続いて、複数のパターンを同時に検索する方法を見てみましょう。

const text = "apple, banana, cherry, date";
const pattern = /banana|cherry/;
const result = text.match(pattern);
console.log(result);

実行結果

["banana"]

この例では、”apple, banana, cherry, date”という文字列の中から、”banana”または”cherry”という文字列を検索しています。

正規表現パターンで|（パイプ）を使うことで、複数のパターンを指定できます。

結果として、最初にマッチした”banana”が返されています。

複数のパターンを同時に検索することで、条件に合う文字列を効率的に見つけることができます。

○サンプルコード4：キャプチャグループを使った検索

最後に、キャプチャグループを使った検索方法を見てみましょう。

const text = "John Doe, Age: 30";
const pattern = /(\w+)\s(\w+),\s Age:\s(\d+)/;
const result = text.match(pattern);
console.log(result);

実行結果:

[
  "John Doe, Age: 30",
  "John",
  "Doe",
  "30"
]

この例では、”John Doe, Age: 30″という文字列から、名前と年齢を抽出しています。

正規表現パターンでは、()を使ってキャプチャグループを定義しています。

結果として、マッチした文字列全体と、各キャプチャグループの値が配列として返されています。

キャプチャグループを使うことで、文字列から必要な情報を取り出すことができます。

●matchメソッドの戻り値の処理

JavaScriptのmatchメソッドを使ってパターンマッチングを行った後、その結果をどのように処理するかは非常に重要です。

matchメソッドの戻り値を適切に扱うことで、目的に応じた情報を取得し、プログラムの流れを制御することができます。

それでは、matchメソッドの戻り値の処理方法について、いくつかのサンプルコードを見ていきましょう。

○サンプルコード5：マッチ結果の有無をチェックする

マッチ結果の有無をチェックすることは、matchメソッドを使う際の基本的なテクニックの1つです。

const text = "Hello, world!";
const pattern = /hello/i;
const result = text.match(pattern);

if (result) {
  console.log("マッチしました！");
} else {
  console.log("マッチしませんでした。");
}

実行結果

マッチしました！

この例では、if文を使ってマッチ結果の有無をチェックしています。

resultがtruthyな値（マッチした場合は配列、マッチしない場合はnull）であれば、”マッチしました！”と表示されます。

マッチ結果の有無をチェックすることで、条件分岐を行ったり、エラーハンドリングを行ったりすることができます。

○サンプルコード6：マッチした文字列を取得する

マッチした文字列を取得することは、matchメソッドの戻り値を処理する上で欠かせないテクニックです。

const text = "The quick brown fox jumps over the lazy dog.";
const pattern = /quick\s(\w+)\s(\w+)/;
const result = text.match(pattern);

if (result) {
  const matchedText = result[0];
  const captureGroup1 = result[1];
  const captureGroup2 = result[2];

  console.log("マッチした文字列:", matchedText);
  console.log("キャプチャグループ1:", captureGroup1);
  console.log("キャプチャグループ2:", captureGroup2);
} else {
  console.log("マッチしませんでした。");
}

実行結果

マッチした文字列: quick brown fox
キャプチャグループ1: brown
キャプチャグループ2: fox

この例では、マッチ結果の有無をチェックした後、マッチした文字列とキャプチャグループの値を個別に取得しています。

result配列の要素を使って、目的の情報にアクセスすることができます。

マッチした文字列やキャプチャグループの値を取得することで、必要なデータを抽出し、活用することができます。

○サンプルコード7：マッチした文字列の個数を数える

マッチした文字列の個数を数えることは、文字列内のパターンの出現回数を把握するのに役立ちます。

const text = "apple, banana, cherry, apple, date, apple";
const pattern = /apple/g;
const result = text.match(pattern);

if (result) {
  const count = result.length;
  console.log("マッチした個数:", count);
} else {
  console.log("マッチしませんでした。");
}

実行結果

マッチした個数: 3

この例では、正規表現パターンにgフラグを付けることで、グローバルマッチを行っています。

マッチ結果の有無をチェックした後、result配列の長さ（lengthプロパティ）を使ってマッチした文字列の個数を取得しています。

マッチした文字列の個数を数えることで、特定のパターンがどれだけ出現したかを把握することができます。

○サンプルコード8：マッチ結果を配列に格納する

マッチ結果を配列に格納することは、複数のマッチ結果を一括して扱うのに便利です。

const text = "apple, banana, cherry, apple, date, apple";
const pattern = /a[a-z]+/g;
const matches = text.match(pattern);

if (matches) {
  console.log("マッチした文字列:", matches);
} else {
  console.log("マッチしませんでした。");
}

実行結果

マッチした文字列: ["apple", "banana", "apple", "apple"]

この例では、正規表現パターンにgフラグを付けてグローバルマッチを行い、マッチした文字列をmatches配列に格納しています。

マッチ結果を配列に格納することで、複数のマッチ結果を一括して処理したり、個別の要素にアクセスしたりすることができます。

●matchメソッドを使う際のよくあるエラーと対処法

JavaScriptのmatchメソッドを使ってパターンマッチングを行う際、初心者から経験者まで、誰もが陥りがちなエラーがいくつかあります。

このエラーを理解し、適切に対処することは、バグのない正確なプログラムを書くために欠かせません。

それでは、matchメソッドを使う際のよくあるエラーと対処法について見ていきましょう。

○正規表現パターンの間違い

正規表現パターンを正しく記述することは、matchメソッドを使う上で最も重要なポイントの1つです。

正規表現パターンに間違いがあると、意図しない結果になったり、エラーが発生したりする可能性があります。

例えば、次のようなコードを見てみましょう。

const text = "Hello, world!";
const pattern = /hello/;
const result = text.match(pattern);

console.log(result);

実行結果

null

この例では、正規表現パターンを/hello/としていますが、実際の文字列は"Hello, world!"となっています。

大文字と小文字が一致していないため、マッチ結果はnullになってしまいます。

正しくマッチさせるには、次のように正規表現パターンにiフラグを追加します。

const text = "Hello, world!";
const pattern = /hello/i;
const result = text.match(pattern);

console.log(result);

実行結果

["Hello"]

iフラグを使うことで、大文字と小文字を区別せずにマッチさせることができます。

正規表現パターンを正しく記述するためには、正規表現の構文をしっかりと理解し、必要に応じてフラグを適切に使用することが大切です。

○マッチしない場合のnull値の処理忘れ

マッチしない場合、matchメソッドはnullを返します。

このnull値の処理を忘れると、予期せぬエラーが発生する可能性があります。

例えば、次のようなコードを見てみましょう。

const text = "Hello, world!";
const pattern = /bye/;
const result = text.match(pattern);

console.log(result[0]);

実行結果

Uncaught TypeError: Cannot read property '0' of null

この例では、"Hello, world!"という文字列に対して、/bye/という正規表現パターンを使ってマッチさせようとしています。

しかし、マッチする部分がないため、resultはnullになります。

そのままresult[0]にアクセスしようとすると、nullに対してプロパティアクセスを行おうとするため、TypeErrorが発生してしまいます。

これを防ぐには、マッチ結果がnullでないことを確認してから処理を行う必要があります。

const text = "Hello, world!";
const pattern = /bye/;
const result = text.match(pattern);

if (result) {
  console.log(result[0]);
} else {
  console.log("マッチしませんでした。");
}

実行結果

マッチしませんでした。

if文を使ってresultがtruthyな値であることを確認することで、null値に対する不適切な処理を回避できます。

○グローバルフラグの付け忘れ

正規表現パターンでグローバルマッチを行いたい場合、gフラグを付ける必要があります。

gフラグを付け忘れると、期待通りの結果が得られないことがあります。

例えば、次のようなコードを見てみましょう。

const text = "apple, banana, apple, cherry, apple";
const pattern = /apple/;
const matches = text.match(pattern);

console.log(matches);

実行結果

["apple"]

この例では、"apple, banana, apple, cherry, apple"という文字列から"apple"という文字列を探していますが、gフラグを付けていないため、最初にマッチした"apple"だけが結果として返されています。

gフラグを付けることで、文字列内のすべての"apple"にマッチさせることができます。

const text = "apple, banana, apple, cherry, apple";
const pattern = /apple/g;
const matches = text.match(pattern);

console.log(matches);

実行結果

["apple", "apple", "apple"]

gフラグを使うことで、グローバルマッチが行われ、文字列内のすべての"apple"が配列として返されています。

グローバルマッチが必要な場合は、gフラグを付けることを忘れないようにしましょう。

●matchメソッドの実践的な応用例

JavaScript開発において、matchメソッドは文字列処理の様々な場面で活用することができます。

ここでは、実践的なコーディングにmatchメソッドを活かすための応用例を見ていきましょう。

matchメソッドを使いこなすことで、ユーザー入力のバリデーション、URLからの情報抽出、HTMLタグの除去、文字列の置換処理など、幅広い文字列操作を効率的に行うことができます。

それでは、具体的なサンプルコードを交えながら、matchメソッドの実践的な応用例を見ていきましょう。

○サンプルコード9：ユーザー入力のバリデーション

ユーザーからの入力を検証することは、アプリケーションの安全性と信頼性を確保する上で欠かせません。

matchメソッドを使って、入力された文字列が特定のパターンに合致しているかどうかを確認することができます。

例えば、ユーザーに電話番号を入力してもらう場合、次のようなコードを使ってバリデーションを行うことができます。

function validatePhoneNumber(phoneNumber) {
  const pattern = /^\d{3}-\d{3}-\d{4}$/;
  return pattern.test(phoneNumber);
}

const phoneNumber1 = "123-456-7890";
const phoneNumber2 = "123-456-78901";

console.log(validatePhoneNumber(phoneNumber1));
console.log(validatePhoneNumber(phoneNumber2));

実行結果

true
false

この例では、validatePhoneNumber関数を定義し、電話番号が"xxx-xxx-xxxx"の形式に合致しているかどうかを正規表現パターンを使って確認しています。

testメソッドを使って、入力された電話番号がパターンにマッチするかどうかを真偽値で返しています。

phoneNumber1は正しい形式の電話番号なのでtrueが返され、phoneNumber2は形式が異なるのでfalseが返されます。

このように、正規表現パターンを使ってユーザー入力のバリデーションを行うことで、不正な入力を検出し、アプリケーションの信頼性を高めることができます。

○サンプルコード10：URLからドメイン名を抽出する

Webアプリケーションを開発する際、URLから特定の情報を抽出する必要があることがあります。

matchメソッドを使って、URLからドメイン名を抽出してみましょう。

function extractDomain(url) {
  const pattern = /^https?:\/\/(?:www\.)?([^/]+)/;
  const match = url.match(pattern);
  return match ? match[1] : null;
}

const url1 = "https://www.example.com/path/to/page";
const url2 = "http://example.org";

console.log(extractDomain(url1));
console.log(extractDomain(url2));

実行結果

example.com
example.org

この例では、extractDomain関数を定義し、正規表現パターンを使ってURLからドメイン名を抽出しています。

パターンは、httpまたはhttpsで始まり、オプションでwww.が続き、その後にドメイン名が来るという構造になっています。

matchメソッドを使ってURLを解析し、キャプチャグループ（([^/]+)）で囲まれた部分がドメイン名として抽出されます。

マッチした場合はmatch[1]でドメイン名を返し、マッチしない場合はnullを返しています。

url1とurl2はどちらも有効なURLなので、それぞれのドメイン名が正しく抽出されています。

このように、matchメソッドを使ってURLから必要な情報を抽出することで、Webアプリケーションの開発に役立てることができます。

○サンプルコード11：HTMLタグの除去

Webページから取得したテキストデータには、しばしばHTMLタグが含まれています。

matchメソッドを使って、HTMLタグを除去し、プレーンテキストを抽出してみましょう。

function removeHTMLTags(html) {
  const pattern = /<[^>]*>/g;
  return html.replace(pattern, "");
}

const html = "<p>This is a <strong>sample</strong> text with <em>HTML</em> tags.</p>";
const plainText = removeHTMLTags(html);

console.log(plainText);

実行結果

This is a sample text with HTML tags.

この例では、removeHTMLTags関数を定義し、正規表現パターンを使ってHTMLタグを除去しています。

パターンは、<で始まり、>で終わる文字列にマッチします。gフラグを使って、文字列内のすべてのHTMLタグにマッチさせています。

replaceメソッドを使って、マッチしたHTMLタグを空文字列に置換することで、HTMLタグが除去されたプレーンテキストが得られます。

このように、matchメソッドとreplaceメソッドを組み合わせることで、HTMLタグを除去し、必要なテキストデータを抽出することができます。

○サンプルコード12：文字列の置換処理

文字列内の特定のパターンを別の文字列に置換する処理は、データの整形やフォーマット変更などに役立ちます。

matchメソッドを使って、文字列の置換処理を行ってみましょう。

function replaceWords(text) {
  const pattern = /\b(hello|world)\b/gi;
  return text.replace(pattern, (match) => match.toUpperCase());
}

const text = "Hello, world! This is a hello world example.";
const replacedText = replaceWords(text);

console.log(replacedText);

実行結果

HELLO, WORLD! This is a HELLO WORLD example.

この例では、replaceWords関数を定義し、正規表現パターンを使って"hello"と"world"という単語を置換しています。

\bは単語の境界を表し、gフラグでグローバルマッチ、iフラグで大文字小文字を区別しないマッチを行っています。

replaceメソッドの第2引数にコールバック関数を渡し、マッチした単語を大文字に変換しています。

まとめ

JavaScriptのmatchメソッドは、正規表現を使って文字列からパターンにマッチする部分を見つけ出す強力なツールです。

基本的な使い方から戻り値の処理、よくあるエラーの対処法まで、様々な知識が必要とされます。

matchメソッドを使いこなすことで、ユーザー入力のバリデーション、URLからの情報抽出、HTMLタグの除去、文字列の置換処理など、幅広い文字列処理の場面で活躍します。

JavaScriptの開発経験が1〜2年程度あるエンジニアにとって、matchメソッドを理解し活用することは、コードの品質向上とスキルアップに繋がるでしょう。

この記事で紹介したテクニックを参考に、matchメソッドを使いこなせるようになることが、JavaScriptプログラミングのレベルアップに役立つことを願っています。