# 楽観的UIとは？
楽観的UIとは、ユーザーの操作が完了する前に、その結果を即座に画面に反映させる技術です。通常、データがサーバーと同期されるまでの待ち時間を短縮し、ユーザー体験を向上させることが目的です。操作後にすぐフィードバックを得られるため、特にレスポンスの遅いAPIや不安定なネットワーク下でも快適なユーザー体験を提供できます。

**Reactで楽観的UIを実装する際、以下の流れで進めます。**
- ローカル状態を即座に更新
- APIリクエストを送信
- レスポンスに基づき最終的な状態を確定

では、具体的にどのように楽観的UIを実装するのか、シンプルな例で見ていきましょう。

## 例：タスク管理アプリにおける楽観的UI
### 前提
サーバーからタスクを取得し、追加・更新・削除を行うシンプルなタスク管理アプリを例にします。

#### 1. タスクの追加機能
まず、タスクを追加するUIを考えます。通常のタスク追加処理では、サーバーにリクエストを送信し、そのレスポンスを待って画面を更新しますが、楽観的UIではそのリクエストの前に画面を更新します。

![img](/mosaic-code.jpg)
##### 実装のポイント
**楽観的な状態更新**
APIリクエストを行う前に、ローカル状態に新しいタスクを即座に追加します。この段階では、サーバーのレスポンスを待たず、あくまで「楽観的」にUIを更新します。

**APIリクエストの処理**
Supabaseを使ってサーバーに新しいタスクを送信します。サーバーからのレスポンスが返ってきた際に、タスクIDやステータスを更新して、最終的なデータをローカル状態に反映させます。

**エラーハンドリング**
万が一サーバー側でエラーが発生した場合、ローカルで追加したタスクを削除して、楽観的な更新を取り消します。これにより、ユーザーに不正なデータが表示され続けることを防ぎます。

#### 2. 削除機能
同様に、タスクを削除する際にも楽観的UIを適用できます。
![img](/mosaic-code.jpg)
## 楽観的UIのメリット
レスポンス速度の向上: APIリクエストの処理時間を待たずに、即座にUIが更新されるため、ユーザーの操作感が向上します。
ユーザーエクスペリエンスの向上: サーバーとの通信遅延を感じさせないスムーズな体験を提供できます。
## 楽観的UIのデメリット
サーバーとの不整合の可能性: サーバーとの通信が失敗した場合、表示されている内容が実際のデータと一致しなくなる可能性があります。このため、エラーハンドリングやロールバック処理が重要です。

# まとめ
Reactで楽観的UIを実装することで、ユーザー体験を大幅に向上させることができます。特に、APIのレスポンスが遅い場合や、リアルタイム性が求められるアプリケーションでは有効です。

# 最後に
他にも色々な記事を書いているので、よければ読んでいってください！

https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc

https://qiita.com/hukuryo/items/2c07c52ff3386d5d75b9

https://qiita.com/hukuryo/items/ebeb26823f944f143b11
[cv:issue_marketplace_engineer]

# 楽観的UIとは？
楽観的UIとは、ユーザーの操作が完了する前に、その結果を即座に画面に反映させる技術です。通常、データがサーバーと同期されるまでの待ち時間を短縮し、ユーザー体験を向上させることが目的です。操作後にすぐフィードバックを得られるため、特にレスポンスの遅いAPIや不安定なネットワーク下でも快適なユーザー体験を提供できます。

**Reactで楽観的UIを実装する際、以下の流れで進めます。**
- ローカル状態を即座に更新
- APIリクエストを送信
- レスポンスに基づき最終的な状態を確定

では、具体的にどのように楽観的UIを実装するのか、シンプルな例で見ていきましょう。

## 例：タスク管理アプリにおける楽観的UI
### 前提
サーバーからタスクを取得し、追加・更新・削除を行うシンプルなタスク管理アプリを例にします。

#### 1. タスクの追加機能
まず、タスクを追加するUIを考えます。通常のタスク追加処理では、サーバーにリクエストを送信し、そのレスポンスを待って画面を更新しますが、楽観的UIではそのリクエストの前に画面を更新します。

