jQueryの終わりの始まり

この「スライダー」は、今朝がた、d3.js( D3 )作者のマイクさんのアップされたデモ「Brush as Slider」を、そのままサイズ縮小したものです。

※モダンブラウザ対応(IEでは完全に表示されません)。

こちらのソースを見ればわかるとおり、css と script 部分を分離してパラメータをいじっただけで、基本マイク氏のデモと同じ内容です。

マイク氏のデモ:Brush as Slider

D3を知らない人が見れば、一見、なんの変哲もないUIコンポーネントのデモに見えるかもしれません。しかし私は、このデモにも、D3 作者のある意志を感じます。

このデモは、直接的には D3 の SVG コントロール(brush)のデモですが、もう少し広く言うと、D3 による SVG(と DOM )の操作、イベントや CSS 操作のデモにもなっています。

つまり、D3 の本領とするデータに基づくDOM操作や、インタラクティブなマップ表示・操作のデモではなく、従来 jQuery が本領としていた DOM(実際にはここでは SVGDOM)・イベント・CSS 操作のデモなのです。

D3 の登場以来、たびたび「D3 vs jQuery」的議論、あるいは疑問がネットに挙げられてきました。

その疑問へ返される回答は、常に一種の棲み分け理論でした。

  • いわく、jQueryは汎用目的のツールであり、D3 はデータドリブンなグラフ作成ツールである、
  • いわく、jQueryは DOM 操作が得意であり、D3 は SVG 操作が得意である、
  • いわく、jQueryはブラウザ互換性を重視したライブラリであり、D3 はモダンブラウザに特化したライブラリである

生態学では、二つの種が同じ生息域で棲み分けるためには、それぞれの種が独立して生活圏を確保するためのニッチが必要とされます。しかし D3 と jQuery の場合、そもそも棲み分けるにはニッチが重なり合い過ぎているのではないでしょうか。

そして今回のデモのように、D3 が従来不得手としてきた( jQuery が得意としてきた)分野で機能強化を続け、SVG 操作や TopoJSON と連携したジオメトリ処理のように jQuery が不得手とする分野では、D3 が圧倒的強みを発揮し、なお発展しています。

JavaScript プログラマが jQuery を使うのはどのような場合だったでしょうか?おそらく、

  1. ブラウザ互換性の吸収
  2. DOM/イベント/CSSの操作
  3. アニメーション表示
  4. ajax などの非同期処理
  5. 宣言的処理を行う jQuery 関数(each()等)の使用
  6. 豊富なjQueryプラグインの利用

のうちのどれかでしょう。

1 に関しては、D3 より jQuery に圧倒的に長があります。D3 はその出自から、レガシーなブラウザ(現実に即して言えば IE の旧版)を切り捨てて誕生しました。ブラウザ間の互換性が問題になる分野では jQeury を使わざるを得ない局面が多いでしょう。

しかし世はモダンブラウザへと急速に移行しつつあります。モバイル分野はすでにモダンブラウザの独擅場です。jQuery 自体、バージョン2.*の系列ではレガシーブラウザを切り捨てました。モダンブラウザへの推移と共に、この点での D3 のディスアドバンテージは急速に失われつつあります。

2~5 に関しては jQuery と D3 はすでに総合的にはほぼ対等です。SVG DOM 操作に関しては D3 が勝っています。現時点では、個別には jQuery に長のある機能も、個別に D3 がキャッチアップしつつあるのが現在の状況だと思います(冒頭のデモのように)。

6 は、2006年の登場以来、jQuery の積み重ねてきた重みそのものですから、そう簡単に jQuery の優位が失われることはないでしょう。そしてこれこそが、jQuery が中生代の恐竜のようには、一夜にして絶滅することのない根拠ともなるでしょう。

もっとも恐竜が「一夜にして」滅んだというのも、あくまで地質学的スケールでの比喩であり、実際には個体数がピークから半減するのにさえ数十万年を要したと言われています。web地質学的スケールでは、やはり jQueryも一夜にして滅んだ、ということにならないとも限りません。

jQuery も D3 も今や巨大なライブラリであり、どちらかをマスターするだけでもかなりの労力が必要です。その機能のかなりの部分が重複しているとなれば、学ぶ労力もかなりの部分が無駄、ということになります。

実際、D3のヘビーなユーザーはほとんどD3だけでページを作成します。ビジュアルな、インタラクティブな部分も含めてです。マイク氏の大量のデモがまさにその見本です(もっともマイク氏のドキュメントの翻訳ページの一部では、翻訳者(私)の D3 力 の不足から、内心ビクビクしながら jQuery で誤魔化している部分もあります)。

あるいは jQuery開発者が、データドリブンなチャート作成やインタラクティブな地図作成の必要に迫られて D3 の技法を身につけ、その結果、自分が jQuery でやってきたことがほとんど D3 だけでも解決すると気づいたとき、jQuery を使い続ける理由があるでしょうか?

また、D3 も jQuery も(特に後者は)相当に大きなライブラリです。2.0 からは jQuery もカスタムビルドでサイズ縮減が可能になりましたが、CDN利用を考えれば丸ごと使うケースが多いでしょう。ブラウザへの負荷を考えれば、ワンストップで済ませることが可能であれば、それに越したことはありません。

JavaScript のモダンなフレームワーク AngularJS も、基本的に jQuery との同時使用は推奨していません。どうしても jQuery の機能を使いたい場合は、より軽量のサブセット版、jQLiteの利用が推奨されています。

繰り返しますが、jQuery が今後(非地質学的意味で)急速に衰退していくとは思いません。しかし今年 2013 年が jQuery の最後のピークの年であり、今後、徐々にその使用分野を D3 に譲っていく、ということは大いにありうると思っています。


Comments

  • 濱さん より:

    ぉぉ、素晴らしい!
    良い情報をありがとうございます。

    極論ですが、これができるなら、将来フルSVGのHPやサイトが出来るのでは?と思ってしまいます。
    利点は、イラレなどで作ったデザインをSVGに変換すればよく、
    HTMLコーディングの必要がなくなる(かも?)点ですかね。

    そんなワシはSVG推しです。

コメントを残す


二 × 3 =