MS Edge42と古いIEでJS文字化けの原因とその対策方法

2018-06-14

Windows 10 April 2018 Update

このUpdateを適用するとEdgeのVersionも42になってしまいます。
そしてバグも盛り込まれます。
今回のポストはそのバグ一つ、JSの文字化け!
Edge41までは正常だったのがこんな風になります。

左がEdge41、右がEdge42で同じコードを表示させた場合
左がEdge41、右がEdge42で同じコードを表示させた場合

こうなる状況と原因、対策は下記の通りです。

状況

HTMLではcharsetがShift_JISになっていて、JSはUTF-8になっている。

原因

既存ではJSの読み込みでScript宣言後にSrc='...'とcharset='UTF-8'が記述されている。
普通のブラウザ(Edge41以下含む)ならこれ全体を一つのScript宣言として認識するはずであるのに対して、Edge42では順番通り認識するようになっている。
つまり、Src='...'を読み込んた時HTMLのCharset宣言通り、Shift_JISとしてJSを認識した後に、JSのcharsetのUtf-8を認識するも、既にJSはShift_JISとして実行されているので、文字化けを起こしている。

対策

charsetとSrcの順番を変える。
つまり、Script宣言後にcharset='UTF-8' Src='...'と記述する。

コードで見るとこれを

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

このように順番を変える。

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

結論

この問題IE6でもあって、IE7で解消されたものだったような気が。。。
つまり、EdgeはIE6に戻っている!