無料＆登録不要で正規表現を図示してくれる「Regexper」を使ってみた

アプリ開発の場面では、入力されたテキスト内に誕生日などの特定パターンの文字列が含まれているかを確認したり、別の文字列に置き換えたりするときに、正規表現は必須です。しかし、正規表現を誤ってしまうと、アプリケーションによっては、データを破壊してしまったり、誤作動を起こすリスクがあるのも事実。このため正規表現を変更する場合、事前に試験用の環境で試すのが普通ですが、開発現場によっては、試験用の環境であっても簡単に適用できない場合や、本番用の環境しかないなど、試す場面が限られることが考えられます。このとき、机上での検証を行いますが、人の手による検証は、どれだけ実力のある人がチェックしても誤るリスクがあり、不安を拭うことはできません。「Regexper」を使えば、入力した正規表現を無料で、機械的に図示して、読みやすくしてくれるとのこと。複雑な正規表現を入力しても読みやすくなるのか、実際に使ってみました。

Regexper
https://regexper.com/

◆使い方
「Regexper」にアクセス。

「Enter JavaScript-style regular expression to display」と書かれているフォームに、正規表現を入力します。ここでは、どんなテキストともマッチする正規表現「.*」と入力して、「Display」ボタンをクリックすると……

入力した正規表現が構文図の形でフォームの下に表示されます。テキストで書かれた正規表現では読み取りづらくても、図であれば「任意の1文字が0回以上ある文字列」にマッチするルールを意味していることがわかります。

「Download」をクリックすると、作成した画像をSVG形式のファイルとして保存できます。作った正規表現が間違っていないことを示す資料として使うことも可能です。

また、「Permalink」を右クリックして、リンク先URLをコピーして……

ブラウザのアドレスバーにコピーしたURLを貼り付けて、アクセスすると……

リンク先URLをコピーした時点での内容が表示されます。作業途中で中断しても、続きから始めることもできます。

◆すこし複雑な正規表現を入力してみる
誕生日を「1990/04/01」などの、スラッシュ区切りの文字列のパターンを正規表現で入力してみます。以下の正規表現をフォームに入力して、「Display」ボタンをクリックすると……

([12][089][0-9][0-9])\/([01][0-9])\/([0-3][0-9])

[12]のように、「1」か「2」のどちらか一方の文字にマッチする正規表現は縦向きに表記され、[0-9]のように「0」～「9」の中の1文字にマッチする正規表現は横向きに表記されます。これらを併記した正規表現は図示すると、少し見づらい印象。

次に「apple」という文字列から始まる行とマッチする正規表現を入力してみます。以下の正規表現をフォームに入力して、「Display」をクリック。

^(apple).*$

行の先頭を示す「^」が「Start of line」、行の終わりを示す「$」が「End of line」で表されていて、記号の意味がわからなくても、何をしようとしているのか、わかりやすくなっています。

続いて、ピコ太郎のPPAPの歌詞にマッチする正規表現を書いてみます。フォームに以下の正規表現を入力し、「Display」をクリック。

^(I have a|pen)?(pineapple|apple| )*(pen)?\.$

どちらかの文字列パターンを示す「|」が図では、どちらの文字列を通るかの経路を表し、0回または1回の存在を示す「?」が文字列を通る経路とバイパスするルートを表しています。正規表現は長くなると、わかりにくくなるものですが、構文図として図示されることで、内容が把握しやすくなっています。