Alpine.js の良いところ

これは [SOUSEI Technology アドベントカレンダー](https://qiita.com/advent-calendar/2020/st)6日目の記事です :pencil:  

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

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

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

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

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

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

## 準備が楽

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

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

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

## reactive

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

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

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

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="html,result" data-user="nzy" data-slug-hash="yLaOydo" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Alpine.js easy sample">
  <span>See the Pen <a href="https://codepen.io/nzy/pen/yLaOydo">
  Alpine.js easy sample</a> by NZT (<a href="https://codepen.io/nzy">@nzy</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

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

## 程よい数の directives & magic properties

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

### directives

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

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

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

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

### 修飾子もあるよ！

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

- `x-on:click.away` で「自分以外がクリックされたら〜」
- `x-on:keydown.enter` で「Enter キーのキーダウンなら〜」

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

### magic properties

v2.7.3 では 6個あるようです👀
https://github.com/alpinejs/alpine#magic-properties

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

## new 要らず

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

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

なので、

<p class="codepen" data-height="476" data-theme-id="dark" data-default-tab="js,result" data-user="nzy" data-slug-hash="ExgKjYp" style="height: 476px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Alpine.js easy sample">
  <span>See the Pen <a href="https://codepen.io/nzy/pen/ExgKjYp">
  Alpine.js easy sample</a> by NZT (<a href="https://codepen.io/nzy">@nzy</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

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

## まとめ

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

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

### 参考資料

[alpinejs/alpine: A rugged, minimal framework for composing JavaScript behavior in your markup.](https://github.com/alpinejs/alpine)