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