【HTML】文字コードについての知識を増やす。utf-8にまつわるあれこれをわかりやすく解説。
  • facebookページ
  • twitterページ
  • 2020.03.30

    【HTML】文字コードについての知識を増やす。utf-8にまつわるあれこれをわかりやすく解説。

    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と認識されたり文字化けを起こしたりと様々なエラー的挙動となります。

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

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

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

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

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

    文字コードの設定方法

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

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

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

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



    優良フリーランス案件多数掲載中!
    フリーランスエンジニアの案件をお探しなら
    ポテパンフリーランス

    この記事をシェア

    • Facebookシェア
    • Twitterシェア
    • Hatenaシェア
    • Lineシェア
    pickup









    ABOUT US

    ポテパンはエンジニアと企業の最適なマッチングを追求する企業です。

    READ MORE