WEBVTT

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

2
00:00:00.957 --> 00:00:06.219
今回はジャバスクリプトのユーアールエル・キャンパースを紹介します。

3
00:00:06.219 --> 00:00:13.554
文字列をユーアールエルとして解析できるかどうかを、トゥルーかフォルスで返す静的メソッドです。

4
00:00:13.554 --> 00:00:21.367
プロフィールのリンク欄などでは、入力文字列をユーアールエルとして扱えるかを調べたい場面があります。

5
00:00:21.367 --> 00:00:28.862
自分で正規表現を書こうとすると、相対パスやポート番号など、考える条件が一気に増えてしまいます。

6
00:00:28.862 --> 00:00:34.921
このメソッドなら、ユーアールエルオブジェクトを先に作らなくても判定できます。

7
00:00:34.921 --> 00:00:39.146
この動画では、引数と基準ユーアールエルの考え方、基本例と実用例、判定の限界まで、

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

9
00:00:43.372 --> 00:00:45.247
まず動作環境を確認します。

10
00:00:45.247 --> 00:00:52.461
ブラウザーでは、二千二十三年十二月以降、主要ブラウザーを横断して利用できる機能として扱われています。

11
00:00:52.461 --> 00:00:59.530
ノード・ジェイエスでも同じ機能が使え、追加されたバージョンは十九・九・ゼロと十八・十七・ゼロです。

12
00:00:59.530 --> 00:01:05.589
ただし、古いブラウザーや組み込みのウェブビューまで一律に対応しているとは限りません。

13
00:01:05.589 --> 00:01:14.100
そのため実行時には、タイプオブでユーアールエル・キャンパースが関数として存在するかを確認する書き方が紹介されています。

14
00:01:14.100 --> 00:01:20.159
追加のパッケージやインポートは不要で、グローバルのユーアールエルをそのまま使えます。

15
00:01:20.159 --> 00:01:24.920
この確認を入れておくと、未対応の環境でも安全に処理を分けられます。

16
00:01:24.920 --> 00:01:26.723
引数と戻り値を確認します。

17
00:01:26.723 --> 00:01:33.104
呼び出し方は二通りで、第一引数だけ渡す形と、第二引数に基準ユーアールエルを渡す形があります。

18
00:01:33.104 --> 00:01:39.208
第一引数は調べたいユーアールエル、第二引数は相対ユーアールエルを解決するための基準です。

19
00:01:39.208 --> 00:01:41.566
省略すると未定義として扱われます。

20
00:01:41.566 --> 00:01:46.144
戻り値は真偽値で、解析できればトゥルー、できなければフォルスです。

21
00:01:46.144 --> 00:01:52.664
たとえばエイチティーティーピーエスから始まる絶対ユーアールエルは単独で解析できますが、

22
00:01:52.664 --> 00:01:59.184
スラッシュ・ヘルプのような相対ユーアールエルは接続先の情報がないため、基準がないとフォルスになります。

23
00:01:59.184 --> 00:02:03.900
表示中のページが自動で基準になるわけではない点にも注意してください。

24
00:02:03.900 --> 00:02:06.880
文字列以外を渡した場合の動きも押さえます。

25
00:02:06.880 --> 00:02:10.712
このエーピーアイは、引数を文字列化してから判定します。

26
00:02:10.712 --> 00:02:14.827
数値やヌルも文字列化され、基準なしではフォルスになります。

27
00:02:14.827 --> 00:02:21.639
つまり、引数を受け取れたことと、その入力がアプリケーションにとって適切であることは一致しません。

28
00:02:21.639 --> 00:02:29.302
フォームやジェイソン由来の値を扱う関数では、先にタイプオブで文字列かどうかを確認すると意図が明確になります。

29
00:02:29.302 --> 00:02:35.971
また、文字列化に独自の処理を持つオブジェクトでは、その処理自体が例外を投げる可能性もあります。

30
00:02:35.971 --> 00:02:41.080
どんな値でも絶対に例外を投げないエーピーアイ、とは解釈しないでください。

