2020年7月27日更新

Alpine.jsでシンプルなカウンターと展開可能なパネルを作ってみた

Thumbnail

備忘録になりますが、使ってみたらAlpine.jsが良さげだったので、Alpine.jsについて書いてみたいと思います。

Alpine.jsについて

Alpine.jsはx-data@clickといったVue.jsと同じような構文を使ってコードを書くことができます。

公式リポジトリでも「ほぼ完全にVue.jsとAngularの拡張から借用」(!)と書かれているとおり、Vue.jsに馴染みのある方はかなり理解しやすいかもしれません。

このツールのシンタックスは、ほぼ完全に Vue(それと、Angular による拡張)から借用しています。ウェブからの賜り物に感謝しています。

また、Alpine.jsは「TailwindのJavaScript版のようなもの」とも書かれており、実際にTailwind.cssと組み合わせて使ってみても個人的にはけっこう使いやすいと思うので、とくに小規模なプロジェクトで使う機会が増えてきそうだなと。時間を見つけて、まずはポートフォリオサイトなどで使ってみようかなと思います。

HTMLサイトの制作にwebpack環境でTailwindCSSを使う方法

Alpine.jsのディレクティブなど

Alpine.jsでは2020年8月の時点で14のディレクティブと5つのマジックプロパティが利用できます。

ディレクティブはイベントを監視し、DOM要素を追加/削除します。

Alpine.jsで使えるディレクティブ

  1. x-data
  2. x-init
  3. x-show
  4. x-bind
  5. x-on
  6. x-model
  7. x-text
  8. x-html
  9. x-ref
  10. x-if
  11. x-for
  12. x-transition
  13. x-spread
  14. x-cloak

マジックプロパティは次のようになります。

Alpine.jsで使えるマジックプロパティ

  1. $el
  2. $refs
  3. $event
  4. $dispatch
  5. $nextTick

インストール

CDNを利用するとき

CDNを利用する場合には、次のようにhead内でスクリプトを読み込みます。

HTML
コピーする
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>

※ 公式サイトによると、上のコードではalpine@v2.x.xのようにバージョンが固定されていないので、ビルド時には不具合を防ぐためにもalpine@v2.3.5のようにしてバージョンを固定した方が良さそうです。

NPMやYarnを利用するとき

NPMやYarnを利用するときには、パッケージをインストールしてから、JSファイル内でimport文などを使ってAlpine.jsを読み込みます。

BASH
コピーする
npm i alpinejs

↓ JSファイル内

JS
コピーする
import 'alpinejs'

IE11に対応させるとき

Alpine.jsをIE11に対応させるときにはポリフィルが必要になるので、次のスクリプトをAlpine.jsの前で読み込みます。

HTML
コピーする
<script src="https://polyfill.io/v3/polyfill.min.js?features=MutationObserver%2CArray.from%2CArray.prototype.forEach%2CMap%2CSet%2CArray.prototype.includes%2CString.prototype.includes%2CPromise%2CNodeList.prototype.forEach%2CObject.values%2CReflect%2CReflect.set"></script>
<script src="https://cdn.jsdelivr.net/npm/proxy-polyfill@0.3.0/proxy.min.js"></script>

Alpine.jsを使ってみる

今回Alpine.jsを使って超シンプルなカウンターと、アコーディオン風の展開可能なパネルを作ってみたので、残しておきたいと思います。

カウンター

まずはボタンをクリックすると+1/-1する簡単なカウンターから。
コードは次のようになりました。

HTML
コピーする
<div x-data="{count: 0}">
<div>
<button @click="count++">
+1
</button>
<button @click="count--">
-1
</button>
<button @click="count = 0">
リセット
</button>
</div>
<p>Total:<strong x-text="count"></strong></p>
</div>

(読みにくくなるのでスタイル関係は別になりますが)動かしてみると次のようになります。

AlpineではHTMLセレクターと同じスコープを持つので、<div x-data="{count: 0}">の中に、countの値を+1/-1するボタンや、countの値を表示するx-textをなどを入れています。

x-data="..."を持つdivタグの中でcountというステートを使うことができます。

また、@clickは省略せずに書くとx-on:clickとなるので、@click="count++"x-on:click="count++"のように書くこともできます。

展開可能なパネル

今回はAlpine.jsを使って、クリックすると展開できるパネルも作ってみました。

HTML
コピーする
<div x-data="panel()">
<button
@click="handleClick"
x-text="!isShow ? '展開する' : '折りたたむ'"
></button>
<p x-show="isShow">
あのイーハトーヴォの すきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
</p>
</div>
<script>
function panel() {
return {
isShow: false,
handleClick() {
return (this.isShow = !this.isShow);
},
};
}
</script>

先ほどはx-dataの中にcountというステートを入れましたが、x-dataには(panelのように)x-dataの外で定義した関数を使うこともできます。

今回は以上になります。最後まで閲覧ありがとうございました。

Copyrights © WebCraftLogAll Rights Reserved.