SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

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

この動画で学べること

encodeURIComponent()でURLの部品として文字列をエンコードする方法を解説。引数と戻り値、実行結果付きのコード、間違えやすい点、ブラウザー・Node.js対応を確認できます。

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