JavaScriptでmatchメソッドを活用する方法

（最終更新月：2023年11月）

✔以下のような方に向けて書かれています

「JavaScriptのmatchメソッドがどのように働くのか知りたい」

「matchメソッドの正しい使い方を学びたい」

「具体的なmatchメソッドの使用例を探している」

✔当記事で提供する情報

JavaScriptのmatchメソッドの基本概念
matchメソッドの使用法とその応用手法
matchメソッドの具体的な活用例

当記事では、matchメソッドの基本から、そのオプションを最大限に活用した応用技術まで、具体的な例を通して詳細に解説しています。

ぜひ最後までご覧ください。

筆者プロフィール

【現職】プロダクトマネージャー

【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

見るからにきれいなコードの書き方
コードの分割方法
変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

JavaScriptとは？

まずは、「JavaScript」についての基本をご覧いただきます。

JavaScriptについて理解することで、ウェブページの動的な表現や機能実装に役立つでしょう。

JavaScriptの基本
JavaScriptの使用領域

JavaScriptの基本解説

JavaScriptは、1995年にNetscape社によって開発されたスクリプト言語です。

主にウェブブラウザ上で動作し、ウェブページに動的な動作や交互作用をもたらします。

基本的な構文やデータ型、関数などの概念を持ち、多くのウェブサイトで利用されています。

console.log("Hello, World!");

JavaScriptの基本的なコード例で、ブラウザのコンソールに”Hello, World!”と表示します。

JavaScriptの使用領域

JavaScriptは元々ウェブブラウザ上での操作を目的として開発されました。

現在では以下のような多岐にわたる領域で使用されています。

サーバーサイドの開発(Node.js)
モバイルアプリ開発(React Native)
デスクトップアプリ開発(Electron)

正規表現の基本

こちらでは、「正規表現」についてお伝えしていきます。

当記事でご紹介するmatchメソッドは、正規表現に関連するメソッドのひとつです。

正規表現の概要と役割
正規表現の特殊文字と関連メソッド

正規表現の概要と役割

正規表現は、特定の文字列のパターンを表現するための強力なツールです。

例えば、Eメールアドレスや電話番号の形式を検証する際に使用されます。

/^\d{2,4}-\d{2,4}-\d{4}$/

上記は電話番号の形式を検証するための正規表現の一例です。

正規表現の特殊文字と関連メソッド

正規表現には多くの特殊文字（例：., *, +, ?）が存在し、これらを組み合わせて複雑なパターンを表現可能。

また、JavaScriptには正規表現を活用するためのメソッドが用意されています。

match()
replace()
search()

matchメソッドの基本

こちらでは、JavaScriptの「matchメソッド」についてお伝えしていきます。

matchメソッドの活用により、文字列の検索や抽出を効率的におこなえるでしょう。

メソッドの構文と引数
返値について
matchメソッドで使用するパターンの記述方法
matchとtestの違い

メソッドの構文と引数

matchメソッドは、文字列に対して正規表現を用いて検索し、一致する部分を配列として返します。

基本的な構文は以下の通りです。

string.match(regexp);

ここで、regexpは正規表現オブジェクトまたはリテラルを指定します。

返値について

matchメソッドの返値は、一致した文字列を要素とする配列です。

一致するものがない場合はnullを返します。

const str = "Hello, World!";
const result = str.match(/World/); // 返値: ["World"]

matchメソッドで使用するパターンの記述方法

正規表現のパターンは、スラッシュ(/)で囲んで記述します。

以下は数字を検索するために、/\d+/というパターンを用いる例です。

const str = "Price: 1000 yen";
const result = str.match(/\d+/); // 返値: ["1000"]

matchとtestの違い

matchとtestは両方とも正規表現を利用するメソッドですが、使い方や目的が異なります。

matchは一致する文字列を配列で取得するのに対し、testは一致するかどうかの真偽値を返します。

const regex = /apple/;
console.log("I have an apple.".match(regex)); // ["apple"]
console.log(regex.test("I have an apple."));  // true

実際のコードを使ったmatchメソッドの活用法

このセクションでは、実際のコード例を交えて、matchメソッドの具体的な活用方法を解説します。

具体的な例を元に、より実践的な使い方を習得することが目的です。

match()の基本的な使用例
globalとignoreCaseフラグを使用した例
名前付きキャプチャグループの活用例
引数なしのmatch()の使用例
RegExp以外を引数として取る例

match()の基本的な使用例

match()メソッドを使う基本的なシナリオから学びましょう。

const text = "The quick brown fox jumps over the lazy dog.";
const matches = text.match(/the/gi); // ['The', 'the']

上の例では、gは”global”の略で、文字列全体で一致する全ての結果を返すもの。

iは”ignore case”の略で、大文字小文字を区別しないで検索します。

globalとignoreCaseフラグを使用した例

正規表現には、特定の動作を制御するためのフラグがあります。

ここではgとiフラグの使用方法を説明します。

const str = "Color or Colour?";
const result = str.match(/colou?r/gi); // 返値: ["Color", "Colour"]

上記の例では、uの有無の両方にマッチする正規表現を使用しています。

名前付きキャプチャグループの活用例

名前付きキャプチャグループを使用すると、一致する部分に名前をつけて参照できます。

const data = "2023-09-04";
const regex = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const match = data.match(regex);
console.log(match.groups.year);  // "2023"
console.log(match.groups.month); // "09"
console.log(match.groups.day);   // "04"

引数なしのmatch()の使用例

引数を指定しない場合、match()は入力された文字列全体を配列として返します。

const phrase = "apple";
const result = phrase.match(); // ["apple"]

RegExp以外を引数として取る例

match()メソッドは、正規表現だけでなく、文字列も引数として受け取れます。

この場合、その文字列に対する厳密な一致を検索します。

const greeting = "Hello, World!";
const search = greeting.match("World"); // ["World"]

実践編：複数の抽出と変数での正規表現指定

ここでは、より高度な使用例を取りあげて、matchメソッドの可能性を探りましょう。

複数の文字列を一度に抽出
正規表現を変数で指定

複数の文字列を一度に抽出

一つの文字列から、複数のパターンに一致する部分を一度に抽出する方法を見てみましょう。

const sentence = "I have 3 apples and 4 oranges.";
const numbers = sentence.match(/\d+/g); // ["3", "4"]

上記の例では、数字に一致する部分を全て取得しています。

正規表現を変数で指定

正規表現を直接指定する代わりに、変数を使用して動的に正規表現を生成・指定することも可能です。

const word = "apple";
const regex = new RegExp(word, 'gi');
const text = "Apple pie is tastier than apple juice.";
const matches = text.match(regex); // ["Apple", "apple"]