More than 3 years have passed since last update.

Alpine.js の良いところ

Last updated at 2020-12-06Posted at 2020-12-05

唐突ですが

Alpine.js 、素敵じゃないですか
https://github.com/alpinejs/alpine

最初見た時は「Alpine」のとこだけ見て、 Linux の方かと思ったのは秘密です。

なんだかんだで普通の HTML のページを作る機会がある人はあると思うんです。ペライチの LP など。
その時に何を使うか

素の JavaScript だったり jQuery だったりがまずパッと思いつきますかね？
いやいや、Next.js や Nuxt.js だ！という人もいると思います。

そんな時、自分は今まで Stimulus を使っていましたが、前から興味があった Alpine.js を使った際に、どのようなポイントが「良いなぁ」と思ったのかご紹介します

※ 紹介している Alpine.js のバージョンは 2.7.3 になります。

使い方？
一番簡単なのは script タグに URL を書いて、HTML ファイルに書くだけです。
jQuery を使う時と同じですね

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>

Node.js やら黒い画面やら叩かなくても使えます。
もちろん webpack とか使っても OK です

サッと作る時に手間なのって、 状態があって、それが変更されたら見た目を変えて ...ってところになると思うんです。
CSS で見た目や表示する要素を変更するくらいなら良いのですが、そうではないことの方が多いですよね

Alpine.js なら　x-data で状態やメソッドを持たせておいて、 x-bind で属性の値を自動で変更...みたいなことが簡単に出来てしまいます。

「チェックボックスにチェック入れたらボタンを押せるようにする」みたいなパーツですと、

こんな感じになります。簡単！
この例は JavaScript 全く書いて無いです

「コレくらいあれば...いけるな」ってのは揃っているかと思います。

Angular や Vue.js を触ったことある方にはおなじみのアレです。
v2.7.3 では 14個あるようです👀
https://github.com/alpinejs/alpine#directives

<button x-on:click="hoge">
  hoge するボタン
</button>

上のコードの x-on がそうですね。
「ここのボタンは押されたら hoge する！」ということが分かりやすく、コードを書いた人の強い意志を感じさせてくれますね（？）

x-if や x-show 等は良く使うことになるんじゃないかなと思います。

こちらが結構揃っていまして、

コレがサッと使えるのはありがたい。ありがとう。

magic properties は使わなくても済むことが多いと思いますが、「コンポーネントのルートの要素を取得して何かしたい〜」等、何かあった時に助けられそうなのが揃っていると思います

コンポーネント単位で JavaScript のクラスを作成した時、その機能を適用させたい要素分 new してたと思うんですが、そんなことは不要になります

個人的にはコレが一番良いなと思っています

なので、

サンプルの様に要素を複製し雑に追加したとしても、勝手に動いてくます。

いかがでしょう Alpine.js 。
なかなか普通に HTML を書いてページ作ることが無い人もいると思いますが、知っていればいざって時に使えるかもしれないですね

何かの参考になれば幸いです