JavaScriptの正規表現って何？例をもとにわかりやすく解説

JavaScriptを学び始めたばかりで、「正規表現」という言葉を耳にしたことがあるかもしれません。正規表現は、文字列の中から特定のパターンを見つけ出したり、文字列を操作したりするための便利な方法です。最初は難しく感じるかもしれませんが、使い方を覚えると、大変役立ちます。

今回は、プログラミング初心者でもわかりやすく、JavaScriptでの正規表現の基本から実際の使い方まで丁寧に解説します。

JavaScriptの「正規表現」とは？

JavaScriptの正規表現とは、文字列内の特定のパターン（文字の並び方や規則）を検索、抽出、操作するための方法です。簡単に言うと、正規表現を使うことで、複雑な条件で文字列を扱うことができます。例えば、特定の単語や数字のパターンを見つけたり、特定のフォーマットに従った文字列を抽出したりすることが可能です。

正規表現は、スラッシュ（/）で囲まれた形式で書かれ、その中で特殊な記号や文字を使うことで、パターンを定義します。例えば、「abc」という文字列に正規表現で一致させる場合は、単純に「/abc/」と書きますが、これを少し応用して「任意の数字」や「特定の範囲の文字」なども表現できます。

初めは複雑に見えるかもしれませんが、基本的な概念を理解すれば、多くの場面で役立つ便利な技術です。

JavaScriptの正規表現を使うシーン

JavaScriptにおける正規表現は、主に文字列の操作、つまり特定のパターンに一致する文字列の抽出や変換、あるいは不要な部分の削除などで活躍します。

例えば、ユーザーからの入力内容が正しい形式かどうかを確認する場合、正規表現を利用することで迅速に検証が行えます。

例えば、下記のようなシーンが考えられます。

・フォームに入力された電話番号の検証

フォームにユーザーが入力した電話番号が、指定されたフォーマットに従っているかを確認したい場合に正規表現を使います。例えば、10桁の数字でなければエラーを表示する、といった処理が簡単にできます。

・メールアドレスのドメイン部分の抽出

大量のメールアドレスが含まれるリストから「@」以降のドメイン部分だけを抽出したい場合、正規表現を使うことで、ドメイン部分を取り出すことができます。このように、パターンに基づいた文字列の抽出が簡単に実現できます。

これらの例からわかるように、正規表現はJavaScriptにおける文字列操作で非常に便利です。特に、パターンマッチングや文字列の検証を簡潔に行いたい場合には不可欠な方法となります。

JavaScriptの正規表現に使用される記号の例

正規表現は、特定のパターンを表現するためにいくつかの記号（メタ文字）を使用します。これらの記号を使うことで、文字列の検索や置換がより柔軟に行うことが可能です。

ここでは、正規表現でよく使われる記号をいくつか紹介し、それぞれの使い方を解説します。

^（ハット）｜文字列の先頭

「^」（ハット記号）は、文字列の先頭を示すために使用されます。例えば、“^おはよう” という正規表現を書くと「おはよう」や「おはようございます」という文字列がマッチします。つまり、行頭が「おはよう」である場合のみマッチし、それ以外の文字列には一致しません。

$（ドル）｜文字列の末尾

「$」（ドル記号）は、文字列の末尾を表すために使います。例えば、“またね$” という正規表現を書くと、「またね」や「じゃまたね」にマッチします。「$」を使えば、特定のパターンが文字列の最後に来る場合に、その文字列を効率的に検出することが可能です。

|（パイプ）｜いずれかの文字列

「|」（パイプ）は、複数の文字列のいずれかにマッチするために使用されます。例えば、“松|竹|梅” という正規表現は、「松」「竹」「梅」のいずれかの文字列にマッチします。

記述する際は、スペースを含めないようにすることが大切です。スペースを入れると、そのスペースも1文字として認識されるため、意図しない結果になる可能性があります。

()（かっこ）｜グループ化

「()」は、正規表現で複数の選択肢をグループ化するために使われます。例えば、“(鳥|犬|猫)が鳴いています”という正規表現は、「鳥が鳴いています」「犬が鳴いています」「猫が鳴いています」のいずれかのパターンにマッチします。このようにグループ化することで、特定の範囲内でのパターンマッチングが可能です。

.（ピリオド）｜改行以外の任意の1文字

「.」（ピリオド）は、改行以外の任意の1文字にマッチします。例えば、“夏は..い” という正規表現では、「夏は楽しい」や「夏はあつい」など、文字数が2つであれば何にでもマッチしますが、「夏は熱い」などではマッチしません。このように、「.」は任意の1文字を表す便利な記号です。

