この記事は、【 可茂IT塾 Advent Calendar 2021 】の8日目の記事です。
Flutterでメールアドレスの形式が正しいかどうかを判定する際に、正規表現を用いたvalidationを実装する機会がありました。
実装自体はサクッとできるのですが、意味を理解していなかったので、詳細まで解説していきたいと思います。
実装だけしたい場合は、以下のコードをコピペでOKです。
var email = "makumaaku@makumaaku.com";
bool emailValid = RegExp(r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[a-zA-Z0-9]+\.[a-zA-Z]+").hasMatch(email);
この正規表現は、こちらの記事を参考にしています。
以下では、上記のFlutterでの正規表現を使ったemailのvalidationを分解して解説していきます。
r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[a-zA-Z0-9]+\.[a-zA-Z]+"
この文字列の意味が理解できることだゴールですね。
r"..."
これで...
の中の文字列は、生の文字列になります。
\n
なども改行ではなく、文字列となります。
^
行の先頭を意味する。
^hoge
の場合は、行頭がhogeから始まる文字列を示しています。
[...]
指定した文字列...
の中のいずれかと一致しているものを指す。
[abc]
の場合、aまたは、bまたは、cを表します。
a-zA-Z0-9
a-z ・・・aからzまでのいずれかの文字列
A-Z ・・・AからZまでのいずれかの文字列
0-9 ・・・0から9までのいずれかの文字列
これらは連結可能なので、a-zA-Z0-9
はa~z,A~Z,0~9のいずれかに当てはまる文字列を表します。
[...]
チェックポイント3で登場した[ ]
ですが、[ ]
の中では、^
や+
などのメタ文字は普通の文字として認識されます。
本来.
はなんでも良い1文字を表しますが、[ ]
の中では.
という文字列扱いになります。
[...^...]
[ ]
の中で2番目以降に^
がある場合は、文字として認識されます。
[ ]
の中で、^
が先頭にある場合は、直後の文字の否定になります。(チェックポイント5の例外)
例外がある分ややこしくなりますが、 今回の例では、[ ]
の中に入っている^
は普通の文字を表しています。
+
+
の直前の文字列が1つ以上続くものを示します。
maaku+
の場合、maakuuuuuuuuu
など、maak
に加えて、直前の文字列u
が1つ以上の文字列を表します。
\.
今までに登場した、^
,+
などのメタ文字は、\.
,\+
とすることで、メタ文字でなく、単なる文字列扱いになります。
なので、\.
は.
という文字を表していることになります。
r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[a-zA-Z0-9]+\.[a-zA-Z]+"
文字に起こすと、以下のようになります。
.
,!
,#
,$
,%
,&
,'
,*
,+
,-
,/
,=
,?
,^
,_
,`
,{
,|
,}
,~
のいずれかの文字列が、 少し長いですね^^; 以下は、1~4部分が実際のコードのどの部分を指しているかです。
[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]
^[...]+
@[a-zA-Z0-9]+
\.[a-zA-Z]+
1番の部分は、[a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]
でいい気がします。
いかがでしょうか。
Flutterでのemailのvalidationの実装方法に加え、正規表現もある程度理解できましたか。
いくつかある規則性を覚えさえすれば、あとは当てはめるだけなので、思ったよりもシンプルかもしれませんね。
参考になれば幸いです。
可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。
Read More可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。
Read More