WEBVTT

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

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

3
00:00:06.967 --> 00:00:14.907
これは、ユーアールエルの部品に使われたパーセント表記を、元の文字列に戻すためのグローバル関数です。

4
00:00:14.907 --> 00:00:22.036
たとえば、パーセント二六という表記はアンド記号を、パーセント二ゼロは空白を表しています。

5
00:00:22.036 --> 00:00:28.193
そのままでは読みにくい値を、この関数に渡すと、普段の文字として表示できます。

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

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

8
00:00:36.781 --> 00:00:42.128
クエリの値を画面に表示する場面でも、同じ考え方がそのまま使えます。

9
00:00:42.128 --> 00:00:47.718
アドレスバーやリンクの中で見かける読みにくい文字列が、実はこの関数で元に戻せるのだと分かると、

10
00:00:47.718 --> 00:00:53.308
ユーアールエルの仕組みへの理解も深まります。

11
00:00:53.308 --> 00:00:55.346
まず動作環境を確認します。

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

13
00:01:00.911 --> 00:01:06.477
サファリでは一・一以降、エッジでは十二以降で使えます。

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

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

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

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

18
00:01:30.385 --> 00:01:34.696
どちらでも同じコードで試せます。

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

20
00:01:42.848 --> 00:01:44.946
引数と戻り値を確認します。

21
00:01:44.946 --> 00:01:51.886
書き方は、関数名のあとにカッコを書き、その中にエンコードされた文字列を一つ渡す形です。

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

23
00:01:58.018 --> 00:02:02.537
戻り値は、パーセント表記が元の文字に戻された文字列です。

24
00:02:02.537 --> 00:02:08.347
たとえば、ハローのあとにパーセント二ゼロが入った値では、空白に戻ります。

25
00:02:08.347 --> 00:02:14.803
パーセント表記を含まない普通の文字列を渡した場合は、そのままの文字列が返ります。

26
00:02:14.803 --> 00:02:17.869
渡した元の文字列自体は変更されません。

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

28
00:02:22.549 --> 00:02:26.100
覚えることは、渡す値と返る値の対応だけです。

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

30
00:02:29.991 --> 00:02:34.930
エンコードユーアールアイコンポーネントは、文字列をユーアールエルに載せられる形へ変換し、

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

32
00:02:39.868 --> 00:02:44.657
今回のデコードは、その逆で、パーセント表記を元の文字へ戻します。

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

34
00:02:49.297 --> 00:02:55.582
ただし、相手がすでに復元済みの値だった場合は、もう一度デコードする必要はありません。

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

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

37
00:03:04.187 --> 00:03:08.752
通信まわりの処理全体が見通しやすくなります。

38
00:03:08.752 --> 00:03:10.599
記事の基本例を見ます。

39
00:03:10.599 --> 00:03:14.882
入力は、大文字のエー、パーセント二六、大文字のビー、パーセント二ゼロ、大文字のシー、

40
00:03:14.882 --> 00:03:19.164
という文字列です。

41
00:03:19.164 --> 00:03:23.950
パーセント二六はアンド記号、パーセント二ゼロは空白に対応するので、結果はエー、

42
00:03:23.950 --> 00:03:28.736
アンド、ビー、空白、シーとなります。

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

44
00:03:32.599 --> 00:03:36.461
同じ結果になります。

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

46
00:03:41.247 --> 00:03:46.033
コード全体をブロックで囲んでください。

47
00:03:46.033 --> 00:03:51.239
実行前に、どの記号に戻るかを予測してから確かめてみてください。

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

49
00:03:59.300 --> 00:04:00.763
期待出力を読みます。

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

51
00:04:05.735 --> 00:04:07.783
日本語の例も見てみましょう。

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

53
00:04:14.950 --> 00:04:18.606
それをデコードすると、元の「あ」一文字に戻ります。

54
00:04:18.606 --> 00:04:25.334
このように、日本語や記号を含んだ検索ワードも、正しくエンコードされた値であれば復元できます。

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

56
00:04:32.208 --> 00:04:34.695
対応表を暗記する必要はありません。

57
00:04:34.695 --> 00:04:39.960
パーセントのあとの二桁が文字を表す、という仕組みだけ押さえれば十分です。

58
00:04:39.960 --> 00:04:44.398
実用例として、クエリの値を安全に復元する関数を作ります。

