JavaScriptパターンマッチの完全解説！10個のサンプルコードで使いこなせ！

はじめに
●JavaScriptパターンマッチとは
- ○パターンマッチの基本
●JavaScriptパターンマッチの使い方
●JavaScriptパターンマッチの応用例
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、JavaScriptのパターンマッチを理解し、10個のサンプルコードを使って実践的な使い方ができるようになります。

初心者にもわかりやすい徹底解説で学びましょう。

●JavaScriptパターンマッチとは

○パターンマッチの基本

JavaScriptのパターンマッチとは、文字列やデータに対して特定のパターンを検出することです。

正規表現を用いて、様々な文字列操作が可能になります。

例えば、メールアドレスの検証やテキスト内のURLの抽出などができます。

●JavaScriptパターンマッチの使い方

パターンマッチは、正規表現オブジェクトを作成し、それを使って文字列に対して検索や置換を行うことができます。

ここでは、いくつかのサンプルコードを紹介して、基本的な使い方を学びましょう。

○サンプルコード1：文字列の検索

このコードでは、正規表現を使って文字列の中に特定の単語が存在するかを検索しています。

この例では、”Hello, World!”という文字列に”World”という単語が含まれているかを調べています。

const str = "Hello, World!";
const regex = /World/;
const result = regex.test(str);
console.log(result); // true

○サンプルコード2：電話番号の検証

このコードでは、正規表現を使って電話番号のフォーマットが正しいかを検証しています。

この例では、日本の電話番号の形式（例：03-1234-5678）を検証しています。

const phoneNumber = "03-1234-5678";
const regex = /^\d{2,4}-\d{2,4}-\d{4}$/;
const isValid = regex.test(phoneNumber);
console.log(isValid); // true

○サンプルコード3：メールアドレスの検証

このコードでは、正規表現を使ってメールアドレスが正しい形式かどうかを検証しています。

この例では、一般的なメールアドレスの形式を検証しています。

const email = "example@example.com";
const regex = /^[^@]+@[^@]+\.[^@]+$/;
const isValid = regex.test(email);
console.log(isValid); // true

○サンプルコード4：URLの抽出

このコードでは、正規表現を使ってテキスト内のURLを抽出しています。

この例では、テキスト内に含まれるhttpまたはhttpsのURLを抽出しています。

const text = "Visit https://www.example.com and http://www.example2.com for more information.";
const regex = /https?:\/\/[\w\-\.!~?&+\*"'(),\/]+/g;
const urls = text.match(regex);
console.log(urls); // ["https://www.example.com", "http://www.example2.com"]

●JavaScriptパターンマッチの応用例

パターンマッチは様々な場面で活用できます。

ここでは、いくつかの応用例とそのサンプルコードを紹介します。

○サンプルコード5：ユーザー名のバリデーション

このコードでは、正規表現を使ってユーザー名が指定したルールに従っているかを検証しています。

この例では、ユーザー名が英数字で構成され、6〜20文字の長さであることを確認しています。

const username = "user123";
const regex = /^[a-zA-Z0-9]{6,20}$/;
const isValid = regex.test(username);
console.log(isValid); // true

○サンプルコード6：パスワードの強度チェック

このコードでは、正規表現を使ってパスワードの強度をチェックしています。

この例では、パスワードが8文字以上で、大文字・小文字・数字・記号がそれぞれ1つ以上含まれていることを確認しています。

const password = "P@ssw0rd";
const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
const isValid = regex.test(password);
console.log(isValid); // true

○サンプルコード7：日付のフォーマット変更

このコードでは、正規表現を使って日付のフォーマットを変更しています。

この例では、”2023-04-30″という形式の日付を”2023年04月30日”という形式に変換しています。

const date = "2023-04-30";
const regex = /(\d{4})-(\d{2})-(\d{2})/;
const formattedDate = date.replace(regex, "$1年$2月$3日");
console.log(formattedDate); // "2023年04月30日"

○サンプルコード8：テキスト内のリンクの置換

このコードでは、正規表現を使ってテキスト内のURLをリンクに置換しています。

この例では、テキスト内に含まれるhttpまたはhttpsのURLを<a>タグで囲み、リンクに変換しています。

const text = "Visit https://www.example.com for more information.";
const regex = /(https?:\/\/[\w\-\.!~?&+\*"'(),\/]+)/g;
const linkedText = text.replace(regex, '<a href="$1">$1</a>');
console.log(linkedText); // "Visit <a href="https://www.example.com">https://www.example.com</a> for more information."

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

このコードでは、正規表現を使って複数のパターンを同時に検証しています。

この例では、入力されたテキストが電話番号またはメールアドレスのどちらかの形式に一致するかを確認しています。

const input = "example@example.com";
const phoneNumberRegex = /^\d{2,4}-\d{2,4}-\d{4}$/;
const emailRegex = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/;
const isValid = phoneNumberRegex.test(input) || emailRegex.test(input);
console.log(isValid); // true（メールアドレスの形式に一致）

○サンプルコード10：独自のパターンマッチャーを作成

このコードでは、独自のパターンマッチャーを作成しています。

この例では、入力された文字列が「こんにちは」または「こんばんは」のどちらかに一致するかを確認しています。

function customMatcher(input) {
  const regex1 = /^こんにちは$/;
  const regex2 = /^こんばんは$/;
  return regex1.test(input) || regex2.test(input);
}

const input1 = "こんにちは";
const input2 = "こんばんは";
const input3 = "さようなら";

console.log(customMatcher(input1)); // true
console.log(customMatcher(input2)); // true
console.log(customMatcher(input3)); // false