WEBVTT

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

2
00:00:00.967 --> 00:00:07.088
今回はジャバスクリプトのエンコードユーアールアイコンポーネントを紹介します。

3
00:00:07.088 --> 00:00:14.821
これは、文字列をユーアールエルの部品として安全に載せられる形へ変換するためのグローバル関数です。

4
00:00:14.821 --> 00:00:21.265
たとえば、アンド記号はパーセント二六に、空白はパーセント二ゼロに置き換わります。

5
00:00:21.265 --> 00:00:27.870
そのまま載せると区切りと誤解される文字も、この関数を通せば一つの値として扱えます。

6
00:00:27.870 --> 00:00:32.139
この動画では、引数と戻り値、基本例、日本語の変換例、そしてエラーになる条件まで、

7
00:00:32.139 --> 00:00:36.408
実行結果と一緒に学びます。

8
00:00:36.408 --> 00:00:45.268
リンクや検索アドレスを作る場面で、なぜ変換が必要なのかが分かると、ユーアールエルの仕組みへの理解も深まります。

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

10
00:00:47.217 --> 00:00:52.541
この関数はとても古くからある機能で、クロームとファイアーフォックスではバージョン一以降、

11
00:00:52.541 --> 00:00:57.864
サファリでは一・一以降、エッジでは十二以降で使えます。

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

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

14
00:01:10.910 --> 00:01:16.608
追加のパッケージやインポートは必要なく、関数名をそのまま書けば呼び出せます。

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

16
00:01:20.732 --> 00:01:24.856
どちらでも同じコードで試せます。

17
00:01:24.856 --> 00:01:31.304
長く安定して使える関数なので、古いブラウザーを対象に含む案件でも安心して採用できます。

18
00:01:31.304 --> 00:01:33.358
引数と戻り値を確認します。

19
00:01:33.358 --> 00:01:39.520
書き方は、関数名のあとにカッコを書き、その中に部品にしたい値を一つ渡す形です。

20
00:01:39.520 --> 00:01:45.525
オブジェクトのメソッドではないので、ドットの前に対象を書く必要はありません。

21
00:01:45.525 --> 00:01:49.633
戻り値は、パーセントエンコードを適用した文字列です。

22
00:01:49.633 --> 00:01:54.689
たとえば、空白を含む値では、空白がパーセント二ゼロに変わります。

23
00:01:54.689 --> 00:01:59.271
数値などを渡した場合は、文字列へ変換してから処理されます。

24
00:01:59.271 --> 00:02:02.274
渡した元の文字列自体は変更されません。

25
00:02:02.274 --> 00:02:06.856
引数が一つだけという単純さも、この関数の分かりやすさです。

26
00:02:06.856 --> 00:02:10.332
覚えることは、渡す値と返る値の対応だけです。

27
00:02:10.332 --> 00:02:14.216
対になる関数と一緒に理解すると分かりやすくなります。

28
00:02:14.216 --> 00:02:19.369
今回のエンコードユーアールアイコンポーネントは、文字列をユーアールエルに載せられる形へ変換し、

29
00:02:19.369 --> 00:02:24.522
アンド記号や空白をパーセント表記に変えます。

30
00:02:24.522 --> 00:02:30.946
デコードユーアールアイコンポーネントは、その逆で、パーセント表記を元の文字へ戻します。

31
00:02:30.946 --> 00:02:35.576
二つを続けて使うと、元の文字列に正確に戻ることも確認できます。

32
00:02:35.576 --> 00:02:41.999
ただし、相手がすでに変換済みの値だった場合は、もう一度エンコードする必要はありません。

33
00:02:41.999 --> 00:02:46.032
変換された値かどうかを見分けてから使うことが大切です。

34
00:02:46.032 --> 00:02:50.588
送る側でエンコードし、受け取る側でデコードする、という往復の流れを意識すると、

35
00:02:50.588 --> 00:02:55.144
通信まわりの処理全体が見通しやすくなります。

36
00:02:55.144 --> 00:02:56.929
記事の基本例を見ます。

