【Nuxt.js】正規表現基礎編①：よく使う表現を単語分割で解説！

# 前置き
![picture_pc_86e2745e2a9dc8a7c6e2d41906dd2abc.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/d3e755b2-b33f-ba85-4f18-6fa22dbdfe91.png)

今回は正規表現！
【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 にはアンダースコア（_）ではなくハイフン（-）を使用することをおすすめします。

https://support.google.com/webmasters/answer/76329?hl=ja&topic=2370420&ctx=topic

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

<img width="452" alt="スクリーンショット 2020-01-06 15.48.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/352b8577-15b6-5681-45ad-3b04ba8d2691.png">


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

<img width="342" alt="スクリーンショット 2020-01-06 15.50.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/d7689a39-1dc9-99e0-3d9a-96b18b258dfd.png">


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

<img width="342" alt="スクリーンショット 2020-01-06 16.19.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/a4cf5b6f-9f83-a442-7de2-fcb3599f4f91.png">


送信！

<img width="359" alt="スクリーンショット 2020-01-06 16.20.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/0dc24e0f-82db-c5ce-c062-1cb169159c09.png">


できましたね😄

# メールアドレス
```
^\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

✅動作チェック！

<img width="445" alt="スクリーンショット 2020-01-06 16.50.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/adcaaa54-7450-6ae6-f158-e21b6bf49d52.png">


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

<img width="352" alt="スクリーンショット 2020-01-06 16.51.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/e10ad494-5cd9-8d3b-69c1-ecb7315ad5bc.png">


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

<img width="359" alt="スクリーンショット 2020-01-06 16.52.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/565c01a2-c3d9-9a2f-9540-1f2ca6244618.png">


送信！

<img width="359" alt="スクリーンショット 2020-01-06 16.20.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/9d184e55-36cf-cdce-05e9-5975879957d0.png">


いけました〜😄🎉



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