JavaScriptでtestメソッドを使って指定した文字列が正規表現とマッチするか調べる方法を現役エンジニアが解説【初心者向け】

JavaScriptでtestメソッドを使って指定した文字列が正規表現とマッチするか調べる方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

正規表現は、ある文字列が決まったパターンで入力されているかどうかを確認するときに役に立ちます。

例えば、郵便番号といった決まったパターンで入力されることが分かっている値に対して、正しく入力がされているかどうか正規表現を使って確認できます。

目次

• 正規表現とは
• 正規表現の記号
• testメソッドとは
• testメソッドの使い方
• testメソッドを利用して文字列チェックしてみよう
• まとめ
• JavaScriptを学習中の方へ

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

 

正規表現とは

正規表現は文字列のパターンがあるパターンと比較して、一致するかどうかを確認するために使用するものです。

記号を使用してパターンを表現し、入力された値がそのパターンと一致するかどうかを確認できます。

例えば郵便番号は「数値3桁-(ハイフン)数値4桁」という決まったパターンです。

郵便番号が入力されたときに前述のパターンで入力されているかどうかをチェックするために正規表現を利用できます。

「数値3桁-(ハイフン)数値4桁」というパターンは正規表現で表すと

\d{3}-\d{4}

このようになります。

\dは数値を表しています。

{3}は直前に指定された文字列が3桁であることを表しています。

{3}の直前の文字は\dですので、\d{3}は3桁の数値であることを表しています。

-(ハイフン)はそのままの意味でハイフンであることを表しています。

\d{4}は\d{3}と同じ考え方になりますので、4桁の数値であることを表しています。

 

正規表現の記号

一般的によく使用される正規表現の記号を紹介します。

記号	説明
.	任意の1文字
*	直前の文字が0回以上繰り返されることを表す
+	直前の文字が1回以上繰り返されることを表す
?	直前の文字が0回または1回繰り返されることを表す
{}	直前の文字の桁数を表す(指定の桁またはn桁以上m桁以下という指定ができる)
[]	[]で囲まれた文字のいずれかであることを表す
\s	空白文字
\d	数値
\w	大文字小文字の英数字と_(アンダーバー)
\n	改行文字
^	行の先頭
$	行末

他にもたくさんあるので、興味があれば調べてみてください。

 

[PR] フロントエンドで副業する学習方法を動画で公開中

testメソッドとは

testメソッドは正規表現で指定したパターンと引数の文字列のパターンが一致するかどうかをチェックできます。

先ほどの郵便番号のお話をしましたが、JavaScriptのtestメソッドを使用して、チェックすると以下のようになります。

const postCodePattern = /\d{3}-\d{4}/;
console.log(postCodePattern.test("104-0045"));

postCodePattern変数に郵便番号のパターンを正規表現で代入し、testメソッドで引数の”104-0045″が郵便番号のパターンになっているかどうかをチェックしています。

この例では、正しい郵便番号のパターンですので、コンソールにはtrueと表示されます。

 

testメソッドの使い方

変数に正規表現を代入します。

正規表現は/(スラッシュ)で囲うようにしてください。

const postCodePattern = /\d{3}-\d{4}/;

次にtestメソッドを呼び出します。

console.log(postCodePattern.test("104-0045"));

testメソッドの戻り値はパターンが一致すればtrue、一致しなければfalseとなります。

 

testメソッドを利用して文字列チェックしてみよう

前述の例はtestメソッドの引数の文字列に郵便番号が含まれていれば、trueを返します。

そのため、以下の状態でもtrueになります。

const postCodePattern = /\d{3}-\d{4}/;
console.log(postCodePattern.test("〒104-0045 東京都中央区日本橋..."));

これを引数の文字列のパターンと完全一致した場合のみtrueとする場合は、以下のようにします。

const postCodePattern = /^\d{3}-\d{4}$/;
console.log(postCodePattern.test("〒104-0045 東京都中央区日本橋..."));

^は先頭であることを表し、$は末尾であることを表します。

そのため、「\d{3}-\d{4}」のパターン以外に余計な文字列が入っている場合はfalseになります。

以下のようにするとtrueになります。

const postCodePattern = /^\d{3}-\d{4}$/;
console.log(postCodePattern.test("104-0045"));

 

次にJavaから始まる文字列をチェックしてみましょう。

const javaPattern = /^Java.*$/;
console.log(javaPattern.test("Java"));
console.log(javaPattern.test("JavaScript"));
console.log(javaPattern.test("Ruby"));

Javaはそのままの意味でJavaという文字列を表します。

.(ドット)は任意の一文字を、*(アスタリスク)は直前の文字の0回以上の繰り返しですので、任意の文字が0回以上繰り返されることを表します。

そのため、Javaのみの文字列またはJavaから始まる文字列のパターンと一致した場合は、trueを返します。

 

次に3の倍数で始まる数値をチェックしてみましょう。

const multipleThreePattern = /^[369]\d*$/;
console.log(multipleThreePattern.test("333"));
console.log(multipleThreePattern.test("123"));
console.log(multipleThreePattern.test("67890"));

[369]は3または6または9であることを表します。

\d*は数値を0回以上繰り返すことを表しています。

そのため、3の倍数で始まる数値の場合は、trueを返します。

 

このように正規表現を使用すれば、様々なパターンの文字列のチェックを行うことができます。

 

まとめ

本記事では、testメソッドによる文字列チェックについて解説しました。

• 正規表現とは
• 正規表現の記号
• testメソッドとは
• testメソッドの使い方
• testメソッドによる文字列チェック方法

testメソッドを活用することで、指定文字列のチェックを実現できます。

ぜひ使いこなせるように覚えておきましょう。

 

JavaScriptを学習中の方へ

これで解説は終了です、お疲れさまでした。

• つまずかず「効率的に」学びたい
• 副業や転職後の「現場で使える」知識やスキルを身につけたい

プログラミングを学習していて、このように思ったことはありませんか？

テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！