SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

JavaScriptのURL.canParse()：URLを解析できるか判定する方法の解説動画

再生時間 7:36動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

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

  1. 0:00こんにちは。
  2. 0:00今回はジャバスクリプトのユーアールエル・キャンパースを紹介します。
  3. 0:06文字列をユーアールエルとして解析できるかどうかを、トゥルーかフォルスで返す静的メソッドです。
  4. 0:13プロフィールのリンク欄などでは、入力文字列をユーアールエルとして扱えるかを調べたい場面があります。
  5. 0:21自分で正規表現を書こうとすると、相対パスやポート番号など、考える条件が一気に増えてしまいます。
  6. 0:28このメソッドなら、ユーアールエルオブジェクトを先に作らなくても判定できます。
  7. 0:34この動画では、引数と基準ユーアールエルの考え方、基本例と実用例、判定の限界まで、
  8. 0:39実行結果と一緒に学びます。
  9. 0:43まず動作環境を確認します。
  10. 0:45ブラウザーでは、二千二十三年十二月以降、主要ブラウザーを横断して利用できる機能として扱われています。
  11. 0:52ノード・ジェイエスでも同じ機能が使え、追加されたバージョンは十九・九・ゼロと十八・十七・ゼロです。
  12. 0:59ただし、古いブラウザーや組み込みのウェブビューまで一律に対応しているとは限りません。
  13. 1:05そのため実行時には、タイプオブでユーアールエル・キャンパースが関数として存在するかを確認する書き方が紹介されています。
  14. 1:14追加のパッケージやインポートは不要で、グローバルのユーアールエルをそのまま使えます。
  15. 1:20この確認を入れておくと、未対応の環境でも安全に処理を分けられます。
  16. 1:24引数と戻り値を確認します。
  17. 1:26呼び出し方は二通りで、第一引数だけ渡す形と、第二引数に基準ユーアールエルを渡す形があります。
  18. 1:33第一引数は調べたいユーアールエル、第二引数は相対ユーアールエルを解決するための基準です。
  19. 1:39省略すると未定義として扱われます。
  20. 1:41戻り値は真偽値で、解析できればトゥルー、できなければフォルスです。
  21. 1:46たとえばエイチティーティーピーエスから始まる絶対ユーアールエルは単独で解析できますが、
  22. 1:52スラッシュ・ヘルプのような相対ユーアールエルは接続先の情報がないため、基準がないとフォルスになります。
  23. 1:59表示中のページが自動で基準になるわけではない点にも注意してください。
  24. 2:03文字列以外を渡した場合の動きも押さえます。
  25. 2:06このエーピーアイは、引数を文字列化してから判定します。
  26. 2:10数値やヌルも文字列化され、基準なしではフォルスになります。
  27. 2:14つまり、引数を受け取れたことと、その入力がアプリケーションにとって適切であることは一致しません。
  28. 2:21フォームやジェイソン由来の値を扱う関数では、先にタイプオブで文字列かどうかを確認すると意図が明確になります。
  29. 2:29また、文字列化に独自の処理を持つオブジェクトでは、その処理自体が例外を投げる可能性もあります。
  30. 2:35どんな値でも絶対に例外を投げないエーピーアイ、とは解釈しないでください。
  31. 2:41コピーして動かせる基本例を見ます。
  32. 2:43記事の例では、絶対ユーアールエル、基準なしの相対ユーアールエル、基準ありの相対ユーアールエル、
  33. 2:49ホスト名がないユーアールエル、空文字と基準ユーアールエルの組み合わせ、そしてメール用ユーアールエルの六件を配列に並べ、
  34. 2:55ループで一行ずつ判定結果を表示します。
  35. 3:01未対応の環境では判定に進まず、その旨を表示する作りです。
  36. 3:05ブラウザーではコンソールに貼るだけ、ノード・ジェイエスではファイルに保存して実行するだけで、
  37. 3:09どちらも同じコードで試せます。
  38. 3:14表示には通常の文字列連結を使います。
  39. 3:16期待出力を読みます。
  40. 3:18絶対ユーアールエルはトゥルー、基準なしの相対ユーアールエルはフォルス、基準ありならトゥルー、
  41. 3:23ホスト名がないユーアールエルはフォルス、という結果です。
  42. 3:28ここで意外なのが二つあります。
  43. 3:30一つ目は空文字です。
  44. 3:32有効な基準ユーアールエルがあれば、空文字でも解析できてトゥルーになります。
  45. 3:37入力必須の欄では、空文字を別途拒否する必要があります。
  46. 3:41二つ目はメール用ユーアールエルです。
  47. 3:44メルトゥーもユーアールエルの一種なのでトゥルーになります。
  48. 3:48ウェブページ向けのリンク欄で受け付けるかどうかは、別に追加で判断しなければなりません。
  49. 3:54この出力は実機でも確認済みです。
  50. 3:56実用例として、エイチティーティーピーエスの絶対ユーアールエルだけを受け付ける検証関数を作ります。
  51. 4:02要件が絶対ユーアールエルだけなので、基準ユーアールエルは渡しません。
  52. 4:07処理の順番が大切です。
  53. 4:08まず文字列かどうかを確認し、前後の空白を取り除いて、空欄なら入力を促します。
  54. 4:13次にキャンパースで解析できるかを調べ、解析できたらユーアールエルオブジェクトを作り、
  55. 4:18プロトコルがエイチティーティーピーエス・コロンと一致するかを確認します。
  56. 4:23すべての条件を通れば、解析後の表記と一緒にオーケーを返します。
  57. 4:27条件ごとに別のメッセージを返すので、利用者にも、なぜ拒否されたのかが伝わりやすい設計です。
  58. 4:33実用例の実行結果を確認します。
  59. 4:35前後に空白がある正しいユーアールエルは、空白を取り除いてオーケーになります。
  60. 4:42相対ユーアールエルは解析の段階で、エイチティーティーピーやメルトゥーはプロトコルの段階で、
  61. 4:46それぞれ拒否されます。
  62. 4:51空白だけの入力とヌルも、早い段階で専用のメッセージになります。
  63. 4:56一般に、解析できない値をユーアールエルの生成に渡すとタイプエラーが発生します。
  64. 5:03しかしこの例では、直前に解析可能と判定した同じ文字列を渡しているため、構文エラーのためのトライ・キャッチは不要です。
  65. 5:12判定と生成で異なる値を使わないことが条件になります。
  66. 5:16結果も実機で確認済みです。
  67. 5:19失敗しやすい条件として、基準ユーアールエルの扱いを見ます。
  68. 5:23ドメイン名だけでは、基準なしでは解析できずフォルスになります。
  69. 5:29ところが基準ユーアールエルを渡すと、相対パスとして扱えてトゥルーになってしまいます。
  70. 5:36解決すると、基準の後ろに入力がくっついた意図しないユーアールエルになります。
  71. 5:42利用者がドメイン名を正しく入力したかを確認したいのに、無条件で基準を補うと、
  72. 5:47想定と違う入力まで通過してしまうのです。
  73. 5:52相対ユーアールエルを受け付けるかどうかを先に決め、そのルールに合わせて引数を選んでください。
  74. 6:00基準ユーアールエル自体も、有効な値に固定しておくと、入力の問題と設定の問題を切り分けやすくなります。
  75. 6:08もう一つの大切な区別です。
  76. 6:10キャンパースは同期処理で、プロミスを返さず、アウェイトも不要です。
  77. 6:16判定のために接続先へ通信することもありません。
  78. 6:19そのため、ディーエヌエスの解決やエイチティーティーピーのステータス、ページの存在までは確認しません。
  79. 6:27実用例のオーケーも、エイチティーティーピーエスの絶対ユーアールエルという条件を満たしたという意味で、
  80. 6:33接続先の信頼性を保証する表示ではありません。
  81. 6:39特定のサービスへのリンクだけを許す要件なら、解析後のホスト名などにも条件を設けます。
  82. 6:45また、オブジェクト化したときの表記は入力と完全に一致するとは限りません。
  83. 6:51元の入力を再編集に使う場合は、解析後の値と区別して保持してください。
  84. 6:56まとめです。
  85. 6:57ユーアールエル・キャンパースは、文字列をユーアールエルとして解析できるかを真偽値で判定するメソッドで、
  86. 7:03例外を捕まえる書き方よりシンプルに入力チェックへ組み込めます。
  87. 7:09導入時の判断は三つです。
  88. 7:10まず、絶対ユーアールエルだけにするか、相対ユーアールエルも受け付けるかを決めること。
  89. 7:16次に、空欄を許すか、どのプロトコルを受け付けるかを決めること。
  90. 7:20そして、型と空欄を確認し、キャンパースで解析可否を調べ、用途固有の条件を追加する順序を守ることです。
  91. 7:27プロフィール欄と管理画面で許可範囲を使い分けたり、シーエスブイ取り込み時の構文チェックにも応用できます。
  92. 7:35お疲れさまでした。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

URL.canParse()で絶対URLと相対URLの解析可否を判定する方法を解説。ブラウザーとNode.jsでの実行手順、基準URLの指定、期待出力、入力検証での注意点を学べます。

解説記事・サンプルコードを読む：JavaScriptのURL.canParse()：URLを解析できるか判定する方法 →