``` tsx
import { useState } from 'react';
import { supabase } from './supabaseClient';
import { Task } from './types';

type Task = {
  id: number;
  title: string;
  status: 'pending' | 'complete';
};

function TaskList() {
  const [tasks, setTasks] = useState<Task[]>([]);

  const addTask = async (title: string) => {
    // 1. 楽観的にローカル状態を更新
    const newTask: Task = { id: Date.now(), title, status: 'pending' };
    setTasks([...tasks, newTask]);

    try {
      // 2. サーバーにデータを送信
      const { data, error } = await supabase.from('tasks').insert([{ title }]);
      if (error) throw error;

      // 3. サーバーからのレスポンスに基づいて状態を更新
      setTasks((prevTasks) =>
        prevTasks.map((task) =>
          task.id === newTask.id ? { ...task, id: data[0].id, status: 'complete' } : task
        )
      );
    } catch (error) {
      setTasks((prevTasks) => prevTasks.filter((task) => task.id !== newTask.id));
      console.error('Error adding task:', error);
    }
  };

  return (
    <div>
      <h1>Task List</h1>
      <button onClick={() => addTask('New Task')}>Add Task</button>
      <ul>
        {tasks.map((task) => (
          <li key={task.id}>{task.title} ({task.status})</li>
        ))}
      </ul>
    </div>
  );
}

export default TaskList;
```
##### 実装のポイント
**楽観的な状態更新**
APIリクエストを行う前に、ローカル状態に新しいタスクを即座に追加します。この段階では、サーバーのレスポンスを待たず、あくまで「楽観的」にUIを更新します。

**APIリクエストの処理**
Supabaseを使ってサーバーに新しいタスクを送信します。サーバーからのレスポンスが返ってきた際に、タスクIDやステータスを更新して、最終的なデータをローカル状態に反映させます。

**エラーハンドリング**
万が一サーバー側でエラーが発生した場合、ローカルで追加したタスクを削除して、楽観的な更新を取り消します。これにより、ユーザーに不正なデータが表示され続けることを防ぎます。

#### 2. 削除機能
同様に、タスクを削除する際にも楽観的UIを適用できます。
``` tsx
const deleteTask = async (taskId: number) => {
  // 1. ローカル状態から即座にタスクを削除
  const previousTasks = tasks;
  setTasks(tasks.filter((task) => task.id !== taskId));

  try {
    // 2. サーバーに削除リクエストを送信
    const { error } = await supabase.from('tasks').delete().eq('id', taskId);
    if (error) throw error;
  } catch (error) {
    // エラーハンドリング（削除失敗時は元の状態に戻す）
    setTasks(previousTasks);
    console.error('Error deleting task:', error);
  }
};

```
## 楽観的UIのメリット
レスポンス速度の向上: APIリクエストの処理時間を待たずに、即座にUIが更新されるため、ユーザーの操作感が向上します。
ユーザーエクスペリエンスの向上: サーバーとの通信遅延を感じさせないスムーズな体験を提供できます。
## 楽観的UIのデメリット
サーバーとの不整合の可能性: サーバーとの通信が失敗した場合、表示されている内容が実際のデータと一致しなくなる可能性があります。このため、エラーハンドリングやロールバック処理が重要です。

# まとめ
Reactで楽観的UIを実装することで、ユーザー体験を大幅に向上させることができます。特に、APIのレスポンスが遅い場合や、リアルタイム性が求められるアプリケーションでは有効です。

# 最後に
他にも色々な記事を書いているので、よければ読んでいってください！

https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc

https://qiita.com/hukuryo/items/2c07c52ff3386d5d75b9

https://qiita.com/hukuryo/items/ebeb26823f944f143b11
[![image](https://firebasestorage.googleapis.com/v0/b/issue-pro-42602.appspot.com/o/topics%2F17fa658b-53c7-4ca0-a28b-e588ed1bd371?alt=media&token=2c00afff-85ff-4428-8d15-696ab676dcb0)](https://i-ssue.com/lp/check_salary)

楽観的UIとは？

続きは、単価診断を受けたエンジニア限定で公開中（30秒）

続きは、
単価診断を受けたエンジニア限定で公開中（30秒）