【デザイン基礎｜実務向け】実務で必須！JavaScriptのdecodeURIComponent()を正しく使いこなす実装テクニック

導入

Web開発の現場において、URLに含まれるパラメータを扱うことは日常茶飯事です。しかし、日本語や特殊文字を含むクエリパラメータをそのまま取得すると、パーセントエンコーディングされた「%E3%81%82」のような文字列になってしまい、正しく表示できません。これを解決し、元の文字列に戻すために不可欠なのが「decodeURIComponent()」関数です。本記事では、この関数の正しい使い方と、現場で遭遇しやすいトラブルの回避策を解説します。

基礎知識

パーセントエンコーディングとは、URLで使用できない文字を「%」と「16進数」で表現する仕組みです。例えば、ブラウザのアドレスバーで日本語を入力すると、自動的にこの形式に変換されます。
「decodeURIComponent()」は、このエンコードされた文字列を、人間が読める元の文字（UTF-8形式）に変換するJavaScriptの標準関数です。似た関数に「decodeURI()」がありますが、decodeURIは「/」や「?」などのURL構造そのものを維持したい場合に使われ、個別のパラメータをデコードする際には、より広範囲の文字を処理できるdecodeURIComponent()を使うのが鉄則です。

実装/解決策

実務で最も多い用途は、ページ読み込み時にURLパラメータを取得し、それを表示や処理に利用するケースです。ただし、この関数は「%」の後に不正な値が含まれていると「URIError」を投げます。ユーザーが手入力したURLなどでエラーが起きないよう、必ず「try…catch」構文で囲むのがプロの現場の作法です。

サンプルプログラム

以下のコードは、URLのクエリパラメータを解析し、安全にデコードして取得する実践的な例です。

// URLから特定のパラメータを取得してデコードする関数
function getDecodedParam(name) {
  const urlParams = new URLSearchParams(window.location.search);
  const value = urlParams.get(name);

  if (!value) return null;

  try {
    // デコードを実行
    return decodeURIComponent(value);
  } catch (e) {
    // 不正な値が含まれていた場合のエラーハンドリング
    console.error("デコードに失敗しました:", e);
    return value; // 失敗した場合は元の値をそのまま返すか、nullにする
  }
}

// 使用例：?name=%E3%83%87%E3%82%B6%E3%82%A4%E3%83%8A%E3%83%BC
const userName = getDecodedParam('name');
console.log(userName); // 出力: デザイナー

応用・注意点

現場で陥りやすい罠として、「+（プラス記号）」の扱いがあります。「decodeURIComponent()」は、一部の環境で「+」をスペースとしてデコードしません。URLのクエリパラメータにおいて「+」はスペースとして扱われることが一般的ですが、この関数はそれをそのまま「+」として返します。
もし、URLSearchParamsを使わずに手動でURLをパースしている場合は、まず「.replace(/\+/g, ‘ ‘)」を使って「+」を半角スペースに置換してから「decodeURIComponent()」に通すという前処理を忘れないようにしてください。
また、セキュリティの観点からも、デコードした文字列をDOMへ直接埋め込む際は、XSS（クロスサイトスクリプティング）対策として、textContent等を使用してエスケープ処理を行うことを常に心がけましょう。