JavaScript/decodeURIComponent

decodeURIComponent() は、エンコードされたURIコンポーネントを元のフォーマットに戻すグローバル関数です。主にクエリパラメータや特定のURI部分をデコードするために使用されます。

構文

decodeURIComponent(encodedURIComponent)

パラメータ

encodedURIComponent

デコードするエンコードされたURIコンポーネント文字列

戻り値

デコードされた元の文字列

例外

URIError

不正にエンコードされた文字が含まれている場合にスローされます

基本的な使用例

// エンコードされたクエリパラメータ
const encodedParam = "%E3%81%93%E3%82%93%E3%81%AB%E3%81%A1%E3%81%AF%20%E4%B8%96%E7%95%8C!";

// デコード
const decodedParam = decodeURIComponent(encodedParam);
console.log(decodedParam); 
// "こんにちは 世界!"

エンコード vs デコード

メソッド	目的	エンコード/デコード範囲
encodeURIComponent()	URIコンポーネントをエンコード	予約文字、特殊文字、非ASCII文字
decodeURIComponent()	エンコードされたコンポーネントをデコード	エンコードされたすべての文字

デコード対象の文字

decodeURIComponent() は以下を含むすべてのエンコードされた文字をデコードします：

• パーセントエンコーディングされた文字
• 16進数エンコーディング
• 非ASCII文字のUTF-8エンコーディング
• スペースや特殊文字

重要な特徴

• クエリパラメータの完全デコード
• セキュリティに関する注意が必要
• URLの各コンポーネントを正確に復元

高度な使用例

// URLからクエリパラメータを解析
function parseQueryString(url) {
    const queryString = url.split('?')[1];
    const params = {};
    
    queryString.split('&').forEach(param => {
        const [key, value] = param.split('=');
        params[decodeURIComponent(key)] = decodeURIComponent(value);
    });
    
    return params;
}

const url = "https://example.com/search?q=%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0&lang=%E6%97%A5%E6%9C%AC%E8%AA%9E";
const parsedParams = parseQueryString(url);
console.log(parsedParams);
// { q: "プログラミング", lang: "日本語" }

セキュリティ考慮事項

• 信頼できないソースからのデコードには注意
• 追加のサニタイズが必要
• XSS (クロスサイトスクリプティング) 対策として不十分

注意点

• 不正なエンコード文字列は URIError を発生
• パフォーマンスへの影響は最小限
• 可読性を目的とした使用

エラーハンドリングの例

try {
    // 不正なエンコード文字列
    const badEncoding = "%E0%A4%"; // 不完全なエンコーディング
    const decoded = decodeURIComponent(badEncoding);
} catch (error) {
    if (error instanceof URIError) {
        console.error("デコード中にエラーが発生しました");
    }
}

関連メソッド

• encodeURIComponent()
• decodeURI()
• encodeURI()

ブラウザ互換性

• すべてのモダンブラウザでサポート
• Internet Explorer 5.5以降
• ECMAScript 3以降で標準化

仕様

• ECMAScript 仕様
• WHATWG URL 仕様
• RFC 3986 (URI規格)