業務で役立つ!jQueryで覚えておくべき正規表現とは【初心者向け】

プログラミング初心者向けに、jQueryで覚えておくべき正規表現とは何か解説しています。正規表現は、一人でプログラミングをしていく中では重要な知識ではありませんが、実際の現場では役立つ知識なので、今のうちにいくつか知っておくと良いでしょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptのライブラリであるjQueryでの正規表現について説明します。

jQueryに限らずプログラミングには正規表現というものが存在します。細かい知識ではあるので、まず最初に覚えておくべきものではありませんが、知っておくと良いでしょう。

jQueryについてそもそもよく分からないという方は、jQueryとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

目次

 

正規表現とは

文字入力欄を設けるときに、それがメールアドレスなのか。また、使える文字なのか。などいろいろ問題があります。

正規表現はjQueryだけでなく、ほかの言語やエディターでも用います。

有名なエディターだと「Vim」では正規表現が使えるとコーディングスピードが上昇します。

また、サーバーサイドのインフラエンジニアにもよく使われている正規表現です。

 

大石ゆかり

田島メンター!正規表現というのは何でしょうか?

田島悠介

数値や記号を含めた、文字全般を別の形で表したものなんだ。

大石ゆかり

別の形で表すってことは、何か理由があるんですよね?

田島悠介

そうそう。例えば、1文字以上、文字が続いて@(アットマーク)があって、その後に文字が1文字以上続く場合などを表現できるんだ。メールアドレスの表現になるよね。さっそく正規表現を見てみよう!

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

主な正規表現

主な正規表現には次のものがあります。

  • [A-Z] ・・・ アルファベット小文字
  • [a-z] ・・・ アルファベット大文字
  • [A-Za-z] ・・・ アルファベットすべて
  • [0-9] ・・・ 数字
  • [A-Za-z0-9] ・・・ 数字とアルファベット

また、何文字という表記も出来ます。

{5}

これだと5文字です。

 

マッチ回数のパターンがあります。

  • 「*」 ・・・ 0回以上マッチ
  • 「+」 ・・・ 1回以上マッチ
  • 「?」 ・・・ 0、1回以上マッチ
  • 「{m}」 ・・・ m回以上マッチ

例えば、「(/img[0-9]{4})」とあれば、ファイル名がimgの後ろに0-9の数字が4つあるものが該当することになります。

上記のようなものが正規表現と呼ばれるものです。

実際難しいですが、これをマスターすることで、できることは大きく広がります。

 

まだ必要のないと思っている方も、この先プログラミングをしていけば必ずぶつかる壁になるかと思います。

Webには多くの例文から、書き方まで存在しているので、必要になったときに勉強していきましょう。

 

大石ゆかり

正規表現は難しそうですねー。

田島悠介

確かに。ただ、他のプログラミング言語でも正規表現はあるので、ある程度覚えておきたいね。

大石ゆかり

主にどんなところで使われているんですか?

田島悠介

例えば、メールアドレスの形式になっているかどうかだったり、取得したWebページのソースコードの一部を切り分けるなどかな。

 

[お知らせ]TechAcademyでは最短4週間でフロントエンドの技術が身につくフロントエンドオンラインブートキャンプを開催しています。JavaScriptを使ってリッチなWebサービスを作りたい方はぜひご覧ください。