VIDEO LESSON

JavaScriptのRegExp.prototype.test()の使い方：引数・戻り値・実例と注意点の解説動画

再生時間 8:07動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00今回はジャバスクリプトのレグイーエックスピー・プロトタイプ・テストを紹介します。
0:06これは正規表現に一致する部分があるかどうかを、トゥルーかフォルスで返すメソッドです。
0:13たとえば、入力されたコードが半角数字三桁かどうかを調べたい場面を考えてください。
0:19文字を一文字ずつ自分で確認すると、処理が長く、分かりにくくなります。
0:24このメソッドなら、パターンを一つ用意して、テストに文字列を渡すだけで判定できます。
0:30この動画では、引数と戻り値、基本例、実用例、そして繰り返し使うときの注意点まで、
0:34実行結果と一緒に学びます。
0:38フォームの入力チェックや、ログの中から特定の言葉を探す場面でも、同じ考え方がそのまま使えます。
0:45まず動作環境を確認します。
0:47このメソッドはとても古くからある機能で、クロームとファイアーフォックス、
0:52サファリではバージョン一以降、エッジでは十二以降で使えます。
0:57ノード・ジェイエスでも、ゼロ・一ゼロ・ゼロ以降で対応しています。
1:01記事の互換性情報は、エムディーエヌのデータに基づく目安で、すべての環境で実機検証したという意味ではありません。
1:10追加のパッケージやインポートは必要なく、正規表現リテラルを作れば、そのままテストを呼び出せます。
1:17ブラウザーでは開発者ツールのコンソール、ノードではファイルに保存して実行する、
1:21どちらでも同じコードで試せます。
1:26長く使われている分、解説や実例も豊富で、初めて正規表現を学ぶときの入口としても扱いやすいメソッドです。
1:33引数と戻り値を確認します。
1:35書き方は、正規表現、ドット、テスト、カッコの中に調べたい文字列、という形です。
1:41リファレンス名にあるプロトタイプを、実際の呼び出しで毎回書く必要はありません。
1:47引数は一つだけで、対象にする文字列です。
1:49戻り値は真偽値で、文字列の中にパターンに一致する部分があればトゥルー、まったくなければフォルスを返します。
1:57たとえば、数字が含まれるかを調べるパターンでは、エービーシー一二三はトゥルー、
2:02数字のないエービーシーはフォルスになります。
2:06元の文字列は変更されず、例外で止まる判定でもありません。
2:10ここが最初の大切なポイントです。
2:13テストは、文字列のどこかに一致する部分があるかを調べます。
2:18アンカーがないパターンでは、前後に別の文字があっても、途中に数字三桁が含まれればトゥルーになってしまいます。
2:27入力の形式全体を検証したい場合は、先頭を表すハットと、末尾を表すドル記号でパターンを挟みます。
2:35こうすると、文字列全体がちょうどその形式のときだけトゥルーになります。
2:41記事の基本例でも、このアンカーの組み合わせを使い、一部分だけの一致を防いでいます。
2:48検索なのか検証なのか、目的に合わせて使い分けてください。
2:53記事の基本例を見ます。
2:54パターンは、先頭のアンカー、半角数字を表すカッコ、繰り返し三回、そして末尾のアンカーを組み合わせたものです。
3:03つまり、半角数字がちょうど三桁だけ、という形式を表します。
3:08このパターンに一二三を渡し、続けて一二三四を渡して、結果を二行表示します。
3:14ファイルに保存してノードで実行しても、ブラウザーのコンソールに貼っても、
3:18同じ結果になります。
3:21再読み込みせずに繰り返し貼り付けると、変数の再宣言エラーが出ることがあります。
3:28その場合はページを再読み込みするか、コード全体をブロックで囲んでください。
3:34実行する前に、それぞれの結果がどうなるかを声に出して予測してから、実際の出力と比べてみてください。
3:42期待出力を読みます。
3:44一二三は形式に合うのでトゥルー、一二三四は四桁なのでフォルスです。
3:49ここで境界のケースも確かめます。
3:52二桁の一二は桁が足りずフォルス、数字の後にエーが付いた一二エーもフォルス、
3:56空文字もフォルスになります。
4:00実機でも、記事と同じ結果になることを確認済みです。
4:04数字三桁を数値として渡した場合は、文字列に変換されて判定され、トゥルーになりますが、
4:09入力の型まで保証されるわけではありません。
4:15練習では、入力を一か所だけ変え、実行前に結果を予測してから確かめると、理解が深まります。
4:22四桁が不合格になるのは、繰り返しの回数だけでなく、末尾のアンカーが余分な桁を許さないためでもあります。
4:30実用例として、半角数字三桁のコードを受け付ける検証関数を作ります。
4:36処理の順番が大切です。
4:38まず、タイプオブで文字列かどうかを確認し、文字列でなければ専用のメッセージを返します。
4:46次に、前後の空白を取り除き、空欄なら入力を促します。
4:51最後に、テストで形式を確認し、合わなければ桁数と文字種を伝えるメッセージを返します。
4:58すべての条件を通れば、オーケーと一緒に入力値を返します。
5:03テスト単体では、なぜ不合格なのかは分かりません。
5:07前段のチェックと組み合わせることで、利用者に理由が伝わる検証になります。
5:14実用例の実行結果を確認します。
5:16正しい一二三はオーケーになります。
5:19前後に空白がある入力も、空白を取り除いてから判定するのでオーケーです。
5:25一方、四桁の一二三四や、文字が混ざった入力は、形式の段階でエヌジーになります。
5:32空欄は入力を求めるメッセージ、ヌルは文字列を求めるメッセージと、原因ごとに結果が分かれます。
5:39この出力も実機で確認済みです。
5:42ポイントは、テストの結果をそのまま見せるのではなく、トゥルーかフォルスかを、
5:47利用者に分かる言葉へ変換することです。
5:51それが実用コードでの使い方です。
5:54このように結果を言葉で返すと、テストの利用者だけでなく、後からコードを読む人にも意図が伝わりやすくなります。
6:03最も間違えやすい注意点です。
6:06ジーやワイのフラグを付けた正規表現は、ラストインデックスという検索位置を覚えます。
6:13一回目のテストが一致すると、検索位置が一致した場所の後ろへ進みます。
6:19そのため、まったく同じ文字列でも、二回目のテストは途中から探し始めて、フォルスになってしまうのです。
6:27記事の境界条件の例でも、エーという同じ入力で、トゥルーの次にフォルスが返ることが示されています。
6:35入力検証では通常ジーを付けません。
6:38必要な場合は、呼び出しごとに新しい正規表現を作るか、ラストインデックスをゼロに戻してください。
6:46テストで分かることの範囲も押さえます。
6:49戻り値は真偽値だけなので、どこで一致したのか、どの部分が一致したのかは分かりません。
6:56位置や中身が必要なら、イグゼックやマッチなど、別のメソッドを選んでください。
7:02また、引数は文字列として扱われるため、数値を渡してもエラーにはならず、変換された文字列で判定されます。
7:10先ほどの検証関数のように、型の確認を先に行う理由はここにあります。
7:15そして、テストは部分一致が基本です。
7:18全体の形式を見たいときはアンカーを付ける、という第四章の原則を、実務でも忘れないでください。
7:25まとめです。
7:26レグイーエックスピー・プロトタイプ・テストは、正規表現に一致する部分があるかを真偽値で返す、
7:29シンプルなメソッドです。
7:33導入時の判断は三つです。
7:35まず、文字列の中から探すのか、入力全体の形式を検証するのかを決め、検証ならアンカーで全体を固定すること。
7:42次に、入力検証ではジーフラグを付けず、状態が残らないようにすること。
7:47そして、型と空欄を確認したあと、最後の形式チェックとしてテストを使うことです。
7:52郵便番号や商品コード、入力フォームの事前チェックなど、身近な検証から試してみてください。
7:58まずは基本例の数字を変えるところから始め、慣れてきたら自分の入力項目に合わせたパターンへ書き換えてみてください。
8:06お疲れさまでした。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

RegExp.prototype.test()で正規表現に一致する部分があるか判定する方法を解説。引数と戻り値、実行結果付きのコード、間違えやすい点、ブラウザー・Node.js対応を確認できます。

解説記事・サンプルコードを読む：JavaScriptのRegExp.prototype.test()の使い方：引数・戻り値・実例と注意点 →