2015年12月28日

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

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

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

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

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

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

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

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

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

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

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

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

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

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

記事一覧

MonacaアプリでReactを使ってみよう

前の記事へ

Amazon Mobile Analyticsを使ってアプリ利用状況を解析しよう

次の記事へ