背景

WEBシステム構築をしていたところ、Google Chromeブラウザに表示される文字が文字化けが生じました。
原因は単に、UTF-8で記述されていたscriptを読み込んでいる元のHTMLのmetaタグでの文字コード指定が、'uft-8'というタイポにより、ブラウザがscriptの文字コードをUTF-8ではない異なる文字コードとして認識されたためでした。
(当該部分を修正した結果、文字化けは収まりました。）

シーケンス図

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Sample Page</title>
    <script src="/static/js/sample.js" charset="uft-8"></script>
</head>
<body>
    <input type="button" value="クリックしてください" onclick="myFunction()" />
    <div id="result"></div>
</body>
</html>

sample.js

function myFunction() {
    document.getElementById('result').innerHTML = 'ボタンが押されました';
}

調べたこと

スクリプトの文字コードを指定する方法は3つほどあった。

案1,scriptタグにcharsetをつける
案2,scriptタグが記載されているHTML側のをつける
案3,scriptタグのレスポンスのヘッダのConten-Type:にcharset=を付与し、文字コードを認識させる。（WEBサーバ側のmimeタイプ毎設定で、charsetをセット固定化等が必要。）

今回は案1で実装し、タイポを修正した。

気になっていること

HTML Living standard を見たところ、

For example, scripts with their type attribute set to "text/javascript; charset=utf-8" will not be evaluated, even though that is a valid JavaScript MIME type when parsed.
と記載があるので、案1,は将来的に廃止になるかも。

案2,は、scriptタグを記載しているHTMLの文字コードとJavaScriptの文字コードが一致していることが条件。
案3,については、同サーバ内にあるJavaScriptが文字コードの一致が必要になる。基本UTF-8だと思うけど、個別JavaScriptを実装する場合は案1しかないのかな。（まだ調べられてない。）

あとは、案4として文字コードをそもそも、明示的に指定せず、ブラウザのデフォルトに従う方法もあると考えたが、多種多様のブラウザのデフォルトの仕様に任せるのも気になる。
そもそも、デフォルトのエンコードって何だろうと調べたが、今日はここまで。。。悩まれている先人がいらっしゃったので記録しておく。