Optimistic UI (楽観的UI)

「いいね」ボタンの実装を通して、UI/UXを段階的に改善していきます。最終的にはoptimistic UI (楽観的UI)まで実装し、ネイティブアプリのような操作性を実現します。

下記のようなUIになります。

考えるポイント

• 「いいね」はサーバと同期する必要があります。したがってTurboを使います。Turboの中にもやり方は複数あります
  • Turbo Driveを使う方法: 「いいね」ボタンを押すたびに画面全体をサーバで再レンダリングして、ブラウザに送ります
  • Turbo Streamsを使う方法: 「いいね」ボタンを押すたびに、該当の行だけを再レンダリングして、ブラウザに送ります
  • 楽観的UIを使う方法 「いいね」ボタンを押すと、ブラウザのネイティブ機能やJavaScriptを使い、ユーザにすぐにフィードバックを与えます。その裏でTurbo DriveもしくはTurbo Streamsでサーバと非同期通信を行い、レスポンスを受け取ったらUIを更新します。
• 楽観的UIを実現するためには、「いいね」ボタンを押した直後に（サーバからのレスポンスを受け取る前）UIを更新する必要があります。これはStimulus Controllerで実現します。
  • Turboはネットワーク通信を行いますので、レスポンスを待っているともたつくUI/UXになる可能性があります。楽観的UIはこれを解消してくれます。Turboとネットワーク遅延

実装

実装は「子ページ」をそれぞれご確認ください。