SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

JavaScriptのdecodeURIComponent()の使い方：引数・戻り値・実例と注意点の解説動画

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

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

  1. 0:00こんにちは。
  2. 0:00今回はジャバスクリプトのデコードユーアールアイコンポーネントを紹介します。
  3. 0:06これは、ユーアールエルの部品に使われたパーセント表記を、元の文字列に戻すためのグローバル関数です。
  4. 0:14たとえば、パーセント二六という表記はアンド記号を、パーセント二ゼロは空白を表しています。
  5. 0:22そのままでは読みにくい値を、この関数に渡すと、普段の文字として表示できます。
  6. 0:28この動画では、引数と戻り値、基本例、日本語の復元例、そしてエラーになる条件まで、
  7. 0:32実行結果と一緒に学びます。
  8. 0:36クエリの値を画面に表示する場面でも、同じ考え方がそのまま使えます。
  9. 0:42アドレスバーやリンクの中で見かける読みにくい文字列が、実はこの関数で元に戻せるのだと分かると、
  10. 0:47ユーアールエルの仕組みへの理解も深まります。
  11. 0:53まず動作環境を確認します。
  12. 0:55この関数はとても古くからある機能で、クロームとファイアーフォックスではバージョン一以降、
  13. 1:00サファリでは一・一以降、エッジでは十二以降で使えます。
  14. 1:06ノード・ジェイエスでも、ゼロ・一ゼロ・ゼロ以降で対応しています。
  15. 1:11記事の互換性情報は、エムディーエヌのデータに基づく目安で、すべての環境で実機検証したという意味ではありません。
  16. 1:20追加のパッケージやインポートは必要なく、関数名をそのまま書けば呼び出せます。
  17. 1:26ブラウザーでは開発者ツールのコンソール、ノードではファイルに保存して実行する、
  18. 1:30どちらでも同じコードで試せます。
  19. 1:34長く安定して使える関数なので、古いブラウザーを対象に含む案件でも、安心して採用できる点も大きな利点です。
  20. 1:42引数と戻り値を確認します。
  21. 1:44書き方は、関数名のあとにカッコを書き、その中にエンコードされた文字列を一つ渡す形です。
  22. 1:51オブジェクトのメソッドではないので、ドットの前に対象を書く必要はありません。
  23. 1:58戻り値は、パーセント表記が元の文字に戻された文字列です。
  24. 2:02たとえば、ハローのあとにパーセント二ゼロが入った値では、空白に戻ります。
  25. 2:08パーセント表記を含まない普通の文字列を渡した場合は、そのままの文字列が返ります。
  26. 2:14渡した元の文字列自体は変更されません。
  27. 2:17引数が一つだけという単純さも、この関数の分かりやすさです。
  28. 2:22覚えることは、渡す値と返る値の対応だけです。
  29. 2:26対になる関数と一緒に理解すると分かりやすくなります。
  30. 2:29エンコードユーアールアイコンポーネントは、文字列をユーアールエルに載せられる形へ変換し、
  31. 2:34アンド記号や空白をパーセント表記に変えます。
  32. 2:39今回のデコードは、その逆で、パーセント表記を元の文字へ戻します。
  33. 2:44二つを続けて使うと、元の文字列に正確に戻ることも確認できます。
  34. 2:49ただし、相手がすでに復元済みの値だった場合は、もう一度デコードする必要はありません。
  35. 2:55変換された値かどうかを見分けてから使うことが大切です。
  36. 2:59送る側でエンコードし、受け取る側でデコードする、という往復の流れを意識すると、
  37. 3:04通信まわりの処理全体が見通しやすくなります。
  38. 3:08記事の基本例を見ます。
  39. 3:10入力は、大文字のエー、パーセント二六、大文字のビー、パーセント二ゼロ、大文字のシー、
  40. 3:14という文字列です。
  41. 3:19パーセント二六はアンド記号、パーセント二ゼロは空白に対応するので、結果はエー、
  42. 3:23アンド、ビー、空白、シーとなります。
  43. 3:28ファイルに保存してノードで実行しても、ブラウザーのコンソールに貼っても、
  44. 3:32同じ結果になります。
  45. 3:36繰り返し貼り付けて変数の再宣言エラーが出た場合は、ページを再読み込みするか、
  46. 3:41コード全体をブロックで囲んでください。
  47. 3:46実行前に、どの記号に戻るかを予測してから確かめてみてください。
  48. 3:51なお、この基本例は記事に載っているコードそのもので、結果も記事の期待出力と実機で一致しています。
  49. 3:59期待出力を読みます。
  50. 4:00基本例の結果は、記事の表示と実機の結果が一致することを確認済みです。
  51. 4:05日本語の例も見てみましょう。
  52. 4:07ひらがなの「あ」は、ユーティーエフエイトでは三バイトで表されるため、パーセント表記も三つ並びます。
  53. 4:14それをデコードすると、元の「あ」一文字に戻ります。
  54. 4:18このように、日本語や記号を含んだ検索ワードも、正しくエンコードされた値であれば復元できます。
  55. 4:25練習では、入力を一か所だけ変え、実行前に結果を予測してから確かめると、対応関係が身につきます。
  56. 4:32対応表を暗記する必要はありません。
  57. 4:34パーセントのあとの二桁が文字を表す、という仕組みだけ押さえれば十分です。
  58. 4:39実用例として、クエリの値を安全に復元する関数を作ります。
  59. 4:44処理の順番が大切です。
  60. 4:46まず、タイプオブで文字列かどうかを確認し、文字列でなければ専用のメッセージを返します。
  61. 4:52空文字はそのまま返し、余計な処理をしません。
  62. 4:56最後に、トライの中でデコードを試み、例外が出たら、復元できないことを伝えるメッセージに変えます。
  63. 5:04デコード単体では、不正な値で例外が発生して処理全体が止まってしまいます。
  64. 5:09前段のチェックと例外の捕捉を組み合わせることで、利用者に理由が伝わる処理になります。
  65. 5:16このように段階を分けておくと、後から仕様が変わっても、直す場所がすぐに見つかります。
  66. 5:23実用例の実行結果を確認します。
  67. 5:25正しくエンコードされた値は、そのまま復元されて返ります。
  68. 5:30一方、パーセントのあとに不正な文字が続く値は、例外を捕捉して、復元できないというメッセージになります。
  69. 5:38ヌルを渡した場合は、型を確認する最初の段階でエヌジーになります。
  70. 5:43この出力も実機で確認済みです。
  71. 5:45ポイントは、例外をそのまま利用者に見せるのではなく、原因に合わせた言葉へ変換することです。
  72. 5:53それが、実際の画面やデータ処理に組み込むときの使い方です。
  73. 5:58原因ごとにメッセージを分ける一手間が、利用者の迷いを減らし、問い合わせの削減にもつながります。
  74. 6:05最も大切な注意点です。
  75. 6:07不正なパーセント表記を渡すと、この関数は値を返すのではなく、ユーアールアイエラーという例外を発生させます。
  76. 6:15たとえば、パーセントのあとにゼットが二つ続く表記は、十六進数として読めないためエラーになります。
  77. 6:23日本語の途中で切れたような、不完全なユーティーエフエイトの並びも同じです。
  78. 6:28記事の境界条件の例でも、エラー名がユーアールアイエラーになることが示されています。
  79. 6:35外部から受け取った値を扱うときは、必ずトライとキャッチで囲んでください。
  80. 6:40例外は失敗ではなく、壊れた入力を知らせる大切な合図だと捉えると、対処の設計がしやすくなります。
  81. 6:47もう二つ、間違えやすい点があります。
  82. 6:50一つ目は、プラス記号の扱いです。
  83. 6:53フォームの送信形式ではプラスが空白を表すことがありますが、この関数にはプラスを空白へ変える機能はありません。
  84. 7:02プラスはプラスのまま返ります。
  85. 7:04二つ目は、二重のデコードです。
  86. 7:07ユーアールエルサーチパラムズなどがすでに復元した値をもう一度デコードすると、
  87. 7:13本来データだったパーセント記号まで変換され、意味が変わってしまうことがあります。
  88. 7:20値がどの段階まで復元されているかを確認してから使ってください。
  89. 7:25迷ったときは、その値を作った側の仕様を確認することが、誤った変換を防ぐ一番の近道です。
  90. 7:32まとめです。
  91. 7:32デコードユーアールアイコンポーネントは、ユーアールエルの部品のパーセント表記を、
  92. 7:37元の文字列に戻すシンプルな関数です。
  93. 7:41導入時の判断は三つです。
  94. 7:43まず、復元が必要なのはパーセント表記を含む値だけだと見分けること。
  95. 7:47次に、外部から受けた値はトライとキャッチで囲み、ユーアールアイエラーに備えること。
  96. 7:53そして、プラスの変換や二重のデコードはこの関数の仕事ではないと理解することです。
  97. 7:59検索ワードの表示や、受け取ったクエリの確認など、身近な場面から試してみてください。
  98. 8:05お疲れさまでした。
  99. 8:06まずは基本例の入力を変えるところから始め、慣れてきたら自分の画面の表示処理へ組み込んでみてください。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

decodeURIComponent()でURLの部品をパーセント表記から復元する方法を解説。引数と戻り値、実行結果付きのコード、間違えやすい点、ブラウザー・Node.js対応を確認できます。

解説記事・サンプルコードを読む：JavaScriptのdecodeURIComponent()の使い方：引数・戻り値・実例と注意点 →