【JavaScript】 文字化けするとき確認すること
更新日：2020/10/09
JavaScriptで文字化けがおこる原因と対処法をお伝えします。
文字化けする理由
htmlやjsファイルなど、元となるソースコードはUTF-8やシフトJISという形式で保存されています。
JavaScriptはソースコードから読み込んだ文字列を内部データとして取り込む際、UTF-8やシフトJISからUTF-16という文字コード形式に変換します。
しかしJavaScriptは、元のソースコードの文字データだけでは、UTF-8なのかシフトJISなのかという判断ができません。
文字コードがどの形式なのかわからないと、上手くUTF-16に変換できなくて文字化けしてしまうのです。
なお、文字コードについては次のページをみてください。
■UTF-8・16やShift-JISって何？文字コードについて説明してみる
文字コード判断１：応答ヘッダで判断している
文字コードの判断はサーバーから送られてきた応答ヘッダーを参照します。
応答ヘッダーの、content-typeのcharsetが文字コードです。
確認方法は、次のページを見てください。
■応答ヘッダーの確認方法
文字コード判断２：htmlのmetaタグで判断している
応答ヘッダーにcontent-typeがない場合は、htmlのheadタグ内にあるmetaタグが参照されます。
例えば、次のhtmlコードは文字コードがUTF-8であるということを指示しています。
<html>
<head>
<meta charset="utf-8"/>
<script>
alert("JavaScriptで文字列が文字化けする理由");
</script>
</head>
<body>
</body>
</html>
文字コード判断３：自動判断している
応答ヘッダーまたはmetaタグで判断できない場合は、データを精査して自動判断します。
これらの情報から、文字コードがUTF-8であると判断して、UTF-8用の変換アルゴリズムを使用してUTF-16に変換しています。
文字化けの対処法
文字化けする理由がわかったところで、その対処法をお伝えします。
html内のscriptタグ内での文字化けと、外部jsファイルでの文字化けで、それぞれ対処法が異なります。
html内のscriptタグ内で文字化けする場合
対処法：
metaタグとファイルの保存形式が合っていないのが原因なので、タグと保存形式を統一します。
補足：
html内のスクリプトで文字化けがおこるケースはそれほど多くありません。
なぜなら、htmlをブラウザ表示したときに表示される文書が文字化けしているからです。
スクリプトの前に、そちらの現象で驚いて対処しているはずです。
そこでここでは、html文書が文字化けするときの対処法としてお伝えします。
html文書が文字化けする原因は、metaタグと実際の文字コードが異なっていることです。
例えばmetaタグが、次のようにUTF-8となっているとき、
<meta charset="utf-8"/>
次のようにシフトJISで保存したとします。ちなみにWindows10のメモ帳は、シフトJISはANSIという名前になっています。
このとき、htmlファイルをブラウザで表示すると、文字化けします。
タグと保存形式を統一することで、文字化けを防ぐことができます。
この時点で、JavaScriptの文字化けも解消されているはずです。
外部jsファイルが文字化けする場合
対処法：
対処法は二つあります。
- htmlファイルとjsファイルの文字コードを統一する
- 次のように、scriptタグで文字コードを指定する
<script src="./test.js" type="text/javascript" charset="shift_jis"></script>
補足：
外部jsファイルが文字化けするのは、htmlファイルとjsファイルの文字コードが一致していないのが原因です。
ファイルの文字コードを統一するか、jsファイルの文字コードを明示することで文字化けを解消できます。
更新日：2020/10/09
関連記事
スポンサーリンク
記事の内容について
こんにちはけーちゃんです。
説明するのって難しいですね。
「なんか言ってることおかしくない？」
たぶん、こんなご意見あると思います。
裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。
掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。
ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php
このサイトは、リンクフリーです。大歓迎です。
