正規表現、何度覚えても数ヶ月使わないと綺麗さっぱり忘れます。
これはもう自分の記憶力の問題な気もするんですが、「(?=...)って先読みだっけ後読みだっけ」を検索する回数が人生で何十回になったか分かりません。それなら検索する代わりに、試しながら思い出せる場所を自分で作ってしまえばいいのでは、と思ったのが正規表現ラボの始まりです。
世の中に正規表現の解説記事は死ぬほどあります。MDNのガイドだけでも十分すぎるほど詳しいです。
それでも、読むだけだと結局手が覚えてくれないんですよね、これが。
なので、正規表現ラボは1つの画面の中に、性格の違う4つの機能を詰め込みました。
- リアルタイムでマッチ結果が見えるテスト機能
- 基礎からグループ化・先読み後読みまでの解説
- よく使うパターンのチートシート
- メールアドレスや郵便番号の実用テンプレート
読んで→試して→また読み直す、をタブ移動なしで行き来できることにはこだわりました。
「学ぶ」だけじゃ足りなくて、チートシートも足した
最初はリアルタイムテスト機能だけで十分だと思っていたんですが、自分で使い込むうちに「これだけじゃ足りないな」と感じて、チートシートとテンプレート集を後から追加しました。正規表現って、組み立てながらテストする作業と同じくらい、「あの記法、なんだっけ」と辞書的に調べる場面が多いんですよね。学習コンテンツだけじゃこの「サッと調べたい」欲求は満たせないと気づいて、一覧性の高いチートシートを別に用意しました。
あとよく使う形式のパターンをテンプレートとして置いてあります。
- メールアドレス
- 郵便番号
- 電話番号
学習目的というより、「今すぐこの形式のバリデーションを書きたいんだけど」という実務の切実なニーズに応えたくて足しました。学ぶための機能とすぐ使うための機能、性格が違う2つを無理やり同じ画面に共存させてる感じもしますが、初心者にも実務者にも役立つ場所になっていればいいなと思っています。
電話番号については、最も利用頻度が多いのではないでしょうか？覚えなくて、これはもう決まったフォーマットとしてひな形的に使うのが良いと思います。また、メールアドレスは非常に複雑なフォーマットなので、比較的簡易的なパターンとして記載しています、このメールアドレスの形式はとんでもない論争が勃発するほどのお題なので今回は深いところまでは触れていません…。
JSとPCREは方言が違う
個人的に一番「これは入れておきたい」と思ったのが、JavaScriptとPHP(PCRE)で正規表現の挙動が微妙に違う問題です。実務でこれに何度もハマった恨みがあって、多くの解説サイトはどっちか片方の言語しか扱ってくれないので、正規表現ラボでは同じパターンをJS側とPCRE側の両方でその場検証できるようにしました。
「言語によって方言があるんだよ」というのを、実際に動かして体感してもらう方が早いと思ったので。
SPAなのにちゃんと読まれるように
あと技術的な小ネタとして、このツールはReactで作ったSPAなんですが、学習コンテンツのページだけはビルド時にちゃんとHTMLとして書き出す(プリレンダーする)ようにしています。SPAって検索エンジンにちゃんと読んでもらえるか怪しい部分があって、解説文みたいな読み物としての価値があるページは最初から静的HTMLで出しておいた方が安心、という判断です。
地味な工程ですが、公開してからアクセス解析を見て「ちゃんと拾われてるな」とホッとした記憶があります。