37
00:02:56.929 --> 00:03:03.908
入力は、大文字のエー、アンド記号、大文字のビー、空白、大文字のシー、という検索語です。

38
00:03:03.908 --> 00:03:09.588
アンド記号はパーセント二六、空白はパーセント二ゼロに対応するので、先頭にクエスチョンとキューイコールを付けた結果は、

39
00:03:09.588 --> 00:03:15.268
クエスチョン、キュー、イコール、エー、パーセント二六、ビー、パーセント二ゼロ、

40
00:03:15.268 --> 00:03:20.948
シーとなります。

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

42
00:03:24.681 --> 00:03:28.414
同じ結果になります。

43
00:03:28.414 --> 00:03:33.039
繰り返し貼り付けて変数の再宣言エラーが出た場合は、ページを再読み込みするか、

44
00:03:33.039 --> 00:03:37.664
コード全体をブロックで囲んでください。

45
00:03:37.664 --> 00:03:43.182
実行前に、どの文字が変換されるかを予測してから確かめてみてください。

46
00:03:43.182 --> 00:03:50.972
なお、この基本例は記事に載っているコードそのもので、結果も記事の期待出力と実機で一致しています。

47
00:03:50.972 --> 00:03:52.553
期待出力を読みます。

48
00:03:52.553 --> 00:03:57.926
基本例の結果は、記事の表示と実機の結果が一致することを確認済みです。

49
00:03:57.926 --> 00:04:00.139
日本語の例も見てみましょう。

50
00:04:00.139 --> 00:04:07.884
ひらがなの「あ」は、ユーティーエフエイトでは三バイトで表されるため、パーセント表記も三つ並びます。

51
00:04:07.884 --> 00:04:13.258
それをエンコードすると、パーセント表記が三つ並んだ文字列になります。

52
00:04:13.258 --> 00:04:20.370
このように、日本語や記号を含んだ検索ワードも、一つの値としてユーアールエルに載せられます。

53
00:04:20.370 --> 00:04:27.799
練習では、入力を一か所だけ変え、実行前に結果を予測してから確かめると、対応関係が身につきます。

54
00:04:27.799 --> 00:04:30.486
対応表を暗記する必要はありません。

55
00:04:30.486 --> 00:04:37.440
変換が必要な文字はパーセントと二桁の数字で表される、という仕組みだけ押さえれば十分です。

56
00:04:37.440 --> 00:04:42.163
実用例として、クエリの値を安全に組み立てる関数を作ります。

57
00:04:42.163 --> 00:04:43.955
処理の順番が大切です。

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

59
00:04:50.959 --> 00:04:56.497
空文字はそのまま、キーが空のクエリとして返し、余計な処理をしません。

60
00:04:56.497 --> 00:05:02.686
最後に、値の部分だけをエンコードして、ユーアールエルの先頭部分と連結します。

61
00:05:02.686 --> 00:05:07.735
エンコード単体では、どのような入力でも変換を試みてしまいます。

62
00:05:07.735 --> 00:05:13.599
前段のチェックを組み合わせることで、利用者に理由が伝わる処理になります。

63
00:05:13.599 --> 00:05:20.439
このように段階を分けておくと、後から仕様が変わっても、直す場所がすぐに見つかります。

64
00:05:20.439 --> 00:05:26.140
複数の値を扱う場合は、ユーアールエルサーチパラムズも便利な選択肢です。

65
00:05:26.140 --> 00:05:28.525
実用例の実行結果を確認します。

66
00:05:28.525 --> 00:05:34.565
アンド記号と空白を含む値は、変換されて一つのクエリ値として組み立てられます。

67
00:05:34.565 --> 00:05:38.540
パーセント記号自体を含む値では、パーセントがパーセント二五に変わるため、

68
00:05:38.540 --> 00:05:42.514
受け取る側で誤解されません。

69
00:05:42.514 --> 00:05:47.601
ヌルを渡した場合は、型を確認する最初の段階でエヌジーになります。

