Webアプリの新規作成の実装パターン

一覧 -> 作成画面に遷移して新規作成

フォームでPOSTして、エラーならエラーメッセージを表示、成功したら一覧画面にリダイレクトさせるというオーソドックスなパターン。

Flashメッセージの実装は必要。作成後にセッションに保存して一覧画面で取得したらすぐに消すような仕組み。大体フレームワークに用意されてることが多い。

バリデーションをどうするかも重要。サーバーサイドでバリデーション結果をテンプレートに埋め込んで表示するタイプか、JSでバリデーションをリアルタイムに実装するか。

Vueでリアルタイムバリデーションして、システム側のエラーは例外。ユーザー起因のエラーはFlashメッセージがいいかな。

このパターンはユーザーに画面遷移をさせないで済み、変更がすぐに反映されるので一番理想。実装方法としては以下の2つになると思う。

ただこの方法で厄介なのは、JS側でテンプレートを描写することになるためサーバーサイドのテンプレートエンジンが使えないこと。

最たる例がi18n対応。サーバーサイドで翻訳した結果を出力する形になっている場合、 JS側でもi18n用の機能を実装する必要が出てくる。

また非同期処理が完了するまで画面に何も表示されないというのも難点。これを解決するにはローディングを出したり、取得中はDOM自体をださないとか、 gon等のライブラリを使ってDOMにJSの値を吐き出しておく等の方法がある。

またこの方法の場合、前述のFlashメッセージではなくトースターを表示する実装が必要になる。

ということからもわかるように、この方法はJSフレームワークのコード資産があまり無い段階では実装コストが高めなのでスピードを優先する時はオススメできない。

このパターンは非同期処理が完了したら、location.href で画面をリロードさせることで変更を反映させる。データ数が多くなければ、そこまで違和感が無い。テンプレートエンジンも流用できる。

ただ作成した時のトースターを表示したい時は一工夫が必要。非同期処理が成功したという情報をどこかに持っておかないといけない。

自分はグローバル変数は汚したくないので、ローカルストレージを使って実装することが多い。ローカルストレージの実装は必要になるが、JSで動的に切り替えるよりは実装コストは低いのでオススメ。