【JS応用｜初心者向け】URLの文字化けを解消！decodeURIの使い方をマスターしよう

なぜdecodeURIが必要なのか？

Web開発をしていると、URLの中に日本語などの特殊文字が含まれていることに遭遇しませんか？例えば、検索キーワードをURLに含めると「%E3%81%82」のような英数字の羅列に変換されます。これはURLエンコードと呼ばれる仕組みですが、そのままでは人間が読めません。そこで役立つのが「decodeURI」です。これを使うことで、URLの形式を保ったまま、元の読みやすい文字列に安全に戻すことができます。

decodeURIの基礎知識

URLは世界共通のルールで、基本的に半角英数字しか使えません。そのため、日本語やスペースなどは「パーセントエンコーディング」という形式に変換されます。
decodeURIは、このエンコードされた文字列を、元の文字列に復元するためのJavaScript標準の関数です。似た関数に「decodeURIComponent」がありますが、decodeURIは「URL全体（https://…など）」をデコードする際に使い、decodeURIComponentは「クエリパラメータの一部」をデコードする際に使うという違いがあります。

実装と解決策

使い方は非常にシンプルです。デコードしたい文字列を関数の引数として渡すだけです。
ただし、もしURLが正しくエンコードされていない場合（例えば、パーセント記号が不正な場所にある場合など）は、「URIError」というエラーが発生します。現場では、必要に応じてtry-catch文でエラーハンドリングを行うのが安全な実装テクニックです。

サンプルプログラム

以下のコードをブラウザのコンソールや、HTMLファイルに貼り付けて動作を確認してみてください。

// エンコードされたURLのサンプル
const encodedUrl = "https://example.com/search?q=%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89";

try {
  // decodeURIでURLを元の日本語に戻す
  const decodedUrl = decodeURI(encodedUrl);
  
  // 結果をコンソールに表示
  console.log("元のURL:", encodedUrl);
  console.log("デコード後:", decodedUrl); // 「https://example.com/search?q=フロントエンド」と表示されます
} catch (e) {
  // 不正なURLだった場合の例外処理
  console.error("デコードに失敗しました:", e.message);
}

応用・注意点

現場でよくある失敗は、URL全体をデコードしたい場面で「decodeURIComponent」を使ってしまうことです。
decodeURIComponentを使うと、URLにとって重要な記号である「?」や「&」や「=」までもデコードしようとしてしまい、URLの構造が壊れてしまうことがあります。
URL全体を扱うときはdecodeURI、パラメータの値だけを抜き出して変換したいときはdecodeURIComponentと覚えておきましょう。また、ユーザー入力値を受け取る際は、セキュリティのためにデコード後の文字列をそのままHTMLに埋め込まず、必ずエスケープ処理を行うことも忘れないでください。