doodle RSS Feed
さて、なんだかヘンテコなタイトルですが、結構ハマっていた問題が解決したので備忘録として残しておきます。
JavaScriptでdocument.write('＜script type=text/javascript＞･･･');てな感じでJSからJSを吐き出して表示させるプログラムを書いていたのですが、なぜかその中に書いた関数が一向に呼び出せない（not definedが返る）で、ずっと困っていました。
ロジック的にはどこにもエラーはなく、もちろん単体を切り出して実行すればすんなり動くしで、ほとほと困り果てていたわけですが、先週なにげにこの方に相談したところ、彼の経験値であっさりと解決しました。
よくJavaScriptを書くときは、それを読めないブラウザのために（ってこの時代もうほとんどないと思いますが(^^;;）
＜！--
〜
--＞
でHTML的にエスケープするのが慣例として残っているわけですが、これを
document.write('＜！--');
で一切改行コードなしに出力してしまうと、document.writeした内容そのものがすべてエスケープされてしまい、関数が見えない（スコープ外になってしまう）という現象のようです。（HTMLやJavaScriptは改行コードとは無縁のはずだからバグ？）
ちなみに＜！--の代わりにCDATAセクション（＜！[CDATA[）にしても結局「！」でエスケープされてしまうからなのか、結果は同様に動かないので、データ中に改行コードも付加するか、もしくは、document.writelnを使って明示的にJavaScriptとして改行コードを付加すると動いてくれます。
そもそもそんなコードは書かないと思っている人は無関係・・と思いがちですが、ことはそう単純ではないと思います。
マッシュアップサイトを作る場合でなくても、いまやデータ取得はAPI経由でXMLやJSON（P）でやり取りするケースが多いかと思いますが、データを読み込んだ際にデータ中に＜！--やCDATAセクションが存在する可能性も充分にあるわけで、それをJavaScriptで吐き出すロジックも決してレアではありません。その際に余計な改行コードを除去するロジックなどを処理系側でいれてしまっていたりすると思わぬところでハマったりします。
ちなみにこの問題もFireBugでメモリ上のロジックを可視化できたからすぐに検証できたともいえますが、
「見えるか見えないか」はFireBugのデバッグコンソールから
alert(hoge);
のような感じで確認・検証はできるものの、それが「なぜ見えないのか」まではわからないわけです。
FireBugは便利ですが、いくらロジックを追っても解決しない問題は、やはり長年の経験値がものを言うんだなと改めて感じました。
ちなみにFireBugのプラグインでFirecookieというのがあります。これすごく便利ですので入れておいて損はないです。
FireBugをもってしてもcookieの内容まではリアルタイムには追えないわけですが、これがあると今までキャッシュをわざわざ確認しなければ可視化できなかった内容がリアルタイムでつかめます。こんな感じです。
特にAjaxなコードで何らかの状態をcookieで制御するようなコードを書いている場合、「今」どんな値なのかだけではなく、更新処理で値が変わる「前」と「後」のデータをリアルタイムで追えるのか追えないのかでデバッグの効率がだいぶ変わってきます。
さらにFirePHPというプラグインもあるのですが、これはまだ試していません。なんでもPEAR経由でサーバ側にデバッグコードをヘッダに埋め込めて、それをFireBugで確認できるようです。
Extのフロリダトレーニングのときに、向こうの講師はデバッグをすべてFireBug上で完結させていましたが、さすがにサーバ側ロジックは無理だろうと思っていたのですが、これがあることでほぼクライアント側だけで済んでしまうことになります。
もはや「コード直してFTPしてリロードして試して・・・」なんてフローは完全にオールドスタイルになってしまったんだなと痛感しますね。お恥ずかしながら・・・（＞＜）
