正規表現の鉄道ダイアグラム可視化
正規表現を鉄道ダイアグラム（線路図）として図解します。連接・選択（|）・繰り返し（* + ? {n,m}）・グループ・文字クラスの構造が、線路をたどるように直感的に読めます。図はSVG・画像で書き出しできます。処理はすべてブラウザ内で完結します。
前後の /.../ やフラグ（gi など）は自動で無視します。
このツールについて
- 左（緑の●）から右（赤の●）へ線路をたどると、その正規表現がマッチする文字列の並び方が分かります。
- 選択（|）は分岐、繰り返し（* + {n,m}）は青い戻り線のループ、任意（? *）は上を通るスキップ線で表します。
- グループは破線の枠で囲み、非キャプチャ
(?:)・先読み(?=)・名前つき(?<name>)などはラベルを表示します。 - 連接・選択・グループ・文字クラス・量指定子・アンカー・エスケープ・ドットに対応します。バックリファレンスなどの高度な記法は近似表示になることがあります。
- 処理はすべてブラウザ内で完結し、入力が外部に送信されることはありません。
正規表現の鉄道ダイアグラム可視化とは？使い方と活用ガイド
正規表現の鉄道ダイアグラム可視化は、正規表現を線路図（レイルロードダイアグラム）に変換して、その構造を目で読めるようにする無料ツールです。記号が詰まった正規表現は、書いた本人でさえ数日後には読めなくなります。図にすると、左から右へ線路をたどるだけで「何が必須で、何が任意で、どこが繰り返されるのか」が一目で分かります。
くわしい説明を読むあと3段落
表現の対応は直感的です。選択（|）は線路の分岐、繰り返し（*、+、{n,m}）は青い戻り線のループ、任意を表す ? や * は上を通るスキップ線として描かれます。グループは破線の枠で囲まれ、先読み (?=...) や名前つきグループ (?<name>...) にはラベルが付きます。連接・文字クラスにも対応しているため、実務で書く正規表現の大半はそのまま図にできます。
この可視化が効くのは、複雑な正規表現をレビューする場面です。「このメールアドレスの検証は、ドットが連続する入力を通してしまわないか」といった疑問は、文字列を眺めるより図を見たほうが早く判断できます。自分が書いた式を図にして意図と一致しているか確かめる、他人が書いた式を読み解く、といった両方向の使い方ができます。
出来上がった図は「SVGコピー」でSVGコードとして、「画像保存」でPNG画像としてダウンロードできます。設計書やコードレビューのコメント、勉強会の資料に貼り付ければ、正規表現の意図を言葉で説明する手間が省けます。入力した正規表現はブラウザ内で解析され、外部に送信されることはありません。入力したデータはすべてお使いのブラウザ内（JavaScript）で処理され、サーバーへ送信・保存されることはありません。会員登録やインストールも不要で、PC・スマートフォンのどちらからでも、すべての機能を無料で利用できます。社内の機密情報や個人情報を含むデータでも外部に漏れる心配がなく、ネットワークから切り離されたオフライン環境でも一度読み込めば動作するため、セキュリティが求められる業務でも安心して使えるのが、インストール型ソフトやサーバー処理型サービスにはないブラウザ完結型ツールの大きな利点です。
よくある質問
正規表現を図で表示できますか？
はい。正規表現を鉄道ダイアグラム（線路図）に変換し、左から右へ線路をたどるように構造を読めます。連接・選択（|）・繰り返し・グループ・文字クラスなどに対応します。
繰り返しや選択はどう表示されますか？
選択（|）は分岐、繰り返し（* + {n,m}）は青い戻り線のループ、任意（? *）は上を通るスキップ線で表します。グループは破線の枠で囲み、先読み(?=)や名前つき(?<name>)などはラベルを表示します。
図は保存できますか？
はい。「SVGコピー」でSVGコードを、「画像保存」でPNG画像としてダウンロードできます。資料や解説に貼り付けられます。
入力した正規表現は外部に送信されますか？
いいえ。処理はすべてお使いのブラウザ内（JavaScript）で完結し、入力した内容がサーバーへ送信・保存されることはありません。会員登録も不要で無料で使えます。