31
00:02:41.080 --> 00:02:43.512
コピーして動かせる基本例を見ます。

32
00:02:43.512 --> 00:02:49.472
記事の例では、絶対ユーアールエル、基準なしの相対ユーアールエル、基準ありの相対ユーアールエル、

33
00:02:49.472 --> 00:02:55.433
ホスト名がないユーアールエル、空文字と基準ユーアールエルの組み合わせ、そしてメール用ユーアールエルの六件を配列に並べ、

34
00:02:55.433 --> 00:03:01.393
ループで一行ずつ判定結果を表示します。

35
00:03:01.393 --> 00:03:05.399
未対応の環境では判定に進まず、その旨を表示する作りです。

36
00:03:05.399 --> 00:03:09.762
ブラウザーではコンソールに貼るだけ、ノード・ジェイエスではファイルに保存して実行するだけで、

37
00:03:09.762 --> 00:03:14.125
どちらも同じコードで試せます。

38
00:03:14.125 --> 00:03:16.700
表示には通常の文字列連結を使います。

39
00:03:16.700 --> 00:03:18.135
期待出力を読みます。

40
00:03:18.135 --> 00:03:23.444
絶対ユーアールエルはトゥルー、基準なしの相対ユーアールエルはフォルス、基準ありならトゥルー、

41
00:03:23.444 --> 00:03:28.754
ホスト名がないユーアールエルはフォルス、という結果です。

42
00:03:28.754 --> 00:03:30.906
ここで意外なのが二つあります。

43
00:03:30.906 --> 00:03:32.341
一つ目は空文字です。

44
00:03:32.341 --> 00:03:37.651
有効な基準ユーアールエルがあれば、空文字でも解析できてトゥルーになります。

45
00:03:37.651 --> 00:03:41.525
入力必須の欄では、空文字を別途拒否する必要があります。

46
00:03:41.525 --> 00:03:44.108
二つ目はメール用ユーアールエルです。

47
00:03:44.108 --> 00:03:48.270
メルトゥーもユーアールエルの一種なのでトゥルーになります。

48
00:03:48.270 --> 00:03:54.440
ウェブページ向けのリンク欄で受け付けるかどうかは、別に追加で判断しなければなりません。

49
00:03:54.440 --> 00:03:56.736
この出力は実機でも確認済みです。

50
00:03:56.736 --> 00:04:02.917
実用例として、エイチティーティーピーエスの絶対ユーアールエルだけを受け付ける検証関数を作ります。

51
00:04:02.917 --> 00:04:07.295
要件が絶対ユーアールエルだけなので、基準ユーアールエルは渡しません。

52
00:04:07.295 --> 00:04:08.712
処理の順番が大切です。

53
00:04:08.712 --> 00:04:13.605
まず文字列かどうかを確認し、前後の空白を取り除いて、空欄なら入力を促します。

54
00:04:13.605 --> 00:04:18.627
次にキャンパースで解析できるかを調べ、解析できたらユーアールエルオブジェクトを作り、

55
00:04:18.627 --> 00:04:23.649
プロトコルがエイチティーティーピーエス・コロンと一致するかを確認します。

56
00:04:23.649 --> 00:04:27.641
すべての条件を通れば、解析後の表記と一緒にオーケーを返します。

57
00:04:27.641 --> 00:04:33.436
条件ごとに別のメッセージを返すので、利用者にも、なぜ拒否されたのかが伝わりやすい設計です。

58
00:04:33.436 --> 00:04:35.917
実用例の実行結果を確認します。

59
00:04:35.917 --> 00:04:42.203
前後に空白がある正しいユーアールエルは、空白を取り除いてオーケーになります。

60
00:04:42.203 --> 00:04:46.834
相対ユーアールエルは解析の段階で、エイチティーティーピーやメルトゥーはプロトコルの段階で、

61
00:04:46.834 --> 00:04:51.465
それぞれ拒否されます。

62
00:04:51.465 --> 00:04:56.593
空白だけの入力とヌルも、早い段階で専用のメッセージになります。

