Flutterで正規表現を用いたemailのvalidationを実装

image

この記事は、【 可茂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);

この正規表現は、こちらの記事を参考にしています。

正規表現を用いたemailのvalidationを解説

以下では、上記のFlutterでの正規表現を使ったemailのvalidationを分解して解説していきます。

r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[a-zA-Z0-9]+\.[a-zA-Z]+"

この文字列の意味が理解できることだゴールですね。

チェックポイント1

r"..."
これで...の中の文字列は、生の文字列になります。
\nなども改行ではなく、文字列となります。

チェックポイント2

^
行の先頭を意味する。 ^hogeの場合は、行頭がhogeから始まる文字列を示しています。

チェックポイント3

[...]
指定した文字列...の中のいずれかと一致しているものを指す。

[abc]の場合、aまたは、bまたは、cを表します。

チェックポイント4

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のいずれかに当てはまる文字列を表します。

チェックポイント5

[...]
チェックポイント3で登場した[ ]ですが、[ ]の中では、^+などのメタ文字は普通の文字として認識されます。
本来.はなんでも良い1文字を表しますが、[ ]の中では.という文字列扱いになります。

チェックポイント6

[...^...]
[ ]の中で2番目以降に^がある場合は、文字として認識されます。
[ ]の中で、^が先頭にある場合は、直後の文字の否定になります。(チェックポイント5の例外)
例外がある分ややこしくなりますが、 今回の例では、[ ]の中に入っている^は普通の文字を表しています。

チェックポイント7

+
+の直前の文字列が1つ以上続くものを示します。 maaku+の場合、maakuuuuuuuuuなど、maakに加えて、直前の文字列uが1つ以上の文字列を表します。

チェックポイント8

\. 今までに登場した、^,+などのメタ文字は、\.,\+とすることで、メタ文字でなく、単なる文字列扱いになります。 なので、\..という文字を表していることになります。

チェックポイントを踏まえvalidationの正規表現を解説

r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[a-zA-Z0-9]+\.[a-zA-Z]+"

文字に起こすと、以下のようになります。

  1. a~z,A~Z,0~9,.,!,#,$,%,&,',*,+,-,/,=,?,^,_,`,{,|,},~のいずれかの文字列が、
  2. 1つ以上並んでいるものが先頭に来ていて、
  3. @とa~z,A~Z,0~9のいずれかが1文字以上並んでいて、
  4. .とa~z,A~Zの文字列が1文字以上並んでいる。

少し長いですね^^; 以下は、1~4部分が実際のコードのどの部分を指しているかです。

  1. [a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]
  2. ^[...]+
  3. @[a-zA-Z0-9]+
  4. \.[a-zA-Z]+

1番の部分は、[a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]でいい気がします。

最後に

いかがでしょうか。
Flutterでのemailのvalidationの実装方法に加え、正規表現もある程度理解できましたか。
いくつかある規則性を覚えさえすれば、あとは当てはめるだけなので、思ったよりもシンプルかもしれませんね。
参考になれば幸いです。

参考記事

https://userweb.mnet.ne.jp/nakama/

お知らせ

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報!興味のある人はぜひコミュニティに参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More

タグ

Flutter (103)初心者向け (26)イベント (17)Google Apps Script (15)Nextjs (11)可茂IT塾 (8)Firebase (7)riverpod (6)React (6)ChatGPT (5)新卒 (4)就活 (4)vscode (4)デザイン (4)Dart (4)JavaScript (4)FlutterWeb (3)Prisma (3)NestJS (3)Figma (3)Slack (3)TypeScript (3)ワーケーション (3)インターン (3)お知らせ (3)設計 (2)線型計画法 (2)事例 (2)Image (2)File (2)画像 (2)iOS (2)アプリ開発 (2)React Hooks (2)tailwindcss (2)社会人 (2)大学生 (2)RSS (1)CodeRunner (1)個人開発 (1)Android (1)Unity (1)WebView (1)Twitter (1)フルリモート (1)TextScaler (1)textScaleFactor (1)学生向け (1)supabase (1)Java (1)Spring Boot (1)shell script (1)正規表現 (1)パワーポイント (1)趣味 (1)モンスターボール (1)CSS (1)SCSS (1)Cupertino (1)ListView (1)就活浪人 (1)既卒 (1)保守性 (1)iPad (1)シェアハウス (1)スクレイピング (1)PageView (1)画面遷移 (1)flutter_hooks (1)Gmail (1)GoogleWorkspace (1)ShaderMask (1)google map (1)Google Places API (1)GCPコンソール (1)Google_ML_Kit (1)Vercel (1)Google Domains (1)Git (1)オンラインオフィス (1)オブジェクト指向 (1)クラスの継承 (1)ポリモーフィズム (1)LINE (1)Bitcoin (1)bitFlyer (1)コミュニティー (1)文系エンジニア (1)Freezed (1)markdown (1)GlobalKey (1)ValueKey (1)Key (1)アイコン (1)go_router (1)debug (1)datetime_picker (1)Apple Store Connect (1)FlutterGen (1)デバッグ (1)Widget Inspector (1)検索機能 (1)Shader (1)Navigator (1)メール送信 (1)Dio (1)CustomClipper (1)ClipPath (1)Material Design (1)カスタム認証 (1)アニメーション (1)Arduino (1)ESP32 (1)経験談 (1)フリーランス (1)mac (1)csv (1)Dialog (1)BI (1)LifeHack (1)ショートカット (1)Chrome (1)高校生 (1)キャリア教育 (1)非同期処理 (1)生体認証 (1)BackdropFilter (1)レビュー (1)getAuth (1)Algolia (1)コンサルティング (1)Symbol (1)

お知らせ

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報!興味のある人はぜひコミュニティに参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More