URLなぜ文字化け？（例：あ=%E3%81%82）エンコードとデコードの説明

ブラウザのURLをコピーしてSNSやメモ帳などに貼り付けると、文字化けしませんか。
それ、正式には“エンコード”っていいます。

一番、身近でURLがエンコードしやすいサイトは、おそらく  Amazonではないでしょうか。

今回、日本語を含むURLが文字化けしてしまう仕組み“URLエンコード”と、その逆の“URLデコード”について紹介します。

言葉の意味（エンコード・デコード）

エンコードの意味

エンコードは、デジタルデータを一定の法則で目的に応じた符号に変換する符号化作業である。

引用元：エンコード – Wikipedia

デコードの意味

デコード (decode) は、エンコードした情報を元に戻す復号の意で、エンコードの対義語となる。

引用元：デコード（エンコード記事内） – Wikipedia

URLエンコード・URLデコード

ここまで説明した内容をふまえて、URLエンコード・URLデコードを説明すると、

URLエンコード（またの名を、パーセントエンコーディング）とは、
URLを別の文字に置き換える変換処理のことを指し、

URLデコードとは、
その逆で別の文字に置き換えたURLを元に戻す変換処理のことを指します。

参考情報：URLエンコード・URLデコードについて

URLが文字化け（エンコード）している理由

結論、ブラウザのアドレスバーをコピーすると、エンコードしたURLがコピー対象になっている為です。

ここまで、わかりやすい“文字化け”という表現で説明してきましたが、このエンコード処理は意図したもので、
文字化けとは言いません。

文字化け（もじばけ）とは、コンピュータで文字を表示する際に、正しく表示されなくなってしまう現象のこと。

引用元：Wikipedia – 文字化け

正しく表現すると、URLエンコードした文字列というのが適切でしょう。

続けて、なぜURLにエンコード処理が必要なのか解説します。

なぜURLにエンコード処理が必要なのか

日本語を含んでいるURLのWebページを閲覧している際、ブラウザ、アドレスバーの表示上では、
日本語で見えていると思います。（ブラウザの仕様で変わる）

なぜ、わざわざ日本語のURLを別の文字に置き換えているかというと、
Webシステムでは、基本的に日本語（マルチバイト）が含まれるURLをそのまま使用する事ができません。

そう。Webシステムで使用できる文字列に置き換えるためにURLエンコードという処理が必要なのです。

また、URLエンコードでは、半角英数字や一部の半角記号に置き換わるので、
置き換わったURLをパッと見ると文字化けしているようにも見えます。
実際、問題は発生していないですが見た目で勘違いされやすい処理だと思います。

この章をまとめると、

ブラウザの表示上では日本語でも、実際にコピーされるのはエンコードされたURLが対象。
日本語が含まれるURLをエンコードすると半角英数字や一部の半角記号に置き換えれる。
エンコードされているURLは一見、文字化けしているように見えるが、文字化けではない。

となります。

実際にエンコードとデコードを体験してみよう

ここまで解説した内容のおさらいもかねて、実際のウェブページを参考にURLエンコードとURLデコードを体験してみましょう。

実際に日本語を含むURL（デコード状態のURL）を見てみる

それでは、Amazonで「ブリキ ＋ ロボット」をキーワードとし検索します。

上記が実際に検索した結果。
ブラウザのアドレスバーに表示されているURLは、下記とおりです。
https://www.amazon.co.jp/s?k=ブリキ+ロボット&__mk_ja_JP=カタカナ&crid=2CW61WTRIEVQA&sprefix=ブリキ+ロボット%2Caps%2C196&ref=nb_sb_noss_1

ウェブページを閲覧中、意識してアドレスバーをみる方は少ないと思いますが、
AmazonのURLでは、日本語が含まれていることがわかります。

下記がブラウザのアドレスバーを拡大した画像。

この結果からAmazonのURLは、検索した日本語のキーワードが反映されていることがわかります。
この何者にも変換されていない状態のURLを デコード状態のURL といいます。

エンコードされたURLを見てみる

