とあるプロジェクトで、Ajaxを使ったWeb検索プログラムを作っている。

JS側で取得してきたデータをHTML形式の文字列に変換し、jQueryのappendメソッドでDOM要素を検索結果として出力するという仕様だ。

単純な仕様なのだが、appendメソッドで出力したDOM要素が文字化けしてしまった。

原因：ファイル間で文字コードが異なるため

今回のサーバーの仕様上、HTMLファイルは「Shift-JIS」で作らなければならず、どうやらこれが原因らしい。

今回用意したファイルの文字コードは以下のとおり。

ファイル名文字コード
index.htmlShift-JIS
js/scripts.jsUTF-8

「UTF-8」のJSで生成された文字列を「Shift-JIS」ファイルに追加しようとしているので、よく考えると文字化けが起こるのは当然だ。

解決法：JS読み込み時に文字コードを指定

以下のとおりHTML側で文字コードの指定をする。

<script src="./js/search.js" charset="UTF-8"></script>

これで一発で解決した。