正規表現を使いたいけど記法を忘れたときに便利な「ビジュアル正規表現エディタ」

正規表現は「テキストの中から『りんご』と『リンゴ』の両方を探す」とか「テキストファイル内のURLが含まれる行を全部抽出する」といった際に便利ですが、「正規表現の基本的な仕組みは知っているものの、たまにしか使わないから記法を毎回調べている」という人は多いはず。ブロックを組み合わせて正規表現を書ける「ビジュアル正規表現エディタ」が公開されていて便利そうだったので使ってみました。

ビジュアル正規表現エディタ
https://hi-king.github.io/visual_regexp_web/

ビジュアル正規表現エディタを開くとこんな感じ。「/M\d+(エンジニア|PdM|データサイエンティスト)大*募集/」という正規表現がブロックの組み合わせで表現されています。

自分で「テキストの中の『りんご』と『リンゴ』を検索する」という操作に使う正規表現を作ってみます。まず、すでにあるブロックをごみ箱アイコンの上にドラッグ＆ドロップして削除します。

「グループ」の中にある「または」というブロックをエディタ内にドラッグ＆ドロップ。

ブロックがエディタに追加されました。

続いて、「基本」の中の「テキスト」をドラッグ＆ドロップ。

「テキスト」を「または」の空いている枠に移動します。

カチッという効果音が鳴って、「または」と「テキスト」が合体しました。

同様の操作で「テキスト」をもう1個追加。

テキストを編集して「りんご」と「リンゴ」に書き換えます。

画面の下部にある「生成された正規表現」の欄に、「/りんご|リンゴ/」という正規表現が表示されました。後は、テキストエディタの検索画面に正規表現を入力すれば「テキストの中から『りんご』と『リンゴ』の両方を探す」という操作を実現できます。

画面下部には正規表現のテストエリアも用意されていて、任意のテキストを入力して想定通りの正規表現を作れているか確認できます。

上記のように、ビジュアル正規表現エディタを使えば正規表現の記法をハッキリ覚えていなくても正規表現を構築することが可能。ただし、「OR条件を3つ以上並べるには『または』を入れ子構造にする必要がある」といったように逆に複雑になっている面もあるので、ある程度正規表現に慣れたら自分で書いた方が速いです。

なお、ビジュアル正規表現エディタはBlocklyというフレームワークを用いて開発されています。以下の開発者ブログではBlocklyを用いたビジュアルプログラミングツールの開発手法について詳しく解説されています。

正規表現すぐ忘れるのでビジュアルプログラミングツールを作った ~ Blocklyで簡単にビジュアルDSL作ろう ~ - エムスリーテックブログ
https://www.m3tech.blog/entry/blockly