Webディレクターも覚えておきたい!「正規表現」を紹介します

Webディレクターも覚えておきたい!「正規表現」を紹介します

ともぞう

ともぞう

こんにちは、Webディレクターのともぞうです。

突然ですが、今回の記事は正規表現についてお話ししたいと思います。

正規表現とは

もしかしたら「正規表現ってなに?」という方もいらっしゃるかもしれません。まずは辞書的な意味からご紹介しましょう。

正規表現
 
文字のパターンを表現する方法のひとつ。特定の文字(メタキャラクター)を使って、汎用的に文字列のパターンを表現し、文字列の置換、検索などに使用する。たとえば、「.」は任意の文字を表し、「*」は前の文字の繰り返し、「^」は行頭、「:」は行末を示す、などさまざまな表現方法がある。これらを使うことで、「数字ではじまり、ひらがなを含む行」や「行末が(。)で終わらない行」といった複雑な文字列のパターンを表現できる。文字検索の「grep」や置換の「sed」、高度なテキスト処理が可能な「AWK」や「Perl」など、正規表現はUNIX関連のテキスト処理コマンドやツールで広く利用されている。
 
出典:コトバンク(ASCII.jpデジタル用語辞典)

みんなお世話になっているWikipediaも補足的に引用しておきます。

正規表現とは、文字列の集合を一つの文字列で表現する方法の一つである。正則表現(せいそくひょうげん)とも呼ばれ、形式言語理論の分野では比較的こちらの訳語の方が使われる。まれに正規式と呼ばれることもある。
もともと正規表現は形式言語理論において正規言語を表すための手段として導入された。形式言語理論では、形式言語が正規言語であることと正規表現によって表せることは同値である。
その後正規表現はテキストエディタ、ワードプロセッサなどのアプリケーションで(ないし、そもそもそれ以前に単機能の文字列探索ツールの)、マッチさせるべき対象を表すために使用されるようになり、表せるパターンの種類を増やすために本来の正規表現にはないさまざまな記法が新たに付け加えられた。このような拡張された正規表現には正規言語ではない文字列も表せるものも多く、ゆえに正規表現という名前は実態に即していない面もあるが、伝統的に正規表現と呼ばれ続けている。
 
出典:フリー百科事典『ウィキペディア(Wikipedia)』

いかがでしょうか? 要は、パターンマッチングとして用いられるものです。たとえば、ある文字列の中から半角英数字のみをマッチさせる表現のことを正規表現と呼びます。

正規表現はだいたいのエディタ・プログラミング言語に備わっているもの。ディレクター職だとあまり使わないと思われがちですが、文字の一括置換をおこないたいとき、正規表現を使えると特定の文字のみ狙いすまして置換ができるようになります。

その他にもGoogleアナリティクスでのフィルタリングや、エディタ内の文章を検索するときに使えるので、覚えておいて損はありません!

正規表現の一部を紹介します

数字のマッチング

\d

半角数字を表現する記述です。

このように、特殊意味で用いる文字をメタ文字と呼びます。以降メタ文字のオンパレードです。

文字の繰り返し

{}

半角数字が3文字つづくものを表現したい場合は、

\d{3}

と表現します。

特定の文字のマッチング

[]

ブラケットで囲んだ特定の文字いずれかを表現します。

[abc]

上記はa、b、cのいずれか一文字を意味します。

この表現では範囲を指定することもできます。aからzまでのいずれかの文字を表現するには、

[a-z]

と記述します。また、

-

をいれることで範囲を表現します。半角英数字は、

[a-zA-z0-9]

先程のaまたはbまたはcは

[a-c]

と表現することができます。

除外

^

特定の文字を検索対象から除外したい場合はハット記号を使って表現します。

[^abc]

はaとbとcを除いた文字を表現します。

たとえばLIGブログのように記事詳細ページのURLが https://example.com/123 と英数字になっている場合、

https://example.com/[^0-9]*

こちらで記事詳細ページを除外したURL一覧を取得することができます。

はじまり

^

数字で始まる文字列などを表現するときに使用します。

^[0-9]

特定の文字のマッチングの除外とおなじくハット記号を用いますが、意味がかわるので注意が必要です。

おわり

$

前述の

^

とは逆で、数字で終わる文字列などを表現するときに使用します。

[0-9]$

拡張子を指定して検索したいときに便利だと思います。

.jpg$

は拡張子が.jpgのものをマッチさせることができます。

この「はじまり」と「おわり」はVimのキーバインドでもあります。Vimを覚えると関連するショートカットなどが多く汎用的ですね。

さいごに

ほんの少しだけですが、正規表現を紹介しました。

私もまだまだ触り始めたばかりで、だいたいの正規表現が呪文に見えます。でも、その呪文によって期待通りの検索結果が得られるとちょっとテンションあがります。

ちなみに、HTML5のinput要素でtype属性をemailにすると、メールアドレスの形式のみを受け付けるバリデーションがおこなわれます。ドキュメントを確認すると、そのバリデーションは以下の正規表現で実現しているようです。

^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$

いきなりこれを見ても「なるほどわからん。」という感じですよね。

今回紹介した正規表現をおさらいしてみると、少しだけ読み解くことができると思います。

地道に記号の意味を覚えながら、一緒に精進していきましょう! ともぞうでした。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

ディレクターのともぞうです。 趣味はサバゲー、ツーリングです!! 月一くらいで出撃しています┌◯

このメンバーの記事をもっと読む
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL