【JavaScript入門】文字コードの扱い方まとめ

みなさんこんにちは!Kotonoです。今回はJavaScriptにおける「文字コード」の扱い方について解説していきたいと思います。

この記事では

  • 文字コードとは
  • 文字コードを取得する方法

などといった基本的な内容から

  • 文字コードの変換方法
  • 外部ファイルを使用する際の注意点

など、より発展的な内容に関してもわかりやすく解説していきたいと思います。

文字コードとは

みなさんは「文字コード」が何かわかりますか?文字コードとは、コンピューター内部において文字を表すための規約です。

つまり、コンピューター内部では数値のみが扱われるため、文字にはそれぞれ数値が割り当てられるのです。文字コードは複数種類存在するので、文字から数値への変換方法はひとつではありません。違う文字コードを使用すれば、同じ文字でも違う数値に変換されるのです。

主な文字コードは

  • ASCII
  • Unicode
  • Shift-JIS

が挙げられます。

ASCIIコードは、英数字と一部の記号のための文字コードです。もっとも基本的な文字コードとして全世界に普及しているものです。

Unicodeは、全世界の文字に適用する目的で作成された文字コードです。Unicodeは様々な種類が存在し、UTF‐8は日本語を使用する際の文字コードとして利用されています。

Shift-JISは日本語の文字のための文字コードで、日本語を使用する際には最も一般的に普及している文字コードのひとつです。

みなさんも、上記のうちのひとつくらいは聞いた事があると思いまが、文字コードについての知識があるとプログラミングにおいてとても役に立つので、覚えておいて損はありません。

文字コードを取得する方法

では早速、ウェブページの文字コード取得する方法をご紹介します。ウェブページの文字コード判別には、ドキュメント内のcharacterSet属性を使用します。

以下のコードをご覧ください。

<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <script>
            function myFunction1() {
                    var x = document.characterSet;
                    console.log(x)
            }
    
myFunction1();    
        </script>
    </body>
</html>

実行結果は以下の通りです。

UTF-8

上のコードでは、まずはコードの冒頭に、HTMLドキュメント内のmeta要素のcharset属性にUTF-8と指定しました。こうすることで、ドキュメントの文字コードを設定しています。

そして、簡単な関数myFunction1を作成しました。myFunction1は、変数xにドキュメント内のcharacterSet属性の値を格納し、それをJavaScriptコンソールに表示させています。

実際、コンソールに表示されたのは指定した通り「UTF-8」です。

文字コードの変換方法

このセクションでは、数値から文字へ、文字から数値への変換を行う方法をご紹介したいと思います。これからご紹介するサンプルコードで使用する文字コードは「Unicode」です。

Unicode値から文字へ

ではまず最初に、Unicode値である数値から文字への変換を行ってみましょう。

以下のコードをご覧ください。

<html>
    <body>
        <script>
            function myFunction2(num) {
                    var x = String.fromCharCode(num);
                    console.log(x)
            }    
            myFunction2(97);
        </script>
    </body>
</html>

実行結果は以下の通りです。

a

上のコードでは、StringオブジェクトのfromCharCodeメソッドを使用し、数値から文字に変換しました。fromCharCodeメソッドは引数に変換したい数値を指定するのみの、シンプルなメソッドです。

上のコードでは、変数xにfromCharCodeメソッドの戻り値である文字を格納し、それをJavaScriptコンソールに表示させました。実際、97は小文字の英字aなので、コンソールにaと表示されました。

文字からUnicode値へ

では次に、文字からある特定のUnicode値への変換を行ってみましょう。

以下のコードをご覧ください。

<html>
    <body>
        <script>
            function myFunction4(str) {
                    var x = str.charCodeAt(0);
                    console.log(x)
            }    
myFunction4("Hello");    
        </script>
    </body>
</html>

実行結果は以下の通りです。

72

上のコードでは、charCodeAtメソッドを使用し、文字を数値に変換しました。charCodeAtメソッドの構文は「任意の文字列.charCodeAt(位置)」です。

上のコードの場合、任意の文字列はHelloと指定し、数値に変換したい文字は一番目(配列の0番目)のHと指定しました。すると、コンソールには大文字英字のHを表す数値である72と表示されました。

外部ファイルを使用する際の注意点

外部ファイルを使用する際、JavaScriptコードがhtmlファイルとは違う文字コードを使用している場合、文字化けが起きてしまうことがあります。

このような現象の詳しい解消方法については、以下のリンクを参照してください。

【JavaScript入門】外部JSファイルを読み込んでみよう
更新日 : 2019年5月13日

まとめ

今回はJavaScriptにおける「文字コード扱い方」について解説しました。文字コードの知識があると、プログラムを書いている際にとても役に立つので覚えておくと便利です。

皆さんもこの記事を通して、文字コードに関する知識をどんどん深

LINEで送る
Pocket

ITエンジニアへ転職したい方におすすめ

自分を評価してくれる企業に転職して年収を上げたい! 自分のスキルにあった独自案件を知りたい!
エンジニアは今もっとも注目されている職業の1つ。エンジニアになって年収を増やしたい方や、あなたのスキルに見合った企業へ転職したいエンジニアの方も多いですよね。

しかし、大手の転職媒体は扱う求人数が多くても、誰もが登録しているので競争率もかなり高くなっています。そのため、あなたの条件に見合った企業を見つけても転職するためには、相応の努力とスキルが必要となります。

こういった媒体では、未経験からエンジニアを目指す方やエンジニア歴2〜3年で転職を考えている方にとって、最適な転職環境とはいえません。

そこでオススメしたいのが、未経験者や若手エンジニア向けの独自案件を多く掲載している「侍ワークス」です。

侍ワークスは、独自案件を多く掲載しているだけでなく、

・応募から就業まで一貫したサポート

・就業後もアフターフォロー

といった経験の浅い方や初めてエンジニアを目指す方にも安心のフォロー体制が整っています。もちろん登録は完全無料!しかも案件を見るだけなら登録も不要です。

まずは、お気軽にどんな求人があるか見てみてください。あなたにピッタリの企業がきっと見つかりますよ! 侍ワークスの求人情報を見る

書いた人

Kotono

Kotono

イタリア在住15年目の22歳です。イタリアの大学で情報科学&応用数学を学んでいます。主にJavaScriptやPythonについての記事を書いたりしています。