正規表現の可視化ツールRegulexを使おう！

こんにちは。
[ワイの正規表現入門 - Qiita](https://qiita.com/Yametaro/items/36493c107053ae996b47)
の記事を見ていた時に、

> 「大正・昭和・平成・令和だけをOKにしたいんや」

を表現する正規表現は、

> ^大正|昭和|平成|令和$

でなく、

> ^(大正|昭和|平成|令和)$

という話がありました。恥ずかしながらすっかり認識が抜け落ちていました。
これはテストをすり抜ける気がしますし、レビューでも見つけられる気がしません。

そこで、正規表現可視化ツール[Regulex](https://jex.im/regulex/#!flags=&re=%5E(a%7Cb)*%3F%24)の出番です！

![regulex_http.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288329/d2b37ef2-7c18-beb8-425a-1523a62f50cc.png)


https://jex.im/regulex/#!flags=&re=%5E(http%7Chttps)%3A%2F%2F(%5B%5Cw-%5D%2B%5C.)%2B%5B%5Cw-%5D%2B(%2F%5B%5Cw-.%2F%3F%25%26%3D%5D*)%3F%24

(正規表現は、[よく使う正規表現はもうググりたくない！ - Qiita](https://qiita.com/dongri/items/2a0a18e253eb5bf9edba)のインタネットURLを使用しています)

# Regulexの使い方

上のテキストボックスに正規表現を入力すると、
下に入力した正規表現を可視化した図を表示してくれます。素敵すぎる。

![regulex_http_description.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288329/ba2e6eca-53a4-9943-8209-705087935d21.png)

うまく表示されないな、と思ったらVisualizeボタンを押してください。どこでエラーが起こっているかわかります。

![regulex_error.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288329/d79415f0-39f7-c7d5-f725-c78e0c174d1d.png)


# ^大正|昭和|平成|令和$ を可視化

さっそく冒頭の正規表現`^大正|昭和|平成|令和$`を入力してみましょう。

![regulex_reiwa_00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288329/f4a28c5a-46f2-908f-8004-4d6ad0489379.png)

https://jex.im/regulex/#!flags=&re=%5E%E5%A4%A7%E6%AD%A3%7C%E6%98%AD%E5%92%8C%7C%E5%B9%B3%E6%88%90%7C%E4%BB%A4%E5%92%8C%24

日本語には対応していないみたいです。

とりあえず読みやすいようにローマ字にしておきます。

![regulex_reiwa_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288329/584f4eeb-8d51-dcf3-8e4e-9f603604f811.png)


https://jex.im/regulex/#!flags=&re=%5ETaisho%7CShowa%7CHeisei%7CReiwa%24

文字列の開始(``Begin!``)がTaishoの部分にしか適用されておらず、文字の終端(``End!``)もReiwaにしか適用されていないことがわかります。

#  ^(大正|昭和|平成|令和)$ を可視化

`^(大正|昭和|平成|令和)$`を入力してみましょう。

![regulex_reiwa_10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288329/cf854126-5a4c-7109-4c43-75968ed5699a.png)


https://jex.im/regulex/#!flags=&re=%5E(%E5%A4%A7%E6%AD%A3%7C%E6%98%AD%E5%92%8C%7C%E5%B9%B3%E6%88%90%7C%E4%BB%A4%E5%92%8C)%24


読みやすいようにローマ字にします。

![regulex_reiwa_11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288329/9fc8ffc8-6633-0e34-b9ea-f66587d2baf7.png)

https://jex.im/regulex/#!flags=&re=%5E(Taisho%7CShowa%7CHeisei%7CReiwa)%24

文字列の開始(``Begin!``)が全体に適用され、文字の終端(``End!``)も全体に適用されています。

# 他にも、こんな時に気づける、はず

## グルーピングの途中にハイフンをハイフンの意味で入れたのに、範囲を表してしまった場合
こんな感じの正規表現を作りたいとき

* 1文字以上32文字以下
* 使用できる文字列は半角英数字と`#$%&()-._`

そのまま
`^[0-9a-zA-Z#$%&()-._]{1,32}$`と書いてしまうと、

![regulex_hyphen_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288329/c3ad07cf-1d6e-5370-9272-7c6c2f079864.png)

https://jex.im/regulex/#!flags=&re=%5E%5B0-9a-zA-Z%23%24%25%26()-._%5D%7B1%2C32%7D%24


`)-.`の部分が範囲を表してしまっていることに気づけるかもしれません。

今回の場合、修正の一例は`^[-0-9a-zA-Z#$%&()._]{1,32}$`です。

![regulex_hyphen_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288329/8d2f533a-6840-2c42-1615-3f6631337f20.png)

https://jex.im/regulex/#!flags=&re=%5E%5B-0-9a-zA-Z%23%24%25%26()._%5D%7B1%2C32%7D%24

意図した結果になりました。

# (おまけ) チーム内で使う場合
入力した正規表現はURLのクエリ部分に含まれていますので、他の人と共有するのが簡単です。

![regulex_query.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288329/d1623176-caf2-fc93-c8a3-34e871bd6ef3.png)


レビューの時に、レビューを受ける人が、正規表現の行にRegulexのURLをコメントしておく、もしくはソースコードのコメントとしてRegulexのURLを書くのも良いでしょう。

# おわりに

プログラミング言語の他に正規表現も覚えなきゃいけないなんて大変なので、ツールをどんどん使っていきましょう！