背景

今回は、Webアプリケーションの、フロントエンド系のお話です。
ほとんどの場合、バックエンドなのですが、時々フロントエンドもするんですよね。。

私の派遣先では、入力フォームを以下のように分ける要望が多いです。

入力フォーム(+検証)
確認フォーム(保存ボタンで保存開始)
完了フォーム(保存した値を表示)

入力フォームから確認フォームにボタンを押して次に行くとき、値を検証し、間違っていた場合は次に行きません。
確認フォームで「保存」をしたら保存を開始し、完了フォームは、保存したデータを表示する、というのがおおよその流れです。

これだと、保存のダブルクリック対応が不要なのがいいところです。無意識に二回連続でぽちぽちしたら同じなのですが、その場合は「使用者がボケッとしているのが悪い」と責任転嫁、、は出来ませんが抗弁はできます。

画面が一つ確認分が増えますが、まぁしょうがないというところでしょうか。

ただ、昔のHTMLサーバベースのシステムだとしっくりくるのですが、近年のJavaScriptでやってしまうタイプだとはやすぎてあまり意味がないように思いますが、、まぁサンプルを作ってみようかなと思いました。

ソース

ソースは以下に格納しました。

https://github.com/KenichiTanino/confirm_form.git

開発環境

開発は以下の環境で行いました。

OS: Ubuntu 18.04
Nodejs: 12.16.3
yarn: 1.12.3
Nuxt.js: 2.0.0
vee-validate: 3.3.1

確認方法

以下を行ってからブラウザでアクセスします。

$ git clone https://github.com/KenichiTanino/confirm_form.git
$ yarn install
$ yarn run dev

作成内容

作成した内容を説明していきます。

画面

作成した画面は以下の通りです。

一覧
編集
確認
完了

データ

データは、vuexで制御しています。
vuexは一覧のデータと、完了時の更新時に使用しています。

編集から確認までのデータやり取りは、ルーティング機能を使用しています。

ルーティング機能

ルーティング機能とは、
vue-routerの機能を使って、画面遷移を制御する機能です。

画面遷移するついでに、paramを使用して、データを次の画面に送っています。

以下は、一覧(pages/users.vue)から編集画面に遷移しているところです。

    @click="$router.push('/edituser/' + item.id)"

編集画面(components/editform.vue)から、確認画面(pages/confirmuser.vue)に移動しているのは以下です。

this.$router.push({ name: 'confirmuser', params: { user: edituser }})

確認画面(/components/editform.vue)から、完了画面or編集画面に移動しているのは以下です。
cancelで戻っているのがediteduserになっているのは、
一覧画面から、編集画面に飛ぶ場合、情報がidで、
確認画面から編集画面に飛ぶ場合は、user情報全部、という違いがあるからです。

submit () {
  this.$router.push({ name: 'saveuser', params: { user: this.$props.user }})
},
cancel () {
  this.$router.push({ name: 'editeduser', params: { user: this.$props.user }})
},

まとめ

長くなったので、とりあえずここらへんまでにしておきます。