SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

マンガで分かるプログラミング用語辞典

「パーセントエンコーディング」
~マンガでプログラミング用語解説

マンガで分かるプログラミング用語辞典(117)

解説

 「パーセントエンコーディング」は、URLやURIで使えない文字を、特殊な書き方で表現する変換規則です。パーセントエンコーディングは、「URLエンコーディング」と呼ばれることもあります。

 URLの中では、「:」「/」「?」「&」「=」「#」などの文字は、「予約文字」と呼ばれています。これらの記号には、URLの構造を表す意味があり、それらを通常の文字列の場所で用いると、URLとして、正しい場所を指し示せなくなります。

 また、URLの中で自由に使える文字は、非予約文字と呼ばれています。これらは、「A-Z a-z」の英字、「0-9」の数字、「-」ハイフン、「.」ドット、「_」アンダースコアといった文字です。日本語のような2バイト以上の文字は使えません。

 そのため、使えない文字は、他の方法で表現しなければなりません。

 「パーセントエンコーディング」では、こうした文字を、%記号を使った記法で回避して書きます。以下では、「情報?」という文字列を、日本語部分はUTF-8の文字コード、?の部分はASCIIコードの16進数で表してエンコード(符号化)しています。

文字列「情報?」のエンコード例
エンコード 文字コード
%E6%83%85 E68385
%E5%A0%B1 E5A0B1
%3F ? 3F

 Webのクライアントやサーバーで使うプログラミング言語では、このようなパーセントエンコーディングを行うための、エンコード関数、デコード関数が用意されていることが多いです。

サンプル

 JavaScriptでパーセントエンコーディングを行う(エンコード、デコードを行う)関数を使い、その処理をJavaScriptで簡単に書いてみます。

 ファイルはUTF-8で保存して、実行はGoogle Chromeで行なっています。

<html>
    <head>
        <title>「パーセントエンコーディング」のサンプル</title>
        <meta charset="utf-8">
    </head>
    <body>
        <pre><script type="text/javascript">
            // encodeURI / decodeURI
            var srcTxt1 = 'URLは http://hoge.jp/?q=検索&lng=ja';
            var encTxt1 = encodeURI(srcTxt1);
            var decTxt1 = decodeURI(encTxt1);

            document.writeln('■encodeURI / decodeURI');
            document.writeln('; , / ? : @ & = + $ 英数字 - _ . ! ~ * \' ( ) #'
                + ' を除く文字を置き換える。');
            document.writeln('srcTxt1 = ' + srcTxt1);
            document.writeln('encTxt1 = ' + encTxt1);
            document.writeln('decTxt1 = ' + decTxt1);
            document.writeln('※ &や=が置き換えられないので検索クエリには使えない。');
            document.writeln('');

            // encodeURIComponent() / decodeURIComponent()
            var srcTxt2 = 'URLは http://hoge.jp/?q=検索&lng=ja';
            var encTxt2 = encodeURIComponent(srcTxt2);
            var decTxt2 = decodeURIComponent(encTxt2);

            document.writeln('■encodeURIComponent / decodeURIComponent');
            document.writeln('英数字 - _ . ! ~ * \' ( )'
                + ' を除く文字を置き換える。');
            document.writeln('srcTxt1 = ' + srcTxt2);
            document.writeln('encTxt1 = ' + encTxt2);
            document.writeln('decTxt1 = ' + decTxt2);
            document.writeln('※ &や=が置き換えられないので検索クエリに使える。');
        </script></pre>
    </body>
</html>
出力結果
■encodeURI / decodeURI
; , / ? : @ & = + $ 英数字 - _ . ! ~ * ' ( ) # を除く文字を置き換える。
srcTxt1 = URLは http://hoge.jp/?q=検索&lng=ja
encTxt1 = URL%E3%81%AF%20http://hoge.jp/?q=%E6%A4%9C%E7%B4%A2&lng=ja
decTxt1 = URLは http://hoge.jp/?q=検索&lng=ja
※ &や=が置き換えられないので検索クエリには使えない。

■encodeURIComponent / decodeURIComponent
英数字 - _ . ! ~ * ' ( ) を除く文字を置き換える。
srcTxt1 = URLは http://hoge.jp/?q=検索&lng=ja
encTxt1 = URL%E3%81%AF%20http%3A%2F%2Fhoge.jp%2F%3Fq%3D%E6%A4%9C%E7%B4%A2%26lng%3Dja
decTxt1 = URLは http://hoge.jp/?q=検索&lng=ja
※ &や=が置き換えられないので検索クエリに使える。
フィードバックお待ちしております!

 ご感想、解説して欲しい用語、解説内容のアドバイスなどございましたら、FacebookTwitterなどでお気軽に編集部までお寄せください。よろしくお願いいたします。

この記事は参考になりましたか?

連載通知を行うには会員登録(無料)が必要です。
既に会員の方はを行ってください。
マンガで分かるプログラミング用語辞典連載記事一覧

もっと読む

この記事の著者

柳井 政和(ヤナイ マサカズ)

クロノス・クラウン合同会社 代表社員http://crocro.com/オンラインソフトを多数公開。プログラムを書いたり、ゲームを作ったり、記事を執筆したり、マンガを描いたり、小説を書いたりしています。「めもりーくりーなー」でオンラインソフト大賞に入賞。最近は、小説家デビューして小説も書いています(『裏切りのプログラム』他)。面白いことなら何でもOKのさすらいの企画屋です。 

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/10150 2017/07/11 14:00

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー