🪁

Alpine.jsがなんかよさそう

2023/10/18に公開

Alpine.jsというUIライブラリが気になったので、試してみました。

なにこれ

UIライブラリみたいなやつです。ReactやVue、SolidやSvelte的立ち位置っぽいです。
公式サイトでは、「モダンなWebのためのjQuery」らしいです。
でも、これらのUIライブラリとはちょっと違います。
とても軽くて、とてもシンプルなんです！

です。

Alpine.js、TypeScriptないです。
型を気にせず、気軽に開発できます！

<script>タグだけで導入できます！

<script src="//unpkg.com/alpinejs" defer></script>

をHTMLに挿入だけでいいのです。
npmなんかいりません。HTMLファイルだけで完結することもできます。

めっちゃシンプルです！

<div x-data="{ open: false }">
  <button @click="open = !open">Toggle</button>
  <span x-show="open">
    Content...
  </span>
</div>

こんな感じです。x-dataが記述している要素内で、そのデータが使えます。
Vueみたいですね。

シンプルって言ってるけどx-から始まるのいっぱいあるんでしょ、って思うかもしれません。
実際はそうではなく、使う属性などはたったの23個しかありません！

x-から始まるのが15個、スクリプト内で使えるプロパティが6個、グローバル変数Alpineのメソッドが2個です。シンプルですね。

これらは、Alpine.jsのトップから確認できます。

「TypeScriptがない」や「<script>タグで完結」は、手軽ですが、保守性が低いのでは、と思われた方もいるのではないかと思います。
その通りで、私はAlpine.jsに保守性はあまりなく、大規模プロジェクトには不向きだと考えます。

しかし、手軽な時にたくさん使うことができます！
簡単なツールを作りたい時、JavaScriptをいじりたい時。
npmを使いわざわざ環境を構築する必要がなく、ライトに使えます。
それが、Alpine.jsのいいところだと思います。

Alpine.js、ちょっとした開発にめちゃめちゃ向いています！
そんなときに、おすすめです！