今でもjQueryを使っていますが、どれくらい使われているのか調べたところ、正しい情報か分かりませんが世界で約7200万サイトぐらいのようです。意外と多くて驚きましたが、$の使い勝手の良さ、ライブラリの豊富さ、サンプルの多さ、制作コストの短縮が決めてなのでしょうか？詳しいことは不明ですが何かしらの理由で頻繁に利用されているようです。
私の場合は「案件によって使い分ける。使えるものは使う。」という考え方なので脱jQueryなどは考えていませんが、ファイルサイズが巨大なjQueryは何かと気になります。
そこで現場で使用されているjQueryの機能で必要なのものを調べてみたところ、$()（セレクター関数）、.css()、.slidedown()、あとはページ内のアンカージャンプ（スムーススクロール）で.animate()を使っているぐらいでした。もちろん1つか2つのjQueryプラグインは使っていますが、jQueryが不要なライブラリに置き換えることが可能でした。90KB近いjQueryの僅かな機能しか使用しておらず、これなら$()と.css()が使えて、他は代替えライブラリを探すか自作すればファイルサイズを大幅に削ることができそうな感じです。
調査したところいくつか候補はありますが、jQueryとほぼ同じ構文が使用できる Cash が良さそうでした。
Cash
Cashはミニファイで16KB、ミニファイ＋Gzipで6KBと超軽量です。超軽量な理由は頻繁に使う関数だけに絞られおり、.animate()や.ajax()が使えず、古いブラウザをサポートしていないことがコード縮小に繋がっているようです。jQueryからの移行ガイドを見てみるとクリティカルな部分は少なそうですがどうでしょうか。
実際にCashを入れていくつかのjQueryプラグインを使ってみたところ、.scrollTop() や:hiddenが実装されていないのでエラーになったり様々な不具合に遭遇しました。たぶん殆どのjQueryプラグインで何かしら問題が発生すると思いますが、拡張は可能なので足りない処理を追加して対応させることができそうでした。
不足機能の代替えを検討
ネイティブで実装するのが一番軽量になると思いますが今回はライブラリを使って検討してみます。
Cashには.ajax()がないため非同期通信を行う場合ライブラリはaxiosになるでしょうか。 ファイルサイズは約17KBです。
ページ内アンカージャンプなどで使用するスムーススクロールはsmooth-scrollで、ポリフィルを含んだ場合のファイルサイズは約7KBです。.slidedown()の代替えはdom-sliderという3KBぐらいのライブラリで対応できそうです。.fadein()もあった方が便利そうなので追加を考えても+3KBぐらいでしょうか。cssで対応する方が良さそうな気もしますが…。
これですべてを合計すると、16KB + 17KB + 7 KB + 3KB + 3KB = 46KB です。これにCashで足りない機能や独自実装を追加しても約50KBで収まりそうな感じがします。
また静的Webサイトだと非同期通信が不要になる場合もあるので、差し引くと約33KBで必要最低限のライブラリ群が出来上がりそうです。なかなか軽量化できるのではないでしょうか。
まとめ
Cashを使用すれば全体のファイルサイズを小さくできますが、今まで使用してたjQueryプラグインが使えなくなると思った方がよく、代替えのライブラリを検討したり再実装を行う必要性がでてくる可能性が高いです。
最終的に制作コストに繋がる話になるため導入が難しいところですが、Cashの機能で要件を満たせそうであれば検討する価値はありそうです。
余談…
本題とは外れますが調査途中で見つけたAlpine.jsというフレームワークが気になりました。Vue.jsをコンパクトにした感じで、覚えることも少ないのでちょっと使ってみたいと思いました。
コメント