WEBVTT

1
00:00:00.000 --> 00:00:00.892
こんにちは。

2
00:00:00.892 --> 00:00:06.840
今回はジャバスクリプトのレグイーエックスピー・プロトタイプ・テストを紹介します。

3
00:00:06.840 --> 00:00:13.084
これは正規表現に一致する部分があるかどうかを、トゥルーかフォルスで返すメソッドです。

4
00:00:13.084 --> 00:00:19.032
たとえば、入力されたコードが半角数字三桁かどうかを調べたい場面を考えてください。

5
00:00:19.032 --> 00:00:24.087
文字を一文字ずつ自分で確認すると、処理が長く、分かりにくくなります。

6
00:00:24.087 --> 00:00:30.183
このメソッドなら、パターンを一つ用意して、テストに文字列を渡すだけで判定できます。

7
00:00:30.183 --> 00:00:34.124
この動画では、引数と戻り値、基本例、実用例、そして繰り返し使うときの注意点まで、

8
00:00:34.124 --> 00:00:38.064
実行結果と一緒に学びます。

9
00:00:38.064 --> 00:00:45.052
フォームの入力チェックや、ログの中から特定の言葉を探す場面でも、同じ考え方がそのまま使えます。

10
00:00:45.052 --> 00:00:47.034
まず動作環境を確認します。

11
00:00:47.034 --> 00:00:52.066
このメソッドはとても古くからある機能で、クロームとファイアーフォックス、

12
00:00:52.066 --> 00:00:57.099
サファリではバージョン一以降、エッジでは十二以降で使えます。

13
00:00:57.099 --> 00:01:01.978
ノード・ジェイエスでも、ゼロ・一ゼロ・ゼロ以降で対応しています。

14
00:01:01.978 --> 00:01:10.365
記事の互換性情報は、エムディーエヌのデータに基づく目安で、すべての環境で実機検証したという意味ではありません。

15
00:01:10.365 --> 00:01:17.684
追加のパッケージやインポートは必要なく、正規表現リテラルを作れば、そのままテストを呼び出せます。

16
00:01:17.684 --> 00:01:21.878
ブラウザーでは開発者ツールのコンソール、ノードではファイルに保存して実行する、

17
00:01:21.878 --> 00:01:26.071
どちらでも同じコードで試せます。

18
00:01:26.071 --> 00:01:33.848
長く使われている分、解説や実例も豊富で、初めて正規表現を学ぶときの入口としても扱いやすいメソッドです。

19
00:01:33.848 --> 00:01:35.730
引数と戻り値を確認します。

20
00:01:35.730 --> 00:01:41.376
書き方は、正規表現、ドット、テスト、カッコの中に調べたい文字列、という形です。

21
00:01:41.376 --> 00:01:47.022
リファレンス名にあるプロトタイプを、実際の呼び出しで毎回書く必要はありません。

22
00:01:47.022 --> 00:01:49.918
引数は一つだけで、対象にする文字列です。

23
00:01:49.918 --> 00:01:57.591
戻り値は真偽値で、文字列の中にパターンに一致する部分があればトゥルー、まったくなければフォルスを返します。

24
00:01:57.591 --> 00:02:02.007
たとえば、数字が含まれるかを調べるパターンでは、エービーシー一二三はトゥルー、

25
00:02:02.007 --> 00:02:06.422
数字のないエービーシーはフォルスになります。

26
00:02:06.422 --> 00:02:10.476
元の文字列は変更されず、例外で止まる判定でもありません。

27
00:02:10.476 --> 00:02:13.204
ここが最初の大切なポイントです。

28
00:02:13.204 --> 00:02:18.149
テストは、文字列のどこかに一致する部分があるかを調べます。

29
00:02:18.149 --> 00:02:27.357
アンカーがないパターンでは、前後に別の文字があっても、途中に数字三桁が含まれればトゥルーになってしまいます。

30
00:02:27.357 --> 00:02:35.371
入力の形式全体を検証したい場合は、先頭を表すハットと、末尾を表すドル記号でパターンを挟みます。

