ペライチのLPや個人のホームページなど、さっと作りたい時に使えるかもと思い、実際に環境構築しました。
Alpine.js とは
軽量なJSのリアクティブフレームワークです。
Vue に近いディレクティブを持ち、出し分けや繰り返しなどを手軽に実現することが可能です。
CDN を用いて、簡単に利用ができるため、さっと試したり、環境構築ができるのが良さそうです。
導入
CDN で Alpine.js を読み込む場合、htmlファイルのみで書けます。
index.html
<!DOCTYPE html>
<html>
<head>
<title>Hello, Alpine.js</title>
<!-- Alpine.js の読み込み -->
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.js" defer></script>
</head>
<body>
<div x-data="{ opened: false }" x-cloak>
<button x-show="!opened" @click="opened = true">Open Dropdown</button>
<button x-show="opened" @click="opened = false">Close Dropdown</button>
<ul x-show="opened" @click.away="opened = false">
<template x-for="item in items">
<p x-text="item"></p>
</template>
</ul>
</div>
<style>
[x-cloak] {
display: none;
}
</style>
<script>
let items = ["element1", "element2", "element3"]
</script>
</body>
</html>
x-cloak を付け、スタイルを設定することで、描画完了までは表示されないようになります。
button 要素がちらついて二つ表示される、などを防ぐ意図で書いてます。
簡単ですね。
TailwindCSS と組み合わせてアニメーションをつける
さっと実現できそうだったので、TailwindCSS を組み合わせて利用することを考えます。
TailwindCSS の内容を css に吐き出して利用します。
npx コマンドで可能です。
npx tailwindcss-cli@latest build -o tailwind.css
index.html を修正します。
x-transition を利用することで、アニメーションを実現できます。
index.html
<!DOCTYPE html>
<html>
<head>
<title>Hello, Alpine.js</title>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.js" defer></script>
<link href="./tailwind.css" rel="stylesheet">
</head>
<body>
<div x-data="{ opened: false }" x-cloak>
<button x-show="!opened" @click="opened = true">Open Dropdown</button>
<button x-show="opened" @click="opened = false">Close Dropdown</button>
<ul x-show="opened" @click.away="opened = false" x-transition:enter="transition duration-300"
x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
x-transition:leave="transition duration-300" x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0">
<template x-for="item in items">
<p x-text="item"></p>
</template>
</ul>
</div>
<style>
[x-cloak] {
display: none;
}
</style>
<script>
let items = ["element1", "element2", "element3"]
</script>
</body>
</html>
クラスを付与するだけで、アニメーションを実現できました。
おまけ
VSCode で Alpine.js を利用する場合、alpine-js-intellisense の拡張機能を利用することで、ディレクティブが補完されるようになり、便利です。
npxは使いましたが、package管理の必要がほぼなく、簡単にリアクティブを実現できるのは良いなと思いました。
Alpine.js、こういった手軽さとVue と似た書きやすさを感じました。今後もウォッチしていきたいです。
実際にこれで自分のブログを作ってみようかなと思います。