備忘録になりますが、使ってみたら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と組み合わせて使ってみても個人的にはけっこう使いやすいと思うので、とくに小規模なプロジェクトで使う機会が増えてきそうだなと。時間を見つけて、まずはポートフォリオサイトなどで使ってみようかなと思います。

2020年8月27日HTMLサイトの制作にwebpack環境でTailwindCSSを使う方法

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

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

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

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

インストール

CDNを利用するとき

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

<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を読み込みます。

npm i alpinejs

↓ JSファイル内

import 'alpinejs'

IE11に対応させるとき

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

<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する簡単なカウンターから。
コードは次のようになりました。

<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を使って、クリックすると展開できるパネルも作ってみました。

<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の外で定義した関数を使うこともできます。

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