70
00:05:47.601 --> 00:05:49.985
この出力も実機で確認済みです。

71
00:05:49.985 --> 00:05:56.185
ポイントは、ユーアールエル全体ではなく、値の部分だけをエンコードすることです。

72
00:05:56.185 --> 00:06:00.795
それが、実際の画面やデータ処理に組み込むときの使い方です。

73
00:06:00.795 --> 00:06:06.200
値ごとに変換する一手間が、リンクの壊れや検索の取りこぼしを防ぎます。

74
00:06:06.200 --> 00:06:08.097
最も大切な注意点です。

75
00:06:08.097 --> 00:06:15.858
この関数をユーアールエル全体に適用すると、区切りとして必要な文字まで変換されてしまいます。

76
00:06:15.858 --> 00:06:21.981
たとえば、スラッシュ、クエスチョン、イコールを含む文字列を渡すと、それらもパーセント表記に変わり、

77
00:06:21.981 --> 00:06:28.103
結果は区切りの意味を失った文字列になります。

78
00:06:28.103 --> 00:06:32.415
これは記事の境界条件の例でも示されている動きです。

79
00:06:32.415 --> 00:06:38.968
エンコードする対象は、検索語や識別子のような、値の部分だけに絞ってください。

80
00:06:38.968 --> 00:06:44.832
ユーアールエル全体を扱いたい場合は、別の関数との使い分けが必要です。

81
00:06:44.832 --> 00:06:49.230
どこまでが固定の組み立て部分で、どこからが値なのかを分けて考えることが、

82
00:06:49.230 --> 00:06:53.628
壊れないリンクを作るコツです。

83
00:06:53.628 --> 00:06:56.266
もう二つ、間違えやすい点があります。

84
00:06:56.266 --> 00:06:58.905
一つ目は、孤立サロゲートの扱いです。

85
00:06:58.905 --> 00:07:03.375
対になる文字が欠けた特殊な文字データを渡すと、この関数は値を返すのではなく、

86
00:07:03.375 --> 00:07:07.846
ユーアールアイエラーという例外を発生させます。

87
00:07:07.846 --> 00:07:13.269
外部から受け取った値を扱うときは、トライとキャッチで囲んで備えてください。

88
00:07:13.269 --> 00:07:17.373
二つ目は、エイチティーエムエルのエスケープとの違いです。

89
00:07:17.373 --> 00:07:21.404
画面表示のために記号を実体参照へ変える処理と、ユーアールエルの部品として変換する処理は、

90
00:07:21.404 --> 00:07:25.434
目的がまったく別です。

91
00:07:25.434 --> 00:07:30.858
表示先がアドレスなのか画面なのかを確認してから、使う関数を選んでください。

92
00:07:30.858 --> 00:07:37.600
迷ったときは、変換した値をどこで使うのかを先に決めることが、誤った変換を防ぐ一番の近道です。

93
00:07:37.600 --> 00:07:38.553
まとめです。

94
00:07:38.553 --> 00:07:47.611
エンコードユーアールアイコンポーネントは、文字列をユーアールエルの部品として安全な形に変換するシンプルな関数です。

95
00:07:47.611 --> 00:07:49.518
導入時の判断は三つです。

96
00:07:49.518 --> 00:07:54.126
まず、エンコードが必要なのは値の部分だけだと見分けること。

97
00:07:54.126 --> 00:08:00.641
次に、外部から受けた値はトライとキャッチで囲み、ユーアールアイエラーに備えること。

98
00:08:00.641 --> 00:08:09.381
そして、ユーアールエル全体の変換やエイチティーエムエルのエスケープはこの関数の仕事ではないと理解することです。

99
00:08:09.381 --> 00:08:16.214
検索ワードのリンクや、受け渡すクエリの組み立てなど、身近な場面から試してみてください。

100
00:08:16.214 --> 00:08:17.644
お疲れさまでした。

101
00:08:17.644 --> 00:08:25.748
まずは基本例の入力を変えるところから始め、慣れてきたら自分の画面のリンク処理へ組み込んでみてください。