jQuery、便利ですよね。すぐに使ってしまうのですが、サイズは肥大化していますし、実際に使うのはそのごく一部でしかなかったりします。 そこで参考にしたいのがYou-Dont-Need-jQueryです。その名の通り、jQueryを使わない標準的な記法を教えてくれるプロジェクトです。

You-Dont-Need-jQueryの使い方

You-Dont-Need-jQueryはソフトウェアというわけではなく、READMEの中で説明をしてくれます。例えばセレクタの書き方。

$('selector');
  // ↓
document.querySelectorAll('selector');

クラスを指定する書き方。

$('.class');
  // ↓
document.querySelectorAll('.class');
  // または
document.getElementsByClassName('class');

テキストエリアの値を取る場合。

$('#my-input').val();
  // ↓
document.querySelector('#my-input').value;

スタイルを設定する方法。

$el.css({ color: "#ff0011" });
  // ↓
el.style.color = '#ff0011';

トップにスクロール。

$(window).scrollTop();
  // ↓
(document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;

他にも多くの記述方があるのですが、Ajaxについては別なライブラリが紹介されていました。You-Dont-Need-jQueryの書き方に沿って進めて、Ajaxだけ別ライブラリを使うことで全体として軽量なフロントエンドになりそうです。

You-Dont-Need-jQueryはJavaScript用のオープンソース・ライセンス（MIT License）のプロジェクトです。

oneuijs/You-Dont-Need-jQuery