みなさんこんにちは！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における「文字コード扱い方」について解説しました。文字コードの知識があると、プログラムを書いている際にとても役に立つので覚えておくと便利です。
皆さんもこの記事を通して、文字コードに関する知識をどんどん深
