Alpine.js で ToDo アプリ作ってみた

こんにちは、ROXX の匠平 (@show60) です。

フロントエンド技術の栄枯盛衰の流れは激しいですね。

今回は Alpine.js というフレームワークで簡単な ToDo アプリを作ってみました。

Alpine という名前はすごく好き。山という意味だが Nuxt.js が山っぽいアイコンなのと関係あるのは分からない。

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 と比較している記事も多いです。

早速ですが、出来上がったものがこちら。

公式が Tailwind の JavaScript 版と言っているので CSS を TailwindCSS で当ててみました。script は html 内に収めてます。

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

Alpine.js の中核となるのはディレクティブです。記述方法は 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 タグにのみ使用します。

x-if と x-for は template タグで表記するので、DocumentFragment として扱われます。

JS で描画処理を行わせるために template タグで表記することが必須となっているのでしょう。

DevTools で確認すると丸見えになってますね。x-for の表記なんかもそのまま見えるので嫌な人はいるかもしれません。

x-if タグについても、CSS で display: none の処理を当てているのではなく、JS のほうでその追加・削除を行っています。

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

Vue.js や React といった他のフレームワークを置き換えるほどの強力な機能が備わっているようではなさそうだなという感想です。

ただ HTML を離れることなく実装できることは最も特徴的かつ強みではでしょうか。つまり Script タグに実装を行わずに完結できることです。

公式の実装サンプルを見るといずれも HTML のみで完結していることが分かります。これが Tailwind の JavaScript 版という所以ですね。

2年目エンジニアの私個人としては、フレームワークが生まれて広がっていく過程を追うことができる良い機会だなと思っています。

毎週金曜日に NewsLetter も発行しているようですよ！