【勉強会】「知っていると役に立つ正規表現」に参加【day79】

フロントエンド

プログラミング独学day79のアウトプットは?

今日は

【勉強会】「知っていると役に立つ正規表現」

をアウトプットします!

 

 

 

こんにちは。プログラミングでweb制作ができるようになりたいharuです。

2歳0歳の育児をしながら、22時〜1時に独学しています!

 

わかったことや、気付きをログに残します。

同じく初学者の人が、これをみてインプットや復習ができるように書いていきます。

 

【勉強会】「知っていると役に立つ正規表現」に参加

今日は、22時〜YouTubeLive「知っていると役に立つ正規表現」勉強会に参加しました。
ファシリテーターは、ムーさん(@mu_vpoe)と zaruさん(@zaru)!

初めての参加でしたが、初学者向けにわかりやすく・和やかに解説してくださりとても楽しい30分でした〜♪本当にありがとうございました!

せっかく教えていただいたので、アウトプットしていきます。

 

正規表現とは?

正規表現とは、文字列の集合を「特定の記法」で表現する方法のこと。

言葉にすると難しくなってしまうけど、たとえば「haru」という文字で考えてみる↓

haru ha8u  halu  ha0u …という文字列があるとする(テキトーですw)
これは、正規表現で /ha.u/ と表現することができます!

※コードとして書くときは上記のように//(デリミタ)で囲みます。##とかでもOK。

 

正規表現で表すメリットは、

・判定
・検索
・置き換え

を容易におこなうことができること。

さまざまなプログラミング言語で使われていて、わたしが8月から勉強するJavaScriptでも出てきます。(先生おすすめ書籍の「JavaScript本格入門」にもp151~記載があった)

英語だとRegular Expression。Regex(レゲックス)などと呼ばれることも。

 

正規表現をブラウザで試せる便利ツール

ムーさんがtwitter で教えてくださったのがこのツール。

こんな画面になっていて、

上:正規表現を書く
下:テストしたい文字列を書く

ことで、ブラウザ上で正規表現を試すことができます。

さっそく基本の正規表現を知る!

正規表現には、とても多くの種類があります…

今回教えていただいたのは、その中の7つです。(基本の表現5つ+応用2つ)

① .(ドット) 任意の1文字にマッチする

例)ha.u

このようにかくと、.(ドット)の部分に任意の文字が入ったものがマッチします。

この例でいくと、haru ha3u halu ha0u なんかもマッチ。

※マッチすると、マーカーが引かれます。

 

② *(アスタリスク) 前にある文字が0文字以上つづく

例)haru*

このように書くと、*の前の「u」が0文字以上つづいている者がマッチします。

haru  haruu  haruuuuuuu とかもマッチします。
harahetta はノーマッチ。

③ +(プラス) 前にある文字が1文字以上つづく

例)haru+

②と似ているけど、+の前の「u」が1文字以上つづかないとマッチしません。

haruu  haruuu  haruuuuuuuとかがマッチ。

今回は、haruだけだとノーマッチです。uがつづいてないからです。

④ [](ブラケット) 中にある文字いずれかにマッチ

例)[haru]

h、a、r、u のいずれかの文字が入ったものがマッチします。

たとえば、とかマッチングします。

book はノーマッチです。

また、ブラケットは[1-9] [a-c]のように、範囲を指定することもできます。

1,2,3,4,5,6,7,8,9
a,b,c

が指定できます。

⑤ {}(ブレース) 前にある文字がn文字つづく

例)haru{4}

「u」が4文字つづいた文字列がマッチします。

また、haru{4,6}のように書くと「uが4個以上、6個以下」という指定もできます。

 

ここまでの①〜⑤がよく使う基本の5つです。次からは応用の2つです。

応用:()カッコ  と $ドル

()で囲むと、囲まれた内容にマッチした文字が「記録」されます。save!!!

$1で記録したものを呼び出すことができます。

例)ID : ([a-z]+)  

このように書くと、a~zの文字が1個以上つづくものを「記録」できます。
たとえば、ID :haruがマッチすると、「haru」を記録してくれる。

(+は、前の文字が1文字以上つづくものをマッチングしてくれるのでした…!)

$1とすると記録したものを呼び出せますが、これを使うのは置き換えの時です。

エディタで、ID:([a~z]+)と検索して、ID:haruがマッチしたとします。
ここでIDを@に置き換えてみます。

@:$1
とすると@:haruと置き換えができます。

 

応用:(?=)lookahead

例)haru(?=taso)

(?=)は、直後に囲まれた文字列があるものをマッチさせてくれます。

文字にすると難しいですが、上の例で考えてみると…
tasoが後につづいている”haru”がマッチするとなります。

 

(?=)の他にもいろいろあります。

上記の表は、今日のスライドから拝借しましたm(__)m

x.com

↑スライドはこちらから!スライド、めちゃめちゃわかりやすいです。動画間に合わなかった人も、スライドで十分勉強できると思います!

 

 

あとがき

初めて参加した勉強会でしたが、わかりやすくてびっくりしました。

正規表現は完全に初見だったのですが、いつどんな時に使うものなのかイメージが湧きました。

使いこなせるかは、また別の問題ですが。。。笑

 

来週からの勉強会も参加できたらと思います。

 

 

**現在もりけん塾に所属しています↓

師匠「もりけんさん」(@terrace_tec)

もりけんさんのHPはこちら