【Alpine.js】Alpine.jsとは

State of JS 2020 をみていて、「Alpine.js」がフロントエンドフレームワークの満足度ランキングに４位になっていたので調べた

State of JS 2020より

Alpine.js

READMEによると、Alpine.jsはVueやReactなどの宣言的にUIを記述できるライブラリだが、より低コストで提供することができる

Tailwind の JavaScript 版のようなものとのこと

alpinejs.dev

Vueのようにディレクティブを使ってコンポーネントを記述していく

Vueのような書きっぷりというか、ほぼVueなのでVueを触っていれば学習コストは低い

違う点としては、よりマークアップ側に処理を寄せられるところ（いいのかわからないけど）

<div x-data="{ open: false }">
    <button
        @mouseenter.once="
            fetch('/dropdown-partial.html')
                .then(response => response.text())
                .then(html => { $refs.dropdown.innerHTML = html })
        "
        @click="open = true"
    >Show Dropdown</button>

    <div x-ref="dropdown" x-show="open" @click.away="open = false">
        Loading Spinner...
    </div>
</div>

まとめ

• 導入はCDNからダウンロードして使うことができてお手軽
• 簡単なWebアプリ作るにはいいかも
• VueをAlpineに作り替える必要はないかも

積極的に使うことはないと思うが、どう進化していくのかは注目していきたい