JavaScriptで陥る罠：文字化け-htmlと外部jsの文字コードが異なる場合

JavaScriptで陥る罠として、呼び出し元の HTML 文書の文字コードと外部 JavaScript ファイルの文字コードが異なる場合、外部 JavaScript ファイルに記載した日本語などの文字が文字化けして読めなくなることがあります。

私自身も今しがた「HTML Reference Link Generator」にて機能追加を行った際に、その問題を発生させました。



HTML文書本体は UTF-8 で記載していましたが、外部 JavaScript ファイルが Shift-JIS になっていたため、外部 JavaScript ファイルに記載した日本語文字列を HTML 文書本体で表示した時に、文字化けして読めない状態になりました。


この問題の解決策は 2 つあり、以下の方法を取ることで解決できます。
(1) HTML文書本体と外部 JavaScript ファイルの文字コードを統一する
(2) 外部 JavaScript ファイルの読み込みタグに charset 属性を追加し、外部 JavaScript ファイルの文字コードを指定する。


今回は(1)の文字コードの統一にて解決しました。
HTML文書本体と外部 JavaScript ファイルの両方に手を加えられる場合には、文字コードが混在しているのは思わぬ問題を発生させることにつながりかねないので、統一しておいた方が良いでしょう。

逆に、HTML文書本体と外部 JavaScript ファイルの両方に手を加えることができない場合には、(2) の外部 JavaScript ファイルの文字コードを charset 属性にて指定する方法を取るとよいと思います。
例えば、外部の第三者のサーバの JavaScript ファイルを利用している場合などです。

参考文献

HTMLとJavaScriptの文字コードが違うときの対処法 - [JavaScript + JavaScript] ぺんたん info
http://pentan.info/javascript/charset.html

TROUBLE 09 JavaScriptの実行結果が文字化けしてしまう - MdN Design Interactive
http://www.mdn.co.jp/di/articles/2231/?page=4