⌨

petite-vue ⇄ Alpine.js ⇄ sprae の対応表

に公開
JavaScript
Alpine.js
petitevue
sprae
tech

とても良く似たライトウエイトな JS フレームワークである petite-vue と Alpine.js と sprae の対応表です。最近は datastar の勢いがあるような気がしますが、data- で始まるディレクティブが長すぎるので OJK の好みで却下。

紹介

petite-vue

本格的な JS フレームワークである Vue.js の作者が Alpine.js に触発されて作った（らしい）フレームワーク。今はもうメンテナンスもされていない模様で、「petite-vue」で Google 検索しても OJK の Zenn 本のほうが公式サイトよりも上位にヒットするようになってしまいました。アニメーションに関するディレクティブが無いのが辛い。

Alpine.js

Vue.js のディレクティブに触発されて作られたらしい petite-vue よりも古いフレームワーク。今でもメンテナンスはされていて、htmx との組み合わせで petite-vue よりもだいぶ流行りました。サイズ的にも機能的にも petite-vue よりも Vue.js と比べられるべきフレームワークですが、私のテキストではそこまでの使い方をしていません。x-if と x-for が template 要素でしか使えないことと、else if と else に対応するディレクティブがないのが結構辛い。

sprae

petite-vue の開発が止まってしまったことをきっかけに（たぶん）作られた超マイナーなフレームワーク。v- とか x- とか @ とか $ とか記号が多すぎ！ : だけでええやん！ という趣旨に大いに賛同したので取り上げます。else if と else に対応するディレクティブはあるけど、アニメーションは無し。

対応表

CDN

head 要素に記述するものです。

petite-vue のみ、公式な書き方では head 要素ではなく script 要素内に記述します。

ディレクティブ

OJK のテキストで扱っている範囲のみリストします。petite-vue と Alpine.js は v-scope／x-data と {{ }} 以外は v- と x- が違うだけです。

petite-vue Alpine sprae
v-scope x-data :with
v-text {{ }} x-text :text
v-html x-html
v-on:<event>
@<event>		 x-on:<event>
@<event>		 :on<event>
:on<in>..on<out>
v-bind
:		 x-bind
:		 :
v-model x-model :value
v-show x-show
v-if x-if
※template のみ		 :if
v-else-if :else :if
v-else :else
x-transition
v-for x-for
※template のみ		 :each
v-effect x-effect :fx
v-cloak x-cloak [:each] [:if] など
x-ref :ref
@vue:mounted x-init
x-data="init() {...}"		 :if :ref
@vue:unmounted
  • sprae の :onevent にはアロー関数式を渡す（:onclick="() => { ... }"）
  • petite-vue の v-bind はオブジェクトで一括属性指定したときに script 要素で定義したオブジェクトが有効（その他 2 つは NG）
  • sprae の :value は type="checkbox" のときに値を配列で取得しない（個々の要素の true/false のみ取得）

特別な変数（マジック）

petite-vue Alpine sprae
on:<event>="$el" on:<event>="$el" :on<event>="e => e.target"
ref="***" → $refs.*** x-ref="***" → $refs.*** :ref="***" → ***
  • sprae の :on<event> に指定するアロー関数はイベントオブジェクトを受け取るので target プロパティでエレメントを取得する
  • peteite-vue は v-ref がなくて HTML 標準の ref 属性を使う
  • sprae の :ref は :ref="el => ..." とハンドラを与えるとその要素のエレメントが変数 el で取得できる

JavaScript に分割

petite-vue

関数名は dataset でなくても構いません。v-scope を付ける場所を変えれば、任意の HTML 要素以下にのみ適用できます。

非公式
<body v-scope="dataset()">
  ...
</body>

<script>
  function dataset() {
    return {
      ...
    };
  }
</script>

公式版では head 要素ではなく script 要素内で petite-vue のフレームワークを読み込みます。
createApp という名前でなくてはいけません。最後の .mount() の引数に HTML 要素の id を指定することで、その要素以下にのみフレームワークを適用できます（.mount('#app')）。

公式
<head>
  ...
  <!-- <script src="https://unpkg.com/petite-vue" defer init></script> -->
</head>


<body>
  ...
</body>

<script type="module">
  import { createApp } from 'https://unpkg.com/petite-vue?module';

  createApp({
    ...
  }).mount();
</script>

Alpine.js

関数名は dataset でなくても構いません。x-data を付ける場所を変えれば、任意の HTML 要素以下にのみ適用できます

非公式
<body x-data="dataset">
  ...
</body>

<script>
  function dataset() {
    return {
      ...
    };
  }
</script>

公式は script 側の書き方が変わるだけで、その他の使い方は変わりません。

公式
<body x-data="dataset">
  ...
</body>

<script>
  document.addEventListener('alpine:init', () => {
    Alpine.data('dataset', () => ({
      ...
    }));
  });
</script>

sprae

sprae は公式の書き方がシンプルなので、非公式版はありません。

公式（のみ）
<body>
  ...
</body>

<script type="module">
  sprae(document.body, {
    ...
  });
</script>

body 要素にディレクティブを付けないのが上の 2 つとの大きな違いです。
document.body の部分を変更することで任意の HTML 要素以下にのみ適用できます。指定方法は document.getElementById() などが使えます。

sprae の変数を 1 つも使わない、あるいは :with（x-data 相当）か :value（x-model 相当）のみを使うときは、次のように第 2 引数は省略できます。ただし、この 1 行は必ず必要です（そこが petite-vue や Alpine.js との違い）。

<script type="module">
  sprae(document.body);
</script>

sprae については次の記事にまとめました。

Discussion