prototype.jsからjQueryに移行するたったひとつの冴えたやりかた
どうもこんにちは、os0xです。
実は(Twitterに書いただけで)ブログに書いてなかったのですが、3ヶ月ほど前からクックパッドで働いています*1。なんかもう今更ですよね、すみません。
さてさて、クックパッドですが、つい一昨日までprototype.jsを使っていました。で、昨日jQueryへの移行をリリースしたところだったりします。
というわけで、その辺の話を少し書いてみたいと思います。
そもそも、なんでjQueryに移行するのか
まあ、prototype.jsとjQueryどちらを使うかと問われたら、大抵の人はjQueryと答えますよね。確かにjQueryの使いやすさは魅力的です。使いやすいということは、みんなでjQueryを使ってサービスを作ることができます。特定の誰かに依存してボトルネックになったりすることがないなら、それは素晴らしいですね。
しかし、ライブラリを変えるのは簡単なことではありません。JavaScriptのテストがしっかり書かれているなら安全に移行できるかもしれませんが、まあ、それは期待できないでしょう(というか、そのテストがライブラリに依存してたり)。
本当にそのコストをかけてまでjQueryへ移行するメリットはあるのか、というのが実際的な問題です。
ただ、コストが問題というのなら、簡単にprototype.jsからjQueryに移行できるなら、それをしない理由はないというわけです。
prototype.js依存をなくす
jQueryとprototype.jsは共存できますが、共存させるということはつまり両方に依存するということです。一度両方に依存してしまうと分離はまた面倒なことになります。なので、動くようになるまで多少大変でも完全に切り替えてしまったほうが良いでしょう。
prototype.jsからjQueryへの書き換えは割と単純で、例えばAjax周りだと、次のようになります。
new Ajax.Request(url, { onSuccess: function(response) { // } });
jQuery.ajax({url:url, success:function(response){ // });
new Ajax.Updater('id', url, { parameters: params });
jQuery.ajax({ url:url, data:params, success:function(response){ jQuery('#id').html(response); });
他にも、
- Element → jQuery().show/hide...
- Event → jQuery().bind
- $('id') → jQuery('#id')
- $$('#id .class') → jQuery('#id .class')
- $A(arguments).each(function(){}) → jQuery.each(arguments,function(){})
- $H({}).each(function(){}) → jQuery.each({},function(){})
といった感じで割と簡単に書き換えできます。$とかEventとかAjaxとかキーワードがあるので、割と機械的にいけるはずです。
ちなみに、あえてjQueryは$を使わずにjQueryと書いたほうが書き換えたことが分かりやすくなるのでお薦めです。
コードの量にもよりますが、この作業自体はそれほど大変ではないと思います。
jQueryで正しく動いているかの検証
さて、最大の問題はjQueryに書き換えたコードが正しく動いているかどうかの検証です。どうしてもバグを作ってしまうはずなので、以下にしてそれを検知するかが課題となるわけです。
そこで、役に立つのがwindow.onerrorです。FirefoxとIEではwindow.onerrorを定義しておくと、ページ内で起きたすべてのJavaScriptエラーを捕まえてくれます。Firefoxでは(new Errorで)スタックも取れますし、IEでは呼び出し元関数を取れたりするので、デバッグに必要な情報を集めることができます*2。