*（アスタリスク）｜直前の文字が0個以上ある

「*」（アスタリスク）は、その直前の文字が0個以上あることを示します。例えば、“ドドー*ン” という正規表現では、「ドドン」「ドドーン」「ドドーーーン」のすべてにマッチします。

また、「.*」のように「.」と組み合わせて使うと、任意の文字列がいくつあってもマッチするパターンになります。例えば、“.*日本一.*” という正規表現は、「日本一」という言葉を含むすべての文字列にマッチします。

+（プラス）｜直前の文字が1個以上ある

「+」（プラス記号）は、直前にある文字が1個以上存在する場合にマッチします。例えば、“ドドー+ン” という正規表現は、「ドドーン」や「ドドーーーン」にマッチしますが、「ドドン」にはマッチしません。これは、少なくとも1つ以上の「ー」が存在することを求める場合に使われます。

?（クエスチョン）｜直前の文字が1個ある、またはない

「?」（クエスチョンマーク）は、直前の文字が1個あるか、またはない場合にマッチします。例えば、“ドドー?ン” という正規表現では、「ドドン」でも「ドドーン」でもマッチしますが、「ドドーーーン」にはマッチしません。1つか0個の文字に対応したパターンを表現するのに便利です。

JavaScriptの正規表現で使用するメソッドについて

ここでは、JavaScriptで正規表現を利用する際に使われるメソッドについて解説します。

メソッドとは

JavaScriptにおける「メソッド」とは、オブジェクトが持つ関数（※1）のことを指します。オブジェクトとは、データと、そのデータを操作する機能をまとめたものです。メソッドを使うことで、オブジェクトに対して特定の処理を行うことができます。

簡単に言うと、コンピューターに対して何かを実行するように指示を出すための「機能」と考えてもらえれば良いでしょう。

※1：特定の処理をまとめたプログラムの部品のこと。必要なときに呼び出して使用することが可能

よく使用される代表的なメソッド

下記はよく使用されるメソッドです。

メソッド	指示内容
alert()	メッセージをポップアップで画面に表示できる
click()	ボタンをクリックすると指定した処理を実行する
prompt()	情報入力のための入力画面を表示する
confirm()	内容の正誤を確認するボタンを表示する
match()	文字列に含まれている特定の文字を検索する
search()	指定の正規表現にマッチした文字列の位置を取得する
test()	指定した文字列に対し「true」もしくは「false」を返す
includes()	与えられた値が配列に含まれているかを調べ「true」もしくは「false」を返す
concat()	複数の配列を結合する配列(Array)メソッドのひとつ

メソッドには、大きく分けてインスタンスメソッドと静的メソッドの2つの種類があります。インスタンスメソッドとは、クラスのオブジェクトに対して実行されるメソッドのことです。主に“static()”メソッドを指します。クラスとはオブジェクトを作るための設計図です。設計図の中にプロパティや機能（メソッド）を記述します。

静的メソッドとは、クラスそのものに属するメソッドのことで、オブジェクトを作成せずに呼び出すことができます。

よく使われる配列メソッドは、まとまったデータ（オブジェクト）に対して操作を行うためのインスタンスメソッドになります。“splice()”“map()”など配列の追加や削除を行うメソッドがたくさん存在します。

JavaScriptの独学が難しいと思ったら

JavaScriptを独学で学び始めて、途中で挫折しそうになることはよくあります。特に、正規表現のような少し難しい概念に直面すると、理解に時間がかかり、やる気を失うこともあるでしょう。そんなときは、プログラミングスクールの活用も視野に入れてみましょう。

JavaScriptを効率良く習得するなら、オンラインプログラミングスクールの「NINJACODE」をご検討ください。

「NINJACODE」ではWeb制作の基礎が学べる「Web制作スクール」をご用意しております。
JavaScriptをはじめ、HTML/CSSの使ったコーディングやWeb制作の応用課題まで、実践的なカリキュラムが組まれているため、未経験でもプロのスキルを身に付けることが可能です。

また、現役クリエイターに質問ができるチャットサポートがついていることから、疑問点が生じた場合でもすぐに解消できます。基本的に動画コンテンツを通して学習できるので、自分のペースで勉強ができる点も魅力です。

詳しい学習内容やプランについて知りたい方は、下記よりチェックしてみてください。

まとめ

JavaScriptの正規表現は、文字列の検索や置換など、特定のパターンを簡潔に処理するための便利な方法です。正規表現を学ぶことで、複雑な文字列操作が容易になり、プログラミングの幅が広がります。ぜひ正規表現の使い方を学び、プログラミングスキルを向上させましょう。