Posted at

正規表現エンジンの内部状態を可視化してみた

正規表現エンジンの内部状態をインタラクティブに可視化するツールを作ってみました。

visualizing-regexp-engine.gif

正規表現エンジンの勉強をしていると、内部状態遷移(NFA)の部分で躓く人が一定数いると思うのですが、このツールで挙動を視覚的に確認しながら進めると理解が早いと思います。

以下から試せます。

https://snoguchi.github.io/visualizing-regexp-engine/dist/

なお使える正規表現は基本演算子のみなので注意してください。


余談

正規表現エンジンについて勉強したい人には『正規表現エンジンを作ろう』という記事がおススメです。

連載で少し長めですが基礎から実装まで丁寧に解説されています。

今回の可視化ツールで利用した正規表現エンジンも、この記事に掲載されているPythonのサンプルコードをTypeScriptに写経したものを使っています。

またステートマシンの描画にはViz.jsというGraphviz系のライブラリを利用しました。

いくつかグラフ系のライブラリを試してみたのですが、ステートマシンの可視化に関しては手軽さと綺麗さでGraphviz系が優れているように思います。