63
00:04:56.593 --> 00:05:03.044
一般に、解析できない値をユーアールエルの生成に渡すとタイプエラーが発生します。

64
00:05:03.044 --> 00:05:12.637
しかしこの例では、直前に解析可能と判定した同じ文字列を渡しているため、構文エラーのためのトライ・キャッチは不要です。

65
00:05:12.637 --> 00:05:16.938
判定と生成で異なる値を使わないことが条件になります。

66
00:05:16.938 --> 00:05:19.088
結果も実機で確認済みです。

67
00:05:19.088 --> 00:05:23.986
失敗しやすい条件として、基準ユーアールエルの扱いを見ます。

68
00:05:23.986 --> 00:05:29.223
ドメイン名だけでは、基準なしでは解析できずフォルスになります。

69
00:05:29.223 --> 00:05:36.317
ところが基準ユーアールエルを渡すと、相対パスとして扱えてトゥルーになってしまいます。

70
00:05:36.317 --> 00:05:42.736
解決すると、基準の後ろに入力がくっついた意図しないユーアールエルになります。

71
00:05:42.736 --> 00:05:47.634
利用者がドメイン名を正しく入力したかを確認したいのに、無条件で基準を補うと、

72
00:05:47.634 --> 00:05:52.532
想定と違う入力まで通過してしまうのです。

73
00:05:52.532 --> 00:06:00.302
相対ユーアールエルを受け付けるかどうかを先に決め、そのルールに合わせて引数を選んでください。

74
00:06:00.302 --> 00:06:08.748
基準ユーアールエル自体も、有効な値に固定しておくと、入力の問題と設定の問題を切り分けやすくなります。

75
00:06:08.748 --> 00:06:10.810
もう一つの大切な区別です。

76
00:06:10.810 --> 00:06:16.043
キャンパースは同期処理で、プロミスを返さず、アウェイトも不要です。

77
00:06:16.043 --> 00:06:19.691
判定のために接続先へ通信することもありません。

78
00:06:19.691 --> 00:06:27.620
そのため、ディーエヌエスの解決やエイチティーティーピーのステータス、ページの存在までは確認しません。

79
00:06:27.620 --> 00:06:33.329
実用例のオーケーも、エイチティーティーピーエスの絶対ユーアールエルという条件を満たしたという意味で、

80
00:06:33.329 --> 00:06:39.038
接続先の信頼性を保証する表示ではありません。

81
00:06:39.038 --> 00:06:45.699
特定のサービスへのリンクだけを許す要件なら、解析後のホスト名などにも条件を設けます。

82
00:06:45.699 --> 00:06:51.408
また、オブジェクト化したときの表記は入力と完全に一致するとは限りません。

83
00:06:51.408 --> 00:06:56.800
元の入力を再編集に使う場合は、解析後の値と区別して保持してください。

84
00:06:56.800 --> 00:06:57.635
まとめです。

85
00:06:57.635 --> 00:07:03.338
ユーアールエル・キャンパースは、文字列をユーアールエルとして解析できるかを真偽値で判定するメソッドで、

86
00:07:03.338 --> 00:07:09.042
例外を捕まえる書き方よりシンプルに入力チェックへ組み込めます。

87
00:07:09.042 --> 00:07:10.711
導入時の判断は三つです。

88
00:07:10.711 --> 00:07:16.554
まず、絶対ユーアールエルだけにするか、相対ユーアールエルも受け付けるかを決めること。

89
00:07:16.554 --> 00:07:20.866
次に、空欄を許すか、どのプロトコルを受け付けるかを決めること。

90
00:07:20.866 --> 00:07:27.822
そして、型と空欄を確認し、キャンパースで解析可否を調べ、用途固有の条件を追加する順序を守ることです。

91
00:07:27.822 --> 00:07:35.056
プロフィール欄と管理画面で許可範囲を使い分けたり、シーエスブイ取り込み時の構文チェックにも応用できます。

92
00:07:35.056 --> 00:07:36.308
お疲れさまでした。