JavaScriptにおける正規表現

f:id:ryoutaku_jo:20190203203831p:plain

【結論】
正規表現とは、文字の検索条件を
 文字列として表現する為の記法

・検索フォームやデータの検証など
 様々な場面で用いられる


【目次】


【本題】

JavaScript正規表現について調べた

チーム開発で作成しているメルカリについて、本家サイトのユーザー新規登録は、
ページを遷移しながら入力フォームを埋めていく方法を採用しています。

今回これをJavaScriptで再現したのですが、
その場合、JavaScript上にバリデーションを記述する必要があり、
それには正規表現の知識が不可欠なので、まとめる事にしました。

正規表現とは

正規表現とは、文字の検索条件を、
文字列として表現する記法です。

例えば、下記の様なデータがあるとします。

・田中太郎
吉田太郎
・鈴木花子
・田中裕也
佐藤大
・鈴木太郎

この中から、「太郎」と名の付くデータだけを
プログラミングで抽出したいとします。

一見簡単そうですが、プログラムは正確に指示されないと動いてくれないので、
「太郎」を探す様に指示をしても、「太郎」以外の文字が混じっているので、
一致するデータは無いと判断してしまいます。

そこで登場するのが、正規表現です。

正規表現を使えば、検索したい文字の条件を
文字列として表現する事が出来ます。

実際に、『「太郎」を含むデータ』を
正規表現で表すと、下記の様になります。

/.*太郎.*/

この様に、文字列として検索条件を指定できるので、
プログラムに「/.*太郎.*/」を探す様に命令することで、
「太郎」を含む、すべてのデータを抽出する事が可能です。

この他にも、数多くの記法が存在し、
文字の種類(英数字・カナなど)や文字数などでも指定ができるため、
柔軟に文字を探し出して、処理を行う事が可能です。

正規表現の活用シーン

正規表現が用いられるのは、主に下記のパターンに分類されます。

・一部が一致する文字を抽出する(検索)
 頭文字が一致すれば、該当するデータを出力するといった
 部分一致の検索などに利用できます。
 多くの検索フォームで採用されている手法です。

・特定の文字だけ取り除く(置換)
 多くの文字の中から、不要なキーワードだけを選び抜いて、
 それだけ削除したり、別の文字に置き換える時に利用します。
 テキストエディタにも標準で備わっている機能です。

・文字が特定の条件を満たしているか確認する(検証)
 対象の文字列が、指定した条件を満たしているか確認できます。
 会員登録の入力フォームで、ユーザーが入力したパスワードが
 条件(英数字6文字以上など)を満たしているか検証できます。

JavaScrptにおける正規表現の作成方法

JavaScritptでは、二種類の方法で正規表現を作成できます。

正規表現リテラル

var reg = /abc/;

上記の通り、スラッシュでパターンを囲む方法があります。
正規表現リテラル」という書き方です。

RegExp オブジェクト

var reg = new RegExp('abc');

一方で、new RegExp()と書く方法もあります
RegExpオブジェクト」という書き方です。

それぞれの違いは下記の3つです。

正規表現リテラルの方が、パフォーマンスが良いとされる
RegExpオブジェクトは、動的に正規表現を生成できる
RegExpオブジェクトでは、エスケープ処理が必要になる

JavaScriptでの利用方法

replaceメソッド
文字列の指定した部分を別の文字列に置き換えるメソッドです。
第一引数に置き換えたい文字列を指定し、
第2引数に変換後の文字列を指定します。

str.match(regexp)

 matchメソッド
引数に指定した文字列がレシーバの文字列に含まれているか
チェックするためのメソッドです。含まれている場合は、
指定した文字列が要素となった配列が返り値として得られます。
含まれていない場合は、返り値としてnullが得られます。

str.match(regexp)

testメソッド
matchと同じく、引数に指定した文字列がレシーバの文字列に含まれているか
チェックするメソッドです。matchと違う点は、含まれている場合は、
 trueを、含まれない場合はfalse を返します。

regexObj.test(str)

総括

正規表現のパターンについては、
かなり膨大な量になるので、別の記事でまとめたいと思います。

使いこなすには、かなりの練度を要すると思われますが、
データ処理に不可欠な技術なので、根気よく取り組んでいきたいと思います。

《今日の学習進捗》

チーム開発:9日目
Enumによる都道府県のプルダウン選択機能の実装。
Javascriptによる入力フォームのバリデーションを追加。

学習開始からの期間 :58日
今日までの合計時間:591h
今日までに到達すべき目標時間:530h
目標との解離:61h
「10,000時間」まで、

残り・・・「9409時間!」