Vuetify.jsSPAの画面を作る勉強をしてたときに、CRUD操作をするときに困ったので、今回はそのメモです。認識合わせとしてSPAの定義をしますとこんな感じになります。アプリケーションのアーキテクチャの名称です。SPAではブラウザによるページ遷移を行わずにコンテンツの切り替えなどを行うことで、ユーザー体験(UX)を大きく向上させることができます。一部を差し替えてコンテンツを切り替えています。これにより、ブラウザの挙動に縛られないUIの実現や、パフォーマンスの向上が可能になります。シングルページアプリケーション(SPA)の導入メリット&デメリット|株式会社オロCRUD操作さて本題です。CRUD操作について考えます。CRUD(クラッド)とは、ほとんど全てのコンピュータソフトウェアが持つ永続性の4つの基本機能のイニシャルを並べた用語。その4つとは、Create(生成)、Read(読み取り)、Update(更新)、Delete(削除)である。Wikipediaこの手の話で問題になるのは、エラーとか障害に関する観点です。なにを言っているかというとこんな感じです。SPAの特徴として、サーバーサイドとは非同期にデータを操作するという特徴があります。サーバー-クライアント間はAjax非同期通信を使用することが多いかと思います。データの更新処理は、クライアントサイドとサーバーサイドで同じ結果になる必要があり、その点で同期処理であることが望ましくなってしまいます。要するに、アプリケーションとしては非同期でサクサクやりたいんですが、部分的には同期処理をしたいんです。Readだけなら、ajaxで非同期に問い合わせを実施し結果を待つことで問題ありません。CreateやUpdate、Deleteはサーバーサイドにデータの更新処理をするので、その応答を待って画面遷移を変える必要があります。気をつける観点としては、大きくは次の2点でしょうか。非同期処理でCRUD操作を許容すると、複数の更新処理命令を受け付けてしまいます。それを防止するためには、クライアントサイドから更新処理を実行したら画面を切り替えて更新中であることをユーザーに認識させる必要があります。更新処理中には次の更新処理を実行できないように、ユーザーからの入力を制限することが望ましいです。サーバーサイドの更新失敗の通知なんらかの理由でサーバーサイドでの処理が失敗することは十分に考えられます。失敗した場合には、ユーザーに失敗を通知することが求められます。作ってみる上記を考えると、フローとしてはこんな感じが考えられます。