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

HTMLをコーディングするコーダーやPHP、Javaなどの言語を扱うプログラマーなら誰しもutf-8やEUC-jpといった文字コードを耳にしたことがあると思います。

でも学習を始めたばかりの頃は種類の違いや、もっと基本的な部分ではエンコーディングとは何か?など疑問は多々あります。

そこで今回はこの文字コード中でも特に、今最も使われているであろう「utf-8」について解説してみたいと思います。

文字コードとは?

文字コードとは、コンピューター上で表示させる文字の一覧だと思ってください。

日本語でもひらがな、カタカナ、漢字など種類がありますよね?

ひらがなであれば50音が1セットですが、文字コードもこういった感じでコードセットがあります。

フォントで言うとフォントファミリーみたいなものです。

コンピューターは全て16進数で認識するという特性があることは誰もが知っていると思いますが、文字に関しても同じことが言えます。

例えば日本語の「あ」も、そのまま「あ」として認識しているわけではなく16進数で認識しています。

utf-8なら「e38181」EUC-JPなら「a4a2」というような感じです。

文字コードの違い

ブラウザ表示で必要となる文字コードですが、もしこれを指定していない場合にはどうなるのでしょうか?

例えば先ほど説明したEUC-JPの「あ」である文字コード”a4a2″は、utf-8では該当コードが存在しないため、ブラウザでは認識できないことになります。

この結果、空白となったりnullと認識されたり文字化けを起こしたりと様々なエラー的挙動となります。

ブラウザ側の文字コードとファイル側の文字コードが異なる場合

このようなエラーを防ぐために、どの文字コードを使用しているのかブラウザに知らせる必要があるわけです。

クロールされる際にも重要

もちろんこの文字コードは検索ロボットがサイトをクロールする際にも活用されます。

ですが先ほども説明したように、文字コードによって文字化けを起こしていたりするとロボットもクロールの対象から除外してしまう可能性があるため、文字コードはしっかりと指定するように心がけましょう。

文字コードの設定方法

では文字コードはどのように設定するかについて具体的に解説します。

次のコードを見てください。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
</head>

<body>
	<h1>文字コードの設定方法について</h1>
	<p>文字コードはhead内で<meta>を使って設定します。</p>
</body>
</html>

文字コードはhead内に<meta>タグを使用し設定していきます。

コードの指定については、大文字でも小文字でも構いません。

色々なサイトでブラウザのソースを表示してみるとお判りいただけると思いますが、”utf-8″以外にも”shift-jis”や”EUC-JP”などが使われているので、環境に応じて設定してみてください。

また、無指定で文字化けを起こしていない状態でも文字設定は必ず指定するようにしましょう。

日本語が扱える文字コード

実際に日本語を認識できる文字コードは全コード中4つしかありません。

今はもう使われなくなったであろう文字コードもありますが、知識として覚えておいて損はありませんのでここで紹介していきます。

utf-8

日本語のみならず、アルファベット、アラビア文字、中国語、ハングル文字、簡体字など全てが表示可能なオールマイティコードで、現在最も使われている文字コードです。

もちろん特殊文字も表示可能です。

HTML構築だけでなくプログラミングの世界でも、この文字コードさえ使っておけば文字化けを起こすことはありません。

ブラウザ推奨環境はほぼ全てutfd-8となっているため、「迷ったらこれにしとけば大丈夫!」というくらいの最強文字コードでもあります。

EUC-JP

昔のプログラミングによく使われていた文字コードです。

Web系プログラミングの代表格であるPHPも今でこそutf-8統合環境が当たり前の時代となっていますが、PHPのバージョンが4辺りまではutf-8と同じくらいEUC-JPが使われていました。

この時代は暗黒時代でもあり、プログラミングは”EUC-JP”でHTMLコーディングは”Shift-jis”というような、今では考えられないような組み合わせが当たり前のように使用されていた時代でもあります。

文字化け対策として常に変換コードを追加で記述していた人も多いはず。

恐らくもっとも文字化け問題でプログラマーが悩まされた文字コードではないでしょうか。

jis

メーラーでお世話になった方も多い文字コードです。

jisコードというのは通称で、正式には「IOS-2022-JP」といいます。

このコードも、昔まだメーラーに種類があまりなくMicrosoft一強だった時代にこちらの文字コードで送信していないメールは全て文字化けを起こしていました。

HTML構築で使うことはまずありませんが、メーラーでは今現在も使われているものがあるのではないでしょうか。

Shift-jis

まだスマホがない時代、ガラケーと呼ばれる携帯電話が最も普及していた時代に使われていたコードで、文字化けの温床として名をはせた文字コードです。

今では一部の製品(Microsoft製品など)でしか見かけないため、知らない人もいるかもしれません。

当然のようにHTML5をこのコードで構築している人はまずいません。

しかしガラケーではこの「最も問題のある文字コード」が基本文字コードとして指定されていました。

文字コードの文字化けを引き起こしてみたい方はぜひともこのコードを使用してください。

BOM(ボム)について

ここまで読み流した方は「文字コードに迷ったらutf-8にすれば問題ない」と認識されているかもしれませんが、偏にそうとも言い切れない場合があります。

実はutf-8には“utf-8″と”utf-8N”という2種類の文字コードがあり、”utf-8N”は「BOM付きutf」と呼ばれ文字化けの原因ともなる事があります。

BOMは正式には「バイトオーダーマーク(Byte Order Mark)」といい、この頭文字をとった略称を指します。

BOMは、テキストデータを読み込む際にunicodeで表現されたデータであるということを示すための数バイトほどのシステム文字(見えない文字)で、windowsとMacのような互換性のないOS間でのやり取りのために存在しています。

具体的な解説は省略しますが、このBOMによって文字化けを引き起こすこともしばしばありますので、一概にutf-8なら大丈夫とも言い切れないわけです。

BOMとそうでないものの判断基準

最近のエディタでは、見た目だけでは判断できない場合が多くあり、実は判断基準が無かったりします。

「じゃぁ回避できないの?」と思われるかもしれませんが、結果から言うと回避できない場合がほとんどです。

もし、保存後にファイルを開いたら文字化けをしていたというような場合の唯一の解決手段は、再度保存形式にutf-8を指定して保存しなおすことで解決することが出来ます。

それでも直せない場合にはエディタを変えるなどしてみるしか方法はありません。

まとめ

いかがでしたか?

今回は文字コード(utf-8)についての解説をしてみました。

今でこそutf-8一択となっている環境がほとんどですが、昔は色々な文字コードが使用されていたため、サイトを作り変える際にはもしかしたらこれらの文字コードに出会うかもしれません。

そういうケースに出会った時に困らないためにも、しっかりと学習をして予備知識を身に着けておきましょう。

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

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

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

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

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

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

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

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

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

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

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