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回呼び出す処理を計測した所、速さに３倍ほどの違いがありました。

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の役割はなくなって行くでしょう。