Vue.js のサブプロジェクトで petite-vue ってのを見つけたので、使ってみたという話です。
petite-vue は README にあるとおり、Vue.js のサブセット的な小規模実装で、プログラムサイズはわずか 6KByte 程です。小型軽量なリアクティブ系 F/W では Alpine.js が有名ですが、その 1/7 程度ということになります。当方事情として既存ウェブサイトにフォームページを追加するような小規模開発案件がよくあるので、そんな時のフロントエンド用途に向いているのではと思い、試してみることにしました。
という訳でお題は、企業や団体のウェブサイトに必ずある類型的な問い合わせフォームのフロントエンドサンプルです。以下のような、極力シンプルな仕様とします。
- フォーム→確認表示→送信結果、という表示遷移。
- フォームでは、「個人情報の取扱いに同意する」をチェックしないと確認表示に進めないようにする。また、全項目を必須入力項目として扱う。
- 確認表示ではフォーム項目の入力漏れだけをチェック。入力漏れがあるとフォーム送信に進めないようにする。
- 送信結果に遷移すると同時に、フロントエンドから API にフォーム入力内容を送信して受付チケット番号を受け取り、これをメッセージ表示する。
- API プログラムは、受信したフォーム入力データは保存処理等は行わずに読み捨て、数秒間スリープしてからチケット番号をレスポンスするだけのダミープログラム(PHP)で OK。
- ページデザインは Tailwind CSS を使用。
以上を実装してみたのがこれ↓。
ビジネスロジックは Global State Management (@vue/reactivity)に集約し、画面やパーツもウザくならない程度にコンポーネント分割してみました。
使ってみて気になったのは、
- コンポーネントの親子間通信が用意されていないので、ストアに直アクセスする等、どうしても密結合な実装になりがち。本例では、コンポーネントのパラメータにイベント処理のコールバック関数を指定することで、無理やり v-model っぽいインターフェースにしてますw
- コンポーネント単位でファイル分割(所謂 SFC)が出来ないので、コードが増えると見通しが悪くなる。
くらいですかね。ただ、これが気になるようなら素直に Vue.js を使い、petite-vue は小規模かつ使い捨てなプロダクトに限定して使うと割り切れば、気にする程でも無いかもしれません。総合的には結構イケるのではないかと思いました。コード一式は Github に置いてあります。
【2024.3.1 追記】コンポーネントの $template には <template> の id 以外にもバッククオート括りでテンプレートリテラルが指定できることが判ったので、JS コードとテンプレートを合体させて、SFC 的にファイルをコンポーネント単位で分割しました。
