読者です 読者をやめる 読者になる 読者になる

prototype.jsからjQueryに移行するたったひとつの冴えたやりかた

どうもこんにちは、os0xです。
実は(Twitterに書いただけで)ブログに書いてなかったのですが、3ヶ月ほど前からクックパッドで働いています*1。なんかもう今更ですよね、すみません。
さてさて、クックパッドですが、つい一昨日までprototype.jsを使っていました。で、昨日jQueryへの移行をリリースしたところだったりします。
というわけで、その辺の話を少し書いてみたいと思います。

そもそも、なんでjQueryに移行するのか

まあ、prototype.jsjQueryどちらを使うかと問われたら、大抵の人はjQueryと答えますよね。確かにjQueryの使いやすさは魅力的です。使いやすいということは、みんなでjQueryを使ってサービスを作ることができます。特定の誰かに依存してボトルネックになったりすることがないなら、それは素晴らしいですね。
しかし、ライブラリを変えるのは簡単なことではありません。JavaScriptのテストがしっかり書かれているなら安全に移行できるかもしれませんが、まあ、それは期待できないでしょう(というか、そのテストがライブラリに依存してたり)。
本当にそのコストをかけてまでjQueryへ移行するメリットはあるのか、というのが実際的な問題です。
ただ、コストが問題というのなら、簡単にprototype.jsからjQueryに移行できるなら、それをしない理由はないというわけです。

prototype.js依存をなくす

jQueryprototype.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

まとめ

というわけで、まとめとしては両方依存は避ける・なるべく機械的に書き換える・エラーを検出してデバッグといった感じです。

さて、クックパッドのjQuery移行は今後のための布石に過ぎません。これからユーザーのためのサービスをどんどん開発して行きたいと思っています。
[PR] クックパッドではエンジニアを絶賛募集中です
というわけで、クックパッドで一緒に開発しませんか?もし興味を持って頂けたなら、まずはクックパッドに遊びに来たりしてみるといいんじゃないでしょうか。お待ちしています!

*1:この展開、最近どこかで見ましたか?きっと気のせいです。

*2:ちなみにちょうど今日、WebKitもエラーを捕まえられるようになりました[http://trac.webkit.org/changeset/76216:title]