JavaScriptでmatchメソッドを活用する方法｜実例付き

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

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

✔当記事で提供する情報

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

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

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

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"]

まとめ

当記事では、JavaScriptのmatchメソッドについて学習してきました。

• matchメソッドにより、文字列から特定のパターンに一致する部分を効率的に検索・抽出できる
• 正規表現の知識と組み合わせることで、さまざまな文字列操作タスクを簡単にこなせる

今回学んだ内容をさらに深めるために、以下のステップを試してみることをおすすめします。

1. 実際のプロジェクトでmatchメソッドを活用してみる。
2. 正規表現のさらなる学習を進め、より複雑なパターンの抽出に挑戦する。
3. 他の文字列メソッド（replace, searchなど）と組み合わせて、さらに高度な操作を実現する。

当記事が、JavaScriptのmatchメソッドの理解と活用の手助けとなることを願っています。