複数ステップフォームの実現方法の調査

[IkumaTadokoro]

• 複数ステップのフォームの実装方法
• 入力中フォームで前のステップに戻る方法
• バリデーションをかけられるか

[IkumaTadokoro]

• ウィザード形式というらしい

Railsでの実装

wicked（gem）

• zombocom/wicked: Use wicked to turn your controller into a wizard
• wizard formを作れるgem
• フォーム入力の途中でもupdateがかかってしまうが、今回はそもそもDBにトランザクションとして登録しないのでミスマッチ

Vueでの実装

vue-form-wizard（npm）

• nuxt.js vue-form-wizardステップフォームにsimple-vue-validatorバリデーションを実装してみました。 - Qiita
• vue-form-wizard - A vue based tab/form wizard
• Vue 3 Support · Issue #353 · BinarCode/vue-form-wizard
  • Vue3.0をサポートしていない

vue-step-wizard（npm）

• tushargugnani/vue-step-wizard: A simple VueJS Step / Form Wizard plugin with Validation Support.
• Vuejs 3 Support · Issue #30 · tushargugnani/vue-step-wizard
  • Vue3.0をサポートしていない

素のVueで書く

• vue.jsでマルチステップの入力フォーム作成(基礎編) | アールエフェクト
• Building a Multi-Step Form with Petite-Vue - Vue.js Tutorials
• Building a Multi-Step Form with Vue | by Alexandre Olival | Engineering Samlino | Medium
• How to Build a Multi-Step Form Using Vue.js | by Paul Nasilele | JavaScript in Plain English
• 書くステップをコンポーネントにし、ステップ数とv-ifを利用してウィザードを実現する
• フォームの入力結果はObject.assignを利用する
• 前に戻った時に結果を保存するにはkeep-aliveを使用する

[IkumaTadokoro]

2021/11/10 自作サービス進捗会

リクエスト分かれるウィザードやめたほうがよさそう
（バックエンドは一括でf、UI上で分かれている分にはまあいい）

一期一会のアプリ && 聞き慣れない用語が出てくるので、ウィザード自体はアプリ仕様にマッチしている

[IkumaTadokoro]

👆国民健康保険の料金計算用Excel

上記が競合に相当し、「どこに何の値を入力すればいいかわかりづらい」という問題があり、本アプリではその点を差別化ポイントとしている。そのため、ウィザード形式のフォームを実装する。
ただし、見た目上はウィザードにするだけで、リクエスト自体は計算結果算出の一度だけとする。

[IkumaTadokoro]

• ウィザード自体は、各ステップをVue上でSFCとして定義することで実現する
• 戻る処理はVueの動的コンポーネントに対するキャッシュを実現するkeep-aliveで実現する。

実装サンプル：https://github.com/IkumaTadokoro/vue-wizard-form-sample/tree/1b2df45c49ece942be757805f567f09a1efb8735

[IkumaTadokoro]

• バリデーションはVeeValidate（とその裏で動くyup）によって行う。
• yupでバリデーションルールをオブジェクトとして定義し、ステップ数に応じて動的にバリデーション内容を取得する。
• 実装サンプル：https://github.com/IkumaTadokoro/vue-wizard-form-sample/tree/e11c4da29f0ae403448778c0f7c9fbce4e955384

参考：[https://vee-validate.logaretm.com/v4/examples/multistep-form-wizard#higher-order-components Multi-step Form Wizard | vee-validate]

[IkumaTadokoro]

実装方針

• 以下の点を考慮し、ウィザード形式のフォームで実装する
  • 既存の区市町村が発行しているExcelでの計算シートでは、何を入力すればいいかわからないので、本アプリの入力が容易であることは差別化に繋がる
  • 入力項目に聞き慣れない項目があり、またサービスは複数回繰り返し使うものではないため、一回のユーザ体験を向上させることは重要
• あくまでUI上の問題なので、見た目上はウィザード形式にするが、実際のリクエストが送信されるのは一回のみとする。

市役所のExcel

実装イメージ

実装メモ

• ステップ数を管理し、ステップ数に応じてv-ifディレクティブで表示を制御する
• バリデーションにはVeeValidate（およびその裏で動くyup）を用いる

実装サンプル

https://github.com/IkumaTadokoro/vue-wizard-form-sample

参考

• [https://vee-validate.logaretm.com/v4/examples/multistep-form-wizard Multi-step Form Wizard | vee-validate]
• Vue3でフォームバリデーションのVee-Validate4の基礎を理解 | アールエフェクト
• jquense/yup: Dead simple Object schema validation