Alpine.js で Todo アプリ作るまで

f:id:show-hei:20200525004334p:plain

備忘録に書いていた Alpine.js を触ってみました。

めちゃめちゃ気軽に書けるので、ちょっとした機能を追加したいというときでもいけそう。

Vue.js や React とは目指している世界が違うような印象。

どちらかというと jQuery からの乗り換えに適した感じ。

Alpine.js とは

2019年11月から開発され、12月にバージョン1.0がリリースされています。5/24現在でバージョン2.3.5というまだ生まれたてのフレームワークです。

Alpine.js は、Vue や React などの大きなフレームワークのリアクティブで宣言的な性質をはるかに低いコストで提供します。

DOM を保持し、適切な動作を施すことができます。

Tailwind の JavaScript 版のようなものです。

下記リンクを見ると、すでに多くの記事で紹介されています。

記事のタイトルに、tiny、minimal、lightweight という言葉が目立つのと、また Vue.js や React と比較しているような記事も多いようです。

CSS は TailwindCSS だからタグ内がごちゃごちゃしてますね。

See the Pen yLYwRjx by Shohei-Japan (@shohei-japan) on CodePen.

ディレクティブの記述は Vue.js とかなり近いため、直感的に記述しやすく感じます。

v-for が x-for 、 v-on が x-on のように v と x が置き換わっただけとも見れますね。

以下、今回使用したディレクティブのみ抜粋して説明します。

x-data は新しいコンポーネントスコープを宣言します。フレームワークに、データオブジェクトを使用して新しいコンポーネントを初期化するよう指示します。

Vue コンポーネントの data プロパティのように考えてください。

script 内で関数やプロパティを定義し、１つの関数としてまとめたら、それを x-data で呼び出してあげれば使うことができます。

Vue.js ではタグの文字列にマスタッシュ構文を配置することで割と直感的にスクリプトからの値を表示できます。

Alpine.js では x-text に渡してあげることで表示します。感覚としては理解しやすいです。

<!-- Vue.js -->
<span>{{ data }}</span>

<!-- Alpine.js -->
<span x-text="data"></span>

Vue.js の v-if と同じ使い方が可能です。

気をつけることとしては必ず template タグに使用することくらいです。

こちらも Vue.js の v-for と同じ使い方です。同様に template タグにのみ使用します。