前述で説明したとおり、日本語が含まれるURLの場合、Webシステムでは、そのままのURL で処理できません。
日本語が含まれるURLの情報をシステムに渡す場合は一度、エンコードにより半角英数字や一部の半角記号に置き換える必要があります。

私が、この記事を作成したキッカケでもあり、同じ現象に遭遇した方も多いと思いますが、
ブラウザのアドレスバーを直接コピーするとエンコードしたURLが対象となります。

下記は、前の章で検索したAmazonのウェブページのURLをコピーし貼り付けたURL。
https://www.amazon.co.jp/s?k=%E3%83%96%E3%83%AA%E3%82%AD+%E3%83%AD%E3%83%9C%E3%83%83%E3%83%88&__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=2CW61WTRIEVQA&sprefix=%E3%83%96%E3%83%AA%E3%82%AD+%E3%83%AD%E3%83%9C%E3%83%83%E3%83%88%2Caps%2C196&ref=nb_sb_noss_1

繰り返しになりますが、上記のURLはエンコードされているURLです。
日本語が含まれる元のURL（デコード状態のURL）と同じページにアクセス可能。

なお、日本語を含むURLのコピー時に自動で処理するURLエンコードは、ブラウザの仕様動作です。
2024年2月現在、主要なブラウザであるGoogle ChromeやFirefox、Microsoft Edgeの最新バージョンでも、
エンコードしたURLがコピー対象となります。

一方で日本語（マルチバイト）を含まない半角英数字・一部の半角記号のみのURLでは、
そのままシステムで利用できるURLであり、ブラウザにおいても自動でエンコードは行われません。

エンコードしたURL と デコード状態のURL を比較

エンコードしたURL と デコード状態のURL を比較すると、
エンコードしたURLの方が極端に文字数が多くなっていることがわかります。

たとえば、日本語の “あ” を含んでいるURLがあった場合、そのURLをエンコードすると “あ” の部分が “%E3%81%82” に変換。
変換した結果、1文字から9文字 へと大幅に文字数が多くなっています。
URLに日本語が多ければ多いほど、比例してURLエンコード後の文字数が長くなってしまうでしょう。

エンコードされたURLの問題点は

URLエンコードすると文字数が多くなることに触れましたが、それによりどのような問題点が発生するでしょうか。
いくつか考えられる問題点を下記にあげてみます。

• 文字数が長くなり視認性が悪くなる
  具体的な例をあげると、
  • SNSの貼り付け方によっては、文章や貼り付けたURLが見えづらくなる
  • 連続でURLを貼り付けると切れ目がわかりづらくなる
  • ドキュメントに貼り付けるとフォーマットが崩れてしまったり、見切れたりする
    　
• 文字数が長くなりツール・ソフトの文字数制限にひっかかる可能性が高くなる
  　
• 悪意のある怪しいサイトのURLだと誤解されやすい

逆にデコードされたURLをそのまま使用した場合の問題点としては、
SNSやツールによって、「貼り付けたURLが正しくURLとして認識されない場合がある」というのが、
大きなデメリットだと思います。

私も頻繁に利用しているSNS、X（旧：Twitter）で日本語を含むURLを本文に貼り付けた場合、
途中でURLの判定が切れてしまい、URL全体が正しく認識されないケースが、たまに発生します。

URLエンコード・URLデコードする方法

別の記事でまとめて紹介する予定。

まとめ

• ブラウザのURLをコピーすると文字化けする理由
  ブラウザの仕様でエンコードされたURLがコピーされているため。
  　
• URLエンコードとは、
  日本語などマルチバイトを含むURLを半角英数字や一部の半角記号に置き換える変換処理のこと。
  
  エンコードの例：https://www.google.com/search?q=あ
  　　　　　　　　👇（URLエンコードすると…）
  　　　　　　　　https://www.google.com/search?q=%E3%81%82
• URLデコードとは、
  エンコードで置き換えたURLを元に戻す変換処理のこと。
  
  デコードの例　：https://www.google.com/search?q=%E3%81%82
  　　　　　　　　👇（URLデコードすると…）
  　　　　　　　　https://www.google.com/search?q=あ