「正規表現とは？制作現場での具体例で学ぶ入門ガイド」

eyecatch110 WEB制作

こんにちは、SouDogです。

Web制作の現場では、データのバリデーションやテキスト検索など、さまざまな場面で**正規表現（Regular Expressions, RegExp）**が活用されます。しかし、多くの初心者が「難しい」「とっつきにくい」と感じるのも事実です。

本記事では、正規表現の基本から実務で使える応用例までを詳しく解説します。
「正規表現って何？」という方でも理解しやすいように、具体例を交えながら進めていきます。

1. 正規表現とは？

正規表現とは、文字列の検索や置換を効率よく行うためのパターンマッチング技術です。
例えば、以下のような場面で使われます。

  • 入力フォームのバリデーション（メールアドレスや電話番号のチェック）
  • ログデータの解析（特定のエラーメッセージを抽出）
  • テキストの一括置換（CSVデータの整形）

プログラミング言語ごとに文法が若干異なりますが、基本的な概念は共通しています。

補足: 正規表現の歴史については Wikipedia を参考にしてください。

2. 基本的な構文と書き方

正規表現では、特定のパターンを指定するために「メタ文字」と呼ばれる特殊記号を使用します。

2.1 文字の指定

パターン意味例
aa に一致apple
[abc]a, b, c のいずれかに一致cat, bat
[0-9]0〜9 の数字に一致1234
const regex = /[abc]/;
console.log(regex.test("apple")); // true

2.2 メタ文字の活用

メタ文字意味例
.任意の1文字に一致a.b は acb に一致
\d数字（0-9）に一致\d{3} は 123 に一致
\s空白文字（スペース、タブ、改行）に一致Hello\sWorld
const regex = /\d{3}/;
console.log(regex.test("123")); // true

2.3 繰り返し指定

記号意味例
*0回以上の繰り返しa* は aaa に一致
+1回以上の繰り返しa+ は aa に一致
{n,m}n回以上m回以下の繰り返しa{2,4} は aaa に一致

3. よく使われる正規表現のパターン

3.1 メールアドレスのバリデーション

const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
console.log(emailRegex.test("test@example.com")); // true

3.2 URLの抽出

const urlRegex = /https?:\/\/[^\s]+/g;
console.log(urlRegex.test("https://example.com")); // true

3.3 電話番号のフォーマット確認

const phoneRegex = /^\d{3}-\d{4}-\d{4}$/;
console.log(phoneRegex.test("090-1234-5678")); // true

4. 実務での活用例

4.1 JavaScriptでのフォームバリデーション

document.querySelector("#submit").addEventListener("click", function() {
  const email = document.querySelector("#email").value;
  if (!emailRegex.test(email)) {
    alert("正しいメールアドレスを入力してください");
  }
});

4.2 .htaccess でのリダイレクト処理

RewriteEngine On
RewriteRule ^old-page.html$ new-page.html [R=301,L]

5. 正規表現のデバッグと最適化

正規表現は便利ですが、複雑になるとバグの原因になります。
以下のツールを使ってデバッグを行いましょう。

また、パフォーマンスを考慮し、不要な処理を避けることも重要です。

6. まとめ

本記事では、制作現場で役立つ正規表現について解説しました。
最初は難しく感じるかもしれませんが、よく使うパターンを覚えるだけでも十分に活用できます。

コメント

スポンサーリンク