59
00:04:44.398 --> 00:04:46.141
処理の順番が大切です。

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

61
00:04:52.956 --> 00:04:56.442
空文字はそのまま返し、余計な処理をしません。

62
00:04:56.442 --> 00:05:04.050
最後に、トライの中でデコードを試み、例外が出たら、復元できないことを伝えるメッセージに変えます。

63
00:05:04.050 --> 00:05:09.755
デコード単体では、不正な値で例外が発生して処理全体が止まってしまいます。

64
00:05:09.755 --> 00:05:16.412
前段のチェックと例外の捕捉を組み合わせることで、利用者に理由が伝わる処理になります。

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

66
00:05:23.068 --> 00:05:25.507
実用例の実行結果を確認します。

67
00:05:25.507 --> 00:05:30.060
正しくエンコードされた値は、そのまま復元されて返ります。

68
00:05:30.060 --> 00:05:38.353
一方、パーセントのあとに不正な文字が続く値は、例外を捕捉して、復元できないというメッセージになります。

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

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

71
00:05:45.996 --> 00:05:53.314
ポイントは、例外をそのまま利用者に見せるのではなく、原因に合わせた言葉へ変換することです。

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

73
00:05:58.029 --> 00:06:05.672
原因ごとにメッセージを分ける一手間が、利用者の迷いを減らし、問い合わせの削減にもつながります。

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

75
00:06:07.376 --> 00:06:15.587
不正なパーセント表記を渡すと、この関数は値を返すのではなく、ユーアールアイエラーという例外を発生させます。

76
00:06:15.587 --> 00:06:23.023
たとえば、パーセントのあとにゼットが二つ続く表記は、十六進数として読めないためエラーになります。

77
00:06:23.023 --> 00:06:28.754
日本語の途中で切れたような、不完全なユーティーエフエイトの並びも同じです。

78
00:06:28.754 --> 00:06:35.106
記事の境界条件の例でも、エラー名がユーアールアイエラーになることが示されています。

79
00:06:35.106 --> 00:06:40.683
外部から受け取った値を扱うときは、必ずトライとキャッチで囲んでください。

80
00:06:40.683 --> 00:06:47.964
例外は失敗ではなく、壊れた入力を知らせる大切な合図だと捉えると、対処の設計がしやすくなります。

81
00:06:47.964 --> 00:06:50.908
もう二つ、間違えやすい点があります。

82
00:06:50.908 --> 00:06:53.525
一つ目は、プラス記号の扱いです。

83
00:06:53.525 --> 00:07:02.358
フォームの送信形式ではプラスが空白を表すことがありますが、この関数にはプラスを空白へ変える機能はありません。

84
00:07:02.358 --> 00:07:04.812
プラスはプラスのまま返ります。

85
00:07:04.812 --> 00:07:07.265
二つ目は、二重のデコードです。

86
00:07:07.265 --> 00:07:13.645
ユーアールエルサーチパラムズなどがすでに復元した値をもう一度デコードすると、

87
00:07:13.645 --> 00:07:20.024
本来データだったパーセント記号まで変換され、意味が変わってしまうことがあります。

88
00:07:20.024 --> 00:07:25.094
値がどの段階まで復元されているかを確認してから使ってください。

89
00:07:25.094 --> 00:07:32.128
迷ったときは、その値を作った側の仕様を確認することが、誤った変換を防ぐ一番の近道です。

90
00:07:32.128 --> 00:07:32.994
まとめです。

91
00:07:32.994 --> 00:07:37.180
デコードユーアールアイコンポーネントは、ユーアールエルの部品のパーセント表記を、

92
00:07:37.180 --> 00:07:41.366
元の文字列に戻すシンプルな関数です。

93
00:07:41.366 --> 00:07:43.098
導入時の判断は三つです。

94
00:07:43.098 --> 00:07:47.862
まず、復元が必要なのはパーセント表記を含む値だけだと見分けること。

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

96
00:07:53.780 --> 00:07:59.554
そして、プラスの変換や二重のデコードはこの関数の仕事ではないと理解することです。

97
00:07:59.554 --> 00:08:05.472
検索ワードの表示や、受け取ったクエリの確認など、身近な場面から試してみてください。

98
00:08:05.472 --> 00:08:06.771
お疲れさまでした。

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