Webサイト制作コースのお申し込みはこちら

エスケープ処理とエンコードについて同じと思っている方が多くいますが、これは間違いです。

特に初心者の方に多い間違いなのですが、明確な違いについてうまく説明できない中級者の方もいらっしゃいます。

そこで今回はこの「エンコード」について解説をしてみたいと思います。

エンコードとは

エンコードとは「データを一定の基準に基づいて符号化する事」を指します。

文字にはそれぞれGID/CIDという固有の番号が振られていだけで、文字コードとの関連は不明確です。

OSが文字を認識するためには文字コードの明確化が不可欠ですから、まずは文字をコードとして認識させないといけません。

そこで文字をコード化する作業が必要になるわけですが、この作業を「エンコーディング」といいます。

エンコーディングにはいくつものテーブルが存在し、文字コードによって使用するテーブルを使い分けて関連付けています。

エディタによってはファイルを保存する際にエンコーディングを選択するものがありますが、これは今回の記事で解説する作業を半自動で行ってくれるものとなっています。

※エンコーディングを指定することによってコード化させるスクリプトが内部的に自動で行われるという意味です。

相互一致がエンコードルール

エンコーディングの基本ルールは、情報の保存時と開く際のコードの一致です。

HTMLファイルをunicodeで保存した場合には、開く際にもunicodeで開かせないと意味がありません。

これが一致していない場合には必ず文字化けの原因となります

HTMLファイルは一旦サーバーに保存され、URLによってそのファイルをブラウザというアプリケーションで開くことが出来ます。

メールの場合にはファイルがないと思われがちですが、メールも送受信するためにはメールフォルダに送受信する情報がファイルとして保存されています。

エンコードの指定方法

HTMLファイルでエンコードを指定する方法については以下の通りです。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>sample</title>
</head>

<body>
	<h1>Sample</h1>
	<p>HTML5ではmetaタグを使い文字コードを指定します。</p>
</body>
</html>

というタグをタグ内に記述します。

こうすることで、ブラウザで開いた際にどの文字コードで記述されているのかをブラウザが認識できるようになります。

パーセントエンコーディング

ここまで説明してきたエンコーディングですが、もう一つ用語として混同されがちなのがこの「パーセントエンコーディング」です。

同じエンコーディングでも、パーセントエンコーディングは文字エンコーディングとは意味合いが異なります

以下では、文字エンコーディングとパーセントエンコーディングについて簡単に違いをまとめています。

文字エンコーディング

utf-8″や”EUC-JP”など、ファイルに保存される際の文字コードとブラウザで開く際の文字コードを一致させる作業

パーセントエンコーディング

メールでPOST送信する際などに使われる方法で、非ASCII文字などを「%xx」の形に変換する作業

ASCII文字とは

半角英数字や制御文字の他にも半角記号など、ひらがなやカタカナ、漢字のような日本語として使われている2バイト文字以外の文字を指します。

エスケープとの違い

エスケープ処理も文字の変換処理を行うため、パーセントエンコーディングとエスケープ処理は説明上似たように感じるかもしれません。

以下ではこのエスケープ処理とパーセントエンコーディングの違いについて解説しています。

エスケープ処理

特殊文字を何の意味も持たない文字に変換するだけ」でコード化はされない。

このため、エスケープに使用した文字列はブラウザには表示されない。

例) 小なりはエスケープ処理させるために「&gt;」と記述しますが、ブラウザでは「<」とだけ表示される

パーセントエンコーディング

コード化するだけでエンコードで置き換えた文字は全てブラウザで表示される。

例) 「テスト」をパーセントエンコーディングすると「%E3%83%86%E3%82%B9%E3%83%88」に置換されます。

パーセントエンコーディングの場合には「文字列を別の文字列に置き換える」とも言えます。

エスケープ処理はURLで使われることはありません。

またHTMLフォームで送信する際にPOST送信した場合には、このパーセントエンコーディングが使用された状態で送信されます。

デコード処理

Webアプリケーションでエンコードされた文字を読む場合には、そのエンコーディングされた文字を復元しなければなりません。

これを「デコード処理」といいます。

基本的にデコード処理は「%xx」という形に処理されている文字の%を除去し、「xx」の部分をコード表に則って再度変換します。

パーセントエンコーディングの用途

Chromeなど有名ブラウザには既に自動エンコーディング機能があるものも多いため、URLに日本語を入力しても自動で認識されますのであまり意識している人はいないかもしれませんが、URLには2バイト文字である日本語は使用できません

このため、実はパーセントエンコーディングはたくさんの場所で使用されています。

例えば以下のようなURLも、実際にはブラウザは「https://ja.wikipedia.org/wiki/%E3%82%A8%E3%83%B3%E3%82%B3%E3%83%BC%E3%83%89」でURL検索をしています。

日本語で表示されている部分は、ブラウザがURL検索を実行した後で自動デコードし、2バイト文字に置き換えているだけというわけです。

エンコードできないケースも…

エンコード出来ない文字列というものもケースとしては存在しますので簡単に解説してみたいと思います。

例えば銀行系のローンでよく見かける「金利0.1%20年固定」のようなフレーズです。

これは二重エンコードと呼ばれています。

この状態でエンコーディングすると「%20」がスペースキーと認識されてしまうため、デコードした際には「金利0.1 年固定」となってしまいます。

まとめ

いかがでしたか?

今回は文字エンコードとパーセントエンコーディング(URLエンコーディング)について解説してみました。

同じエンコードでも全く性質が異なるこの二つですが、間違った知識が頭に入っていると参考書などを読む際に認識のずれが生じ、思うように学習がはかどらないこともあります。

初めのうちは覚えることが多く、技術よりは理論や用語が学習の主となりますが、ここでしっかりと基本的な部分をマスターしておくように心がけましょう。

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか?

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。