31
00:02:35.371 --> 00:02:41.339
こうすると、文字列全体がちょうどその形式のときだけトゥルーになります。

32
00:02:41.339 --> 00:02:48.330
記事の基本例でも、このアンカーの組み合わせを使い、一部分だけの一致を防いでいます。

33
00:02:48.330 --> 00:02:53.104
検索なのか検証なのか、目的に合わせて使い分けてください。

34
00:02:53.104 --> 00:02:54.900
記事の基本例を見ます。

35
00:02:54.900 --> 00:03:03.715
パターンは、先頭のアンカー、半角数字を表すカッコ、繰り返し三回、そして末尾のアンカーを組み合わせたものです。

36
00:03:03.715 --> 00:03:08.449
つまり、半角数字がちょうど三桁だけ、という形式を表します。

37
00:03:08.449 --> 00:03:14.489
このパターンに一二三を渡し、続けて一二三四を渡して、結果を二行表示します。

38
00:03:14.489 --> 00:03:18.244
ファイルに保存してノードで実行しても、ブラウザーのコンソールに貼っても、

39
00:03:18.244 --> 00:03:21.998
同じ結果になります。

40
00:03:21.998 --> 00:03:28.365
再読み込みせずに繰り返し貼り付けると、変数の再宣言エラーが出ることがあります。

41
00:03:28.365 --> 00:03:34.405
その場合はページを再読み込みするか、コード全体をブロックで囲んでください。

42
00:03:34.405 --> 00:03:42.404
実行する前に、それぞれの結果がどうなるかを声に出して予測してから、実際の出力と比べてみてください。

43
00:03:42.404 --> 00:03:44.059
期待出力を読みます。

44
00:03:44.059 --> 00:03:49.519
一二三は形式に合うのでトゥルー、一二三四は四桁なのでフォルスです。

45
00:03:49.519 --> 00:03:52.167
ここで境界のケースも確かめます。

46
00:03:52.167 --> 00:03:56.387
二桁の一二は桁が足りずフォルス、数字の後にエーが付いた一二エーもフォルス、

47
00:03:56.387 --> 00:04:00.606
空文字もフォルスになります。

48
00:04:00.606 --> 00:04:04.743
実機でも、記事と同じ結果になることを確認済みです。

49
00:04:04.743 --> 00:04:09.955
数字三桁を数値として渡した場合は、文字列に変換されて判定され、トゥルーになりますが、

50
00:04:09.955 --> 00:04:15.168
入力の型まで保証されるわけではありません。

51
00:04:15.168 --> 00:04:22.449
練習では、入力を一か所だけ変え、実行前に結果を予測してから確かめると、理解が深まります。

52
00:04:22.449 --> 00:04:30.888
四桁が不合格になるのは、繰り返しの回数だけでなく、末尾のアンカーが余分な桁を許さないためでもあります。

53
00:04:30.888 --> 00:04:36.778
実用例として、半角数字三桁のコードを受け付ける検証関数を作ります。

54
00:04:36.778 --> 00:04:38.741
処理の順番が大切です。

55
00:04:38.741 --> 00:04:46.416
まず、タイプオブで文字列かどうかを確認し、文字列でなければ専用のメッセージを返します。

56
00:04:46.416 --> 00:04:51.057
次に、前後の空白を取り除き、空欄なら入力を促します。

57
00:04:51.057 --> 00:04:58.553
最後に、テストで形式を確認し、合わなければ桁数と文字種を伝えるメッセージを返します。

58
00:04:58.553 --> 00:05:03.551
すべての条件を通れば、オーケーと一緒に入力値を返します。

59
00:05:03.551 --> 00:05:07.835
テスト単体では、なぜ不合格なのかは分かりません。

60
00:05:07.835 --> 00:05:14.260
前段のチェックと組み合わせることで、利用者に理由が伝わる検証になります。

61
00:05:14.260 --> 00:05:16.783
実用例の実行結果を確認します。

62
00:05:16.783 --> 00:05:19.642
正しい一二三はオーケーになります。

63
00:05:19.642 --> 00:05:25.528
前後に空白がある入力も、空白を取り除いてから判定するのでオーケーです。

64
00:05:25.528 --> 00:05:32.087
一方、四桁の一二三四や、文字が混ざった入力は、形式の段階でエヌジーになります。

65
00:05:32.087 --> 00:05:39.823
空欄は入力を求めるメッセージ、ヌルは文字列を求めるメッセージと、原因ごとに結果が分かれます。

66
00:05:39.823 --> 00:05:42.346
この出力も実機で確認済みです。

67
00:05:42.346 --> 00:05:47.139
ポイントは、テストの結果をそのまま見せるのではなく、トゥルーかフォルスかを、

68
00:05:47.139 --> 00:05:51.932
利用者に分かる言葉へ変換することです。

69
00:05:51.932 --> 00:05:54.622
それが実用コードでの使い方です。

70
00:05:54.622 --> 00:06:03.704
このように結果を言葉で返すと、テストの利用者だけでなく、後からコードを読む人にも意図が伝わりやすくなります。

71
00:06:03.704 --> 00:06:06.115
最も間違えやすい注意点です。

72
00:06:06.115 --> 00:06:13.176
ジーやワイのフラグを付けた正規表現は、ラストインデックスという検索位置を覚えます。

73
00:06:13.176 --> 00:06:19.032
一回目のテストが一致すると、検索位置が一致した場所の後ろへ進みます。

74
00:06:19.032 --> 00:06:27.643
そのため、まったく同じ文字列でも、二回目のテストは途中から探し始めて、フォルスになってしまうのです。

75
00:06:27.643 --> 00:06:35.910
記事の境界条件の例でも、エーという同じ入力で、トゥルーの次にフォルスが返ることが示されています。

76
00:06:35.910 --> 00:06:38.838
入力検証では通常ジーを付けません。

77
00:06:38.838 --> 00:06:46.932
必要な場合は、呼び出しごとに新しい正規表現を作るか、ラストインデックスをゼロに戻してください。

78
00:06:46.932 --> 00:06:49.875
テストで分かることの範囲も押さえます。

79
00:06:49.875 --> 00:06:56.381
戻り値は真偽値だけなので、どこで一致したのか、どの部分が一致したのかは分かりません。

80
00:06:56.381 --> 00:07:02.267
位置や中身が必要なら、イグゼックやマッチなど、別のメソッドを選んでください。

81
00:07:02.267 --> 00:07:10.167
また、引数は文字列として扱われるため、数値を渡してもエラーにはならず、変換された文字列で判定されます。

82
00:07:10.167 --> 00:07:15.278
先ほどの検証関数のように、型の確認を先に行う理由はここにあります。

83
00:07:15.278 --> 00:07:18.067
そして、テストは部分一致が基本です。

84
00:07:18.067 --> 00:07:25.192
全体の形式を見たいときはアンカーを付ける、という第四章の原則を、実務でも忘れないでください。

85
00:07:25.192 --> 00:07:26.006
まとめです。

86
00:07:26.006 --> 00:07:29.940
レグイーエックスピー・プロトタイプ・テストは、正規表現に一致する部分があるかを真偽値で返す、

87
00:07:29.940 --> 00:07:33.874
シンプルなメソッドです。

88
00:07:33.874 --> 00:07:35.502
導入時の判断は三つです。

89
00:07:35.502 --> 00:07:42.555
まず、文字列の中から探すのか、入力全体の形式を検証するのかを決め、検証ならアンカーで全体を固定すること。

90
00:07:42.555 --> 00:07:47.168
次に、入力検証ではジーフラグを付けず、状態が残らないようにすること。

91
00:07:47.168 --> 00:07:52.458
そして、型と空欄を確認したあと、最後の形式チェックとしてテストを使うことです。

92
00:07:52.458 --> 00:07:58.427
郵便番号や商品コード、入力フォームの事前チェックなど、身近な検証から試してみてください。

93
00:07:58.427 --> 00:08:06.023
まずは基本例の数字を変えるところから始め、慣れてきたら自分の入力項目に合わせたパターンへ書き換えてみてください。

94
00:08:06.023 --> 00:08:07.244
お疲れさまでした。