ウェブページ上でUI操作できるようなページの作成でJavaScriptのフレームワークであるAlpine.jsというものを触ってみた。
前口上
AngularJS1.5の頃に初めてJSのフレームワークを触って以降、他のフレームワークも少し触ってみたけどやたら複雑だったりトランスパイル前提だったりしてなんか使うのが億劫で、 「もうVanillaJSでいいか」となっていた。 けど軽いものを作るときにボタンのリスナとか画面への反映をゴリゴリ手で書くのはやっぱり面倒。
Alpine.jsというのを知ったので、触ってみた。
概要
使い方はドキュメントを見るとして、
- 使用するにはHTMLから
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.js" defer></script>（または npm も使える） - 2.8.2で調べたところ、サイズは非圧縮で77KB、gzip後で19KB
x-dataにJSのオブジェクトを返した場合、x-onで関数を呼び出したときのthisはそのオブジェクトそのものではなく、プロキシが使われる- なので元のオブジェクトをいじっても影響を与えられない
input要素の値が変化したときになにかしたい場合には、x-init内で$watchする必要がある
感想
組み込みも簡単だし、難しいこと考えずに気軽に使えてよい。