Q:JavaScriptの一番難しいところは?
A:Microsoft Internet explorerでもまともに動くようにすること
…と、思わずTwitterでツイートしてしまいました。
自宅ではMac+Safari、ときどきFirefox、という環境でJavaScriptのコードを書いて、一通り動くようになったことを確認して、今日はそれを仕事場のMS-Windows環境に持ち込んで。
普段使いのFirefox、大丈夫。ときどき使うChrome、大丈夫。なぜか最近不安定なSafari、大丈夫。
よし、これで公開できそうだな、と思っていたときに、OSにくっついてたブラウザの存在を思い出し、一応念のため、と動かしてみたら。動かないorz。
JavaScriptを学びはじめて日が浅いこともあり、基本的なところで非互換なことをしてしまったのだろう、と解析をはじめたところ。evalで失敗していました。
PHPで生成したJavaScriptのオブジェクトを文字列で受けてそれをevalするというもので、要は下記のようなことをしたいだけ。
var s = "{ foo: 'FOO', bar: 'BAR' }"; // 実際はPHPが生成した文字列を非同期通信で受け取っている eval("var result = (" + s + ")"); document.write(result.foo);
どうやったらこれがエラーになるんだろう?
マルチバイト文字が混ざっている場合、evalする文字列のキャラクタセットがコードが動作している環境のキャラクタセットと合っていないと評価に失敗するらいしい、ということは判明。たとえば、次のようなコードをUTF8で書いて、キャラクタセットを指定しなかった場合評価に失敗した。
var s = "{ foo: 'ふー', bar: 'ばー' }";
ここで一行、キャラクタセットの指定を追加するときちんと評価できるようになった。
<meta http-equiv="Content-Type" content="text/http; charset=utf-8" />
SafariやFirefoxやChromeは何事もなかったように評価してしまうけれども、ここでエラーになるのはわからなくもなく。
でも、それを踏まえてあらためて実際にエラーになった箇所を見直してみると、マルチバイト文字を使っていなくてもエラーになっている。
なぜ?
ネットで検索をかけても類似の事例がなく。ということはなにか根本的なところで誤りをしているに違いなく。
Webアプリケーションの開発で、なにかとIEが槍玉に挙げられているのは知っていたんですが、これはたしかにきつい。今回の件、JavaScriptのエラーは上記だけですが、CSSでもIEだけ挙動が違っていて表示がおかしなことになっていたり。
対外的にサービスを提供することを仕事にしている人たちの苦労の断片を、ようやくかいま見た気分です。