jQueryの代替ライブラリとして「min.js」がオススメなので紹介する
jQuery不要論が出て久しいですが、趣味でWEBサイトを作っていると、Vue.jsを使うまでもないけど素のJavaScriptで書きたくない、かといってjQueryを使いたくない、という場合があります。
ボク自身もこのような状況にモヤモヤしていましたが、色々漁っているとmin.jsというライブラリを見つけたので紹介していきます。
min.jsとは?
参考:remy/min.js: Super minimal selector and event library
min.jsとは、jQueryの超軽量版とも言えるライブラリで、jQueryの$()
やon
メソッド,、forEach
メソッドを使えるライブラリです。
$('p:first-child a').on('click', function (event) { event.preventDefault(); // do something else });
先ほどjQueryの$()
と書きましたが、min.jsの$()
は単なるquerySelecterAll()
メソッドのaliasなので、jQueryの$()
と比較して高速に動きます。
参考:min.js/$.js at master · remy/min.js
実際に、以下のようにDOMを10,000回呼び出す処理を計測した所、速さに3倍ほどの違いがありました。
const startTime = performance.now(); // 開始時間 for(let i = 0; i < 10000; i++) { let dom = $('.foo'); } const endTime = performance.now(); // 終了時間 console.log(endTime - startTime);
jQuery 26.550000000042928 min.js 6.080000000110886
jQueryとmin.jsの使い分け
もし、あなたが「jQueryを使うのは論外だけど、生のJavaScriptでgetElementById
というコードも書きたくない」というのであれば、min.jsは使い勝手の良いライブラリになります。min.js自体が100行に満たないライブラリですし、本当に最低限の機能だけを提供しているのも良い点です。
逆に、「既存のjQueryライブラリを使いたい」のであれば、jQueryが良いです。先ほども言ったように、jQueryとmin.jsの$()
は内部処理的には別物なので、jQueryライブラリを使う場合はmin.jsは選択肢から外れます。
しかし、依存性がないJavaScritpライブラリも増えていますし、今まではjQueryでないと使えなかったメソッド(append,prepend,afterとか)もJavaScriptでサポートされ始めているので、これからどんどんjQueryの役割はなくなって行くでしょう。