前置き

今回は正規表現！
【Nuxt.js】Form実践編：GoogleFormと独自フォーム連携
https://note.com/aliz/n/n9c6deafe0633

ここのバリデーションの設定で使いました🌟
もちろんコードに反映させることも可能です。
正規表現の意味は様々なページで乗ってるので
ここでは実際に使われる表現で
簡単なものから理解しやすいよう解説します。

基本

まずはメタ文字の種類の把握！
ここが参考になります！
まずは一文を理解するのではなく、
単語を分割し、簡単に理解しましょう♪
https://userweb.mnet.ne.jp/nakama/

インターネットURL

^(http|https)://([\w-]+\.)+[\w-]+(/[\w-./?%&=#]*)?$

◾️^(http|https)://
noteのURLで該当箇所を太字にします。
**https://**note.com/
文頭がhttpまたはhttpsから始まる
://はそのままの文字として認識
【メタ文字】
　・^　文頭
　・|　いずれか(or)

これは^https?でも置き換えができます。
【メタ文字】
　・?　直前がないか、1つだけある

◾️([\w-]+.)+
https://**note.**com/
単語構成文字を含めた
どれか1文字を1回以上繰り返し
後ろにドット含めて1まとまりとして扱う
それを1回以上繰り返す
note.note.note.でもOKということですね。
【メタ文字】
　・( )　この中を1まとまりとして扱う
　・[ ]　どれか1文字(or)
　・\w　単語構成文字、全ての半角英数字
　・-　不明。。。
　　　　検索しましたが不明のままでした。
　　　　コメントいただけると嬉しいです🍀🙇‍♀️
　・+　1回以上(繰り返し)
　・.　~で~をメタ文字として扱わない
　　　　.をただのひとつの文字で扱う

◾️[\w-]+
https://note. com/
上と同じです。
半角英数字のどれか1文字を繰り返し。

◾️(/[\w-./?%&=#]*)?$
https://note.com /
2つに分けて考えます。

★(/[どれか1文字]*)
　/以降のいずれか1文字がないか、
　1回以上繰り返し。
　単語構成文字**(\w)と
　各記号(-./?%&=#)*のいずれか1文字。
　[ ]内にも/があるため
　/[ いずれかの文字 / いずれかの文字]はOK！
　　https://note.com/ でもいいし
　　https://note.com/notes/n12345 でもいい
　【メタ文字】
　　　・　直前の文字がないか、
　　　　　　1回以上繰り返し

★( )?$
　( )このまとまりが
　全くないか1つだけあり、それが文末にくる
　　https://note.com でもいい
　　https://note.com/ でもいいし
　　https://note.com/notes/n12345 でもいい
　【メタ文字】
　　・?　全くないか1つだけあるか
　　・$　文末にする

ちなみにURLにアンダースコアを入れることは
ダメではないけどハイフンがオススメです🍒

URL にはアンダースコア（_）ではなくハイフン（-）を使用することをおすすめします。

✅では、動作チェック
今回は以前のGoogleFormを活用します。

この状態で…
まずは誤ったURL。

よしよし。
今度は正しいURLで。

送信！

できましたね😄

メールアドレス

^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$

◾️^\w+
メールアドレスの該当箇所を太字にします。
note.nuxt@alizlab.com
文頭が半角英数字の繰り返し
(文頭が記号はNG)
【メタ文字】　
・^　文頭
・\w　単語構成文字、全ての半角英数字

◾️([-+.]\w+)*
note**.nuxt**@alizlab.com
-か.の後ろに必ず英数字を置くが、
そのまとまりはなくてもいいし繰り返しても良い
-aaa.aaaはOK
--aaa...aaaはOK
-.aaaはNG
【メタ文字】
　・[ ]　どれか1文字(or)
　・+　直前の文字が1回は必ず使われ、
　　繰り返しもできる
　・*　直前の文字がないか、1回以上繰り返し

◾️@\w+([-.]\w+)*
note.nuxt @alizlab.com
＠の後ろに必ず半角英数字
-か.いずれかと必ず半角英数字のまとまりは
なくてもいいし繰り返しても良い
@alizlab.alizlabはOK
@alizlab-alizlabはOK
@.はNG
@-はNG
@alizlab.はNG
@alizlab-はNG

◾️.\w+([-.]\w+)*$
note.nuxt@alizlab .com
.という文字から始まりその後ろに必ず半角英数字
-か.いずれかと必ず半角英数字のまとまりが
なくてもいいし、繰り返しても良い
note.nuxt@comはNG

✅動作チェック！

まずは誤ったメールアドレス。

よしよし。
今度は正しい方で。

送信！

いけました〜😄🎉

このアカウントでは
Nuxt.js、Vue.jsを誰でも分かるよう、
超簡単に解説しています🎈😀
これからも発信していくので、
ぜひフォローしてください♪
https://twitter.com/aLizlab