【ITニュース解説】Stop Waiting for APIs: Unlock Instant Speed with React's Optimistic Updates

Webアプリケーションを開発していると、ユーザーが何か操作をしたときに、画面が一時的に固まったり、反応が遅れたりする経験はないだろうか。例えば、SNSの「いいね」ボタンを押したとき、すぐに「いいね」の数が更新されず、少し待たされるようなケースだ。このような「もっさり」とした動きは、ユーザーにとって非常にストレスとなり、アプリケーションの印象を悪くしてしまう。

なぜこのような遅延が発生するのだろうか。それは、Webアプリケーションが動く仕組みに理由がある。私たちがWebブラウザでアプリケーションを使っているとき、その裏側では「クライアント」と呼ばれる私たちのパソコンやスマートフォンと、「サーバー」と呼ばれるインターネット上のコンピュータが常に通信している。ユーザーが「いいね」ボタンを押すといったアクションを起こすと、クライアントはその情報をサーバーに送り、サーバーはその情報を受け取ってデータベースを更新し、その結果をクライアントに送り返す。この一連の通信には、どうしても時間がかかってしまう。この時間を「レイテンシ」と呼ぶが、ほんの数ミリ秒から数秒の遅延であっても、ユーザーは「アプリが固まった」と感じてしまうのだ。

開発者のTchacaさんも、まさにこの問題に直面していた。「いいね」をクリックするたびに、画面が数秒固まり、ユーザー体験が損なわれていることに気づいたのだ。彼女は考えた。「ユーザーがすでに『いいね』を押したことを知っているのに、なぜサーバーからの返事を待ってから画面を更新しなければならないのだろうか？」この問いから生まれたのが、「楽観的更新（Optimistic Updates）」という画期的な手法である。

楽観的更新とは、その名の通り「サーバーの操作が成功するだろう」と楽観的に（前向きに）仮定して、ユーザーがアクションを起こした瞬間に、まずクライアント側の画面を即座に更新してしまう方法だ。つまり、サーバーに情報を送って返事を待つ前に、「いいね」の数を1つ増やしたり、商品をカートに追加したりしたかのように見せるのである。

この仕組みは、Webアプリケーションの知覚性能、つまりユーザーがどれだけアプリが速く動いていると感じるかを大幅に向上させる。ユーザーはボタンを押した瞬間に画面が更新されるため、待機時間を感じることなく、非常にスムーズな操作感を体験できるのだ。たとえ裏側でサーバーとの通信に数秒かかっていたとしても、ユーザーの目には「即座に反応した」ように映る。

もちろん、サーバーへの通信は行われる。サーバーは送られてきた情報を処理し、その結果をクライアントに返す。ここで大きく分けて二つのパターンがある。一つは、サーバーでの処理が「成功」した場合。この場合、クライアントはすでに画面を更新しているので、UIはそのまま変わらない。ユーザーは何も気づかず、スムーズな操作が完了したと認識する。もう一つは、サーバーでの処理が「失敗」した場合だ。例えば、インターネット接続が悪かったり、サーバー側で何らかのエラーが発生したりしたときだ。この場合、クライアントはサーバーからエラーの返事を受け取ると、すでに更新してしまっていた画面を元に戻す。これを「ロールバック」と呼ぶ。例えば、一時的に増やした「いいね」の数を元に戻すといった具合だ。このロールバックの処理も、ユーザーに大きな不快感を与えないように、注意深く設計される。

このような楽観的更新は、特に高速なインタラクションが求められる場面で非常に有効だ。具体的には、「いいね」の投稿、ショッピングカートへのアイテム追加、投票、リストの更新といった、ユーザーが頻繁に行い、かつ即座の確実な確認がなくても一時的な不整合が許容されるような操作で真価を発揮する。

では、実際にコードレベルではどのように実装されるのか、簡単な例を見てみよう。

まず、楽観的更新を使わない従来のやり方を考えてみる。ユーザーが「いいね」ボタンを押すと、アプリケーションはまずサーバーに情報を送り、その応答を待つ。サーバーから「成功したよ」という返事があってはじめて、画面上の「いいね」の数を増やす。この方法では、サーバーからの応答が遅いと、その間、画面は変化せず、ユーザーは「アプリが固まっている」と感じてしまう。

一方、楽観的更新を使う場合では、ユーザーが「いいね」ボタンを押すと、まず画面上の「いいね」の数を即座に増やしてしまう。この時点では、まだサーバーには何も確認されていない。その後、裏側でサーバーに情報を送り、その応答を待つ。もしサーバーから「成功」の返事が来れば、UIはすでに更新されているのでそのまま。もし「失敗」の返事が来れば、即座に増やした「いいね」の数を元に戻す処理を行う。これにより、ユーザーは押した瞬間に「いいね」が増えたように見えるため、非常に高速で滑らかな体験を得られるのだ。

ここで一つ、開発上の重要なポイントがある。画面の状態を更新する際、特にReactのようなライブラリを使っている場合、「setLikes(likes + 1)」のように現在の値を直接使うのではなく、「setLikes(prev => prev + 1)」のように、更新前の値（prev）を受け取る関数形式で記述することが推奨される。これは、ユーザーが立て続けにボタンを連打するなど、非常に高速な操作を行ったときに、状態の整合性が崩れる「競合状態」という問題を避けるためだ。更新前の値を基にすることで、常に正しい計算が行われ、期待通りの結果が得られるようになる。

楽観的更新を実装する際には、いくつかの技術的な考慮事項がある。第一に、エラーが発生した場合のロールバック処理を確実に計画しておくこと。万が一のときに、ユーザーが混乱しないように、UIを元の状態にスムーズに戻す方法を考える必要がある。第二に、先ほど触れたように、競合状態を防ぐために適切な状態更新方法（prevを使う形式）を用いること。そして、大規模なアプリケーションでこれらの処理をより効率的に、かつ複雑さを低減して行うために、React Query、SWR、Apollo Clientのようなキャッシュ管理ライブラリを活用することもできる。これらのライブラリは、楽観的更新の仕組みや、サーバーとのデータの同期を自動で管理する機能を提供してくれるため、開発者はよりアプリケーションの本質的なロジックに集中できるようになる。

まとめると、Reactにおける楽観的更新は、ユーザーがアプリケーションを操作した際に、サーバーからの応答を待たずにまず画面を更新することで、ユーザー体験（UX）と知覚性能を大幅に向上させる強力なテクニックだ。サーバーでの操作が成功すればUIはそのまま、失敗すれば元の状態にロールバックされるため、最終的なデータの整合性は保たれる。この技術を適切に使うことで、Webアプリケーションはより高速で快適なものとなり、ユーザーはまるでデスクトップアプリケーションを使っているかのような、ストレスのない体験を得られるようになるだろう。システムエンジニアを目指す皆さんにとって、この楽観的更新は、現代のWebアプリケーション開発において必須とも言える知識であり、ぜひ習得してほしい重要な概念だ。