jQueryから離れるためのJavaScript代替ライブラリまとめ

jQueryは便利すぎて、ついつい他のフレームワークを使いながらも一緒に組み合わせて使ってしまったりします。その結果として読み込むサイズが肥大化したり、動作が重たくなったりします。特にスマートフォンのようにリソースがデスクトップほど潤沢でない場合は顕著です。

 

そこでjQueryから離れて代替ライブラリを使ってみましょう。多くのライブラリはjQueryを踏襲して似たような使い方ができるようになっています。

 

Minified.js

 

 

jQueryのようにDOM操作、アニメーション、イベント、HTTPリクエストをサポートしています。また、コレクション、日付や数字のフォーマット、テンプレートといった便利ユーティリティも備えています。

 

サイズは4KB(ミニファイ&Gzip)で、jQuery 2.1.4の29KBに比べて大幅に軽量です。

 

Minified.js – A Truly Lightweight JavaScript Library

 

cash

 

 

DOM操作に特化したライブラリで、eachが用意されている程度となっています。その結果、サイズはわずか2.59KB(Gzip後)となっています。Ajaxやイベントの取り回しは別なライブラリで行うならば十分と言えそうです。

 

cash

 

honza/140medley

 

140medleyはさらに小さくGzipすると504 byteになります。DOM、Ajax、イベントのバインド、ローカルストレージ、テンプレート機能があります。

 

honza/140medley

 

julienw/dollardom

 

$domはDOMの選択、スタイル設定、アニメーションといった機能を提供します。開発は終了しており、メンテナンスモードになっています。

 

julienw/dollardom

 

ryanflorence/snack

 

DOM操作、イベント処理、Pub/Sub、Ajax、そして各種ユーティリティが提供されています。Gzip後のサイズは3.4KBと機能の割に多くの機能が実装されています。

 

ryanflorence/snack

 

Zepto.js

 

 

jQuery代替のライブラリとしては最も互換性が高いと思われるライブラリです。レガシーなブラウザ対応を切ることでサイズを小さくまとめています。

 

Gzip後のサイズは9.1KBと他のライブラリと比べると大きめですが、jQueryとそのまま差し替えても殆どの場合で動く機能の豊富さや互換性の高さを考えるとしょうがないと言えそうです。

 

Zepto.js: the aerogel-weight jQuery-compatible JavaScript library

 

You Might Not Need jQuery

 

 

ライブラリではなくjQueryを使わない書き方を教えてくれるサイトです。アニメーションにおいても簡単なコードでjQueryのような操作ができるのが分かるはずです。

 

You Might Not Need jQuery

 


 

jQueryは確かに便利なのですが、意外と使っていない機能の方が多いのではないでしょうか。そうなると多くの機能はムダになってしまいます。DOM操作やAjaxで使いたいという要望であればもっと軽量なライブラリを選んでも良いでしょう。

 

特にスマートフォンやタブレット向けであればHTML5のみが対象になるので切り捨てられるコードは多くあります。ぜひjQuery以外の選択肢も見てみてください。