先日、とあるJavaScript関連の記事を読んでいたところ、"Optimistic Updates" という技術が紹介されていました。
日本語に直すと "楽観的更新" といったところでしょうか。
はじめて聞いた言葉で、日本語の記事も見当たらなかったため記事にしてみます。
Optimistic Updatesとは
Optimistic Updatesというのは、ネイティブアプリやSPA(Single Page Application)などで使われる技術で、非同期の通信処理が成功するという前提(楽観)のもとに、通信のレスポンスを待たずに次の処理を行うというものです。
最も多いOptimistic Updatesの使い方は、UIへの反映をリクエストの結果を待たずに行うというものでしょう。
Optimistic Updatesの例
例えば、よくある「いいね」ボタンのようなものにOptimistic Updatesを適用するとしましょう。
この場合、「いいね」を押すと同時にサーバーへ「いいね」を追加するリクエストが送信されますが、その結果を待たずに即座に「いいね」をした場合のUIの更新がかかります。ユーザーはネットワークの状態が悪い場所にいたとしても、即座にUI上のレスポンスが発生し次の動作に移れるため、快適にアプリケーションを使うことができます。
Twitterで友人が教えてくれたのですが、Twitterのスマホアプリの「いいね」がまさにこういった動きをします。
Optimistic Updatesの優れているところ
Optimistic Updatesはユーザーの行動をロックしません。操作をロックしないだけでなく、成功を示すインタラクションが即座に発生することで、心理的にも行動がロックされないところがOptimistic Updatesの優れているところではないでしょうか。
ユーザーはタップなどのアクションをすると、期待する反応がアプリケーションから返ってくるのを待ってしまいます。
即座に反応を返すことで、操作できる状態であったとしても反応を待ってしまうという心理的なロック状態を発生させないようにできます。
通信制御の必要性
ネットワークが不安定なモバイルの環境では、通信が失敗したり、そもそも不可能なことはよくあることです。
Optimistic Updatesを適用すると、クライアント上の見え方と実際が異なるということが多発してしまいます。
これを解消するために、リクエストの送信タイミングや再送を制御する仕組みが必要になります。
正確な再送制御はなかなか厄介な問題ですが、実現できればよりアプリケーションを快適に保てます。
Twitterクライアントでもネットワークが不通の状態で「いいね」をすると、ネットワークが回復してから「いいね」が送信されるようです。
非SPAのWebアプリケーションへの適用
Optimistic Updatesは基本的にネイティブアプリやSPAで使う技術と思われますが、通常のWebアプリケーションでも適用可能な技術です。
戦略としてはいくつか考えられます。
OptimisticなOptimistic Updates
通信が成功するまでの僅かな時間にページ遷移しないだろうというOptimisticな考えの元にOptimistic Updatesを適用します。
実際ネットワークが不安定な場合を除けばほとんどこれで問題ないかもしれません。
通信制御用の情報を永続化する
通信制御用の情報をブラウザのローカルストレージかセッションストレージなどに永続化しておけば、ページ遷移が発生したとしても次のページで通信すればよいので、問題なく通信制御できます。
Service Workerを使用する
もし主要なすべてのブラウザーがService Workerを実装していれば、これを使うのが一番スマートなやり方ではないかと思います。
Service Workerに通信制御の仕組みを用意しておけばウェブアプリケーションを閉じたとしても通信できるからです。
対象ユーザーがChromeとFirefoxしか使っていないというおよそありえない状況でのみ採用できる方法です。