文字コードが異なる外部スクリプトファイルの読み込み指定。

HTMLファイルやXHTMLファイルの中に直接JavaScriptを記述するのではなく、外部ファイルとしてJavaScriptを書きHTMLファイルにいざ読み込む際、1点注意する必要があるのが「文字コード」です。

ちょっと確認のため、まとめておきます。

外部JavaScriptファイルの読み込みについて

以下で、「読み込み方」と「文字コード」についてまとめてみました。

外部ファイル化したjsファイルを読み込み

HTMLファイル内でJavaScriptを実行したい位置に"script>要素を記述することは直接スクリプトを記述する際と変更ないのですが、img要素のようにscript要素のsrc属性を使って外部jsファイルのパスをURL形式で指定します。

こんな感じです。

<script type="text/javascript" src="外部jsファイルのURL"></script>

これでまずは外部ファイル化はOKです。

読み込む側の「HTMLファイル」と読み込む「外部jsファイル」の文字コードが異なる場合の対処法

自分でJavaScriptを書いているのであれば、HTMLファイルとjsファイルの文字コードを例えば「UTF-8」などに合わせていると思います。

しかし、ライブラリ・プラグインなど、他者が記述したjsファイルをDLしてきて利用する場合、必ずしも文字コードが同じであるとは限らないですよね。

そうした場合の対処方法です。

こうした場合は、<script>要素の「charset属性」に外部jsファイル側の文字コードを指定することで回避できます。

日本語の文字コード3種類別に並べてみました。

外部jsファイルの文字コードが「utf-8」の場合
script要素に添えるcharset属性は「charset="utf-8"」
外部jsファイルの文字コードが「shift_jis」の場合
script要素に添えるcharset属性は「charset="shift_jis"」
外部jsファイルの文字コードが「euc-jp」の場合
script要素に添えるcharset属性は「charset="euc-jp"」

そんなに難しく考える必要はないですね。

シフトジスは、アンダースコア「Shift_JIS」とハイフン「Shift-JIS」はどちらが正しいか

ときどきWebを制作してて困るのが、2つの方法でうまくいく場合、"本当に正しい"のはどちらなの?ってところですね。

今回取り上げた文字コードの件も、"シフトジス"について、下記のどちらでも文字化けせずにうまく表現されます。

  • アンダースコア「Shift_JIS」
  • ハイフン「Shift-JIS」

ただ、仕様として正しいのは『アンダースコア「Shift_JIS」』の方ですので念のため覚えておきましょう。

関連するWeb制作・開発Tips

関連リンク