jQueryはもう使いたくないと思いつつ、それでも使ってしまうのはDOM操作が面倒だからです。ReactやVueを使えばDOMの不便さから逃れられますが、ちょっとしたものを作る際には大げさだったりします。 そこで使ってみたいのがfemtoJSです。DOM操作に特化した小さなライブラリです。

femtoJSの使い方

ボタンのオンオフを取得するデモです。

ちゃんと取得できます。

femtoJSはjQuery同様に$を使ってクラスやIDを指定します。使えるメソッドは以下の通りです。

  • addClass
  • attr
  • css
  • empty
  • getAttr
  • html
  • insertAfter, insertBefore, insertFirst insertLast
  • offset
  • on
  • parent
  • removeAttr
  • removeClass
  • text
  • toggleClass

いずれもjQueryでよく使っているものでしょう。jQueryの場合、これにAjaxがよく使われますがあ、ES6であればFetch APIを使うようになっています。femtoJSはES6に特化していますのでレガシーなWebブラウザでは動作しません。そういった点が割り切れればサイズも小さく便利なライブラリでしょう。

femtoJSはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

vladocar/femtoJS: femtoJS - Really small JavaScript (ES6) library for DOM manipulation.