アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

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以外の選択肢も見てみてください。