【ITニュース解説】For those who don't understand /^[a-zA-Z]+$/: React Hook Form pattern explanation

システム開発において、ユーザーが情報を入力するフォームは非常に重要な要素だ。Webサイトやアプリケーションを利用する際、氏名やパスワードなどの入力を求められることは多い。しかし、ユーザーが誤った形式で情報を入力すると、システムエラーやセキュリティ上の問題につながる可能性がある。そこで必要となるのが「バリデーション」、つまり入力値の検証だ。バリデーションとは、入力データが事前に定められたルールや形式に沿っているかを確認し、問題があればエラーを通知する仕組みを指す。これにより、システムは常に正しい形式のデータを受け取ることができ、安定した動作と信頼性を保つことが可能になる。

モダンなWebアプリケーション開発では、ReactのようなJavaScriptライブラリが広く用いられている。その中で、フォームの管理やバリデーションを効率的に行う「React Hook Form」は、開発現場で非常に重宝されるライブラリの一つだ。システムエンジニアを目指すのであれば、このようなライブラリの基本的な使い方を理解しておくことは必須となるだろう。

ある時、このReact Hook Formを使って、ユーザーIDの入力フォームを作成していたとしよう。そのフォームには、「ユーザーIDは半角英字のみで構成されるべきである」という要件があった。そこで、以下のようなコードを記述した。

<Input {...register("userId", { required: "IDは必須です", pattern: { value: /^[a-zA-Z]+$/, message: "半角英字のみ利用可能です", }, })} />

このコードは、userIdという入力フィールドに検証ルールを設定している。requiredはフィールドが必須であることを示し、patternには/^[a-zA-Z]+$/という特殊な文字列が指定され、「半角英字のみ利用可能です」というメッセージが表示されるようになっている。

このコードを実装し、テストを行ったところ、最初は「username」や「UserID」といった値は問題なく受け付けられた。しかし、「user123」と数字を混ぜたり、「user_id」と記号を混ぜたりすると、エラーメッセージが表示され、入力が拒否された。これは確かに「半角英字のみ」という要件を満たしていないため正しい挙動だが、なぜこの/^[a-zA-Z]+$/が数字や記号を拒否し、半角英字のみを許可するのか、その具体的な理由を理解できていないと、応用が利かず困惑してしまうだろう。このpatternに指定されている特殊な文字列こそが「正規表現」であり、その意味を紐解くことが、この問題の解決に繋がる。

正規表現とは、文字列のパターンを記述するための特別な記法のことだ。特定の文字の並びや、文字の種類、出現回数などを簡潔に表現できるため、プログラム内で文字列の検索、置換、そして今回のバリデーションのように、文字列が特定の形式に合致するかどうかを検証する際に非常に強力なツールとなる。一見すると複雑な記号の羅列に見えるかもしれないが、それぞれの記号には明確な意味があり、それを一つずつ理解していくことで、どのような文字列を意図しているのかがわかるようになる。

では、今回の例である/^[a-zA-Z]+$/という正規表現を、左から順に分解してその意味を詳しく見ていこう。正規表現は通常、スラッシュ/で囲まれて記述されるが、このスラッシュ自体は正規表現の一部ではなく、開始と終了を示す区切り文字だ。本質的なパターンは、その内側にある^[a-zA-Z]+$の部分である。

最初の記号は^（ハット、キャレットと読む）だ。この^は、「入力文字列の先頭」を意味する特殊な記号である。つまり、この正規表現が評価を開始する位置が、必ず対象文字列の一番最初からでなければならないことを指定している。これがなければ、文字列の途中に存在するパターンにもマッチしてしまう可能性があるため、特定の形式に厳密に一致させたい場合には重要な役割を果たす。

次に現れるのは[a-zA-Z]という部分だ。角括弧[]は、「文字クラス」と呼ばれ、その中に記述された文字のいずれか一つにマッチすることを示す。a-zA-Zは、「aからzまでの小文字アルファベット」または「AからZまでの大文字アルファベット」のいずれか一文字を意味する。したがって、[a-zA-Z]は、半角の英字であれば大文字小文字を問わず、どんな一文字でも良いという条件を指定していることになる。

続いて、+（プラスと読む）記号がある。この+は、「直前のパターンが1回以上繰り返される」ことを意味する量指定子だ。今回のケースでは、直前のパターンは[a-zA-Z]、つまり半角英字の一文字なので、[a-zA-Z]+は「半角英字が1文字以上連続して出現する」というパターンにマッチすることになる。この+があることで、「半角英字が最低1文字あれば、それ以降は何文字続いていても良い」という柔軟性が生まれる。

そして、最後に現れるのが$（ダラーと読む）記号だ。この$は、「入力文字列の末尾」を意味する特殊な記号で、^と対をなす。つまり、この正規表現が評価を終了する位置が、必ず対象文字列の一番最後でなければならないことを指定している。^が文字列の開始を拘束し、$が文字列の終了を拘束することで、正規表現全体が「対象の文字列全体が指定されたパターンに完全に合致しなければならない」という厳密なルールを適用できるのだ。

これらの要素、すなわち^、[a-zA-Z]、+、$が組み合わさることで、/^[a-zA-Z]+$/という正規表現は、「入力された文字列の先頭から末尾までが、半角の英字（小文字でも大文字でも良い）が1文字以上連続したパターンのみで構成されていること」という非常に厳密な条件を表すことになる。

だからこそ、「user123」のように数字が混じった文字列や、「user_id」のように記号が混じった文字列は、文字列の途中に英字以外の文字が含まれているため、この正規表現に合致せずエラーとなる。逆に、「hello」「World」「REACT」のような、全て半角英字で構成された文字列は、この正規表現の条件を完全に満たすため、バリデーションを通過する。

このように、正規表現は一見すると呪文のように見えるが、それぞれの記号やパターンには明確な意味があり、それらを一つずつ理解し組み合わせることで、非常に複雑な文字列の検証ルールを簡潔に表現できる強力なツールだ。システムエンジニアとして、フォームの入力検証は日常的に行う作業であり、その核となる正規表現の知識は避けて通れない。今回の/^[a-zA-Z]+$/の例のように、正規表現を分解して考える癖をつければ、どんなに複雑なパターンに出会しても、その意味を読み解き、適切なバリデーションを実装できるようになるだろう。これは、堅牢で使いやすいシステムを開発するために不可欠なスキルの一つだ。