API を使用した React Todo アプリ

概要: このチュートリアルでは、Todo リストを保存するために、React Todo アプリと API サーバーの統合を続けます。

API サーバーのセットアップ

まず、次のファイルをダウンロードし、todo-api などのコンピューター上のディレクトリに展開します。

Todo API サーバーのソースコードをダウンロード

次に、ターミナルを開き、プロジェクトディレクトリに移動します。

cd todo-apiCode language: JavaScript (javascript)

3番目に、次の npm コマンドを実行して、プロジェクトの依存関係をインストールします。

npm instalCode language: JavaScript (javascript)

最後に、npm start コマンドを実行して、API サーバーを起動します。

npm startCode language: JavaScript (javascript)

API サーバーが起動し、ポート 5000 でリッスンします。

http://localhost:5000/Code language: JavaScript (javascript)

次の表に API エンドポイントを示します。

API を React Todo アプリに統合する

React から API を呼び出すには、Web ブラウザーが提供する組み込みの Fetch API を使用できます。

Todo リストの表示

Todo アプリが初めて起動するときは、API GET /todos を呼び出して、すべての Todo 項目を取得し、画面に表示する必要があります。

そのためには、次の操作が必要です。

• API GET /todos を呼び出してすべての Todo 項目を取得し、todos 状態を更新する関数 getTodos を定義します。
• アプリが起動した最初の 1 回だけ、getTodos 関数を実行します。

まず、API を呼び出して todos 状態を更新する新しい関数 getTodos() を定義します。

const getTodos = async () => {
    const url = 'http://localhost:5000/todos';
    try {
      const response = await fetch(url, {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
        },
      });

      if (!response.ok) {
        throw new Error('Network response was not ok');
      }

      const storedTodos = await response.json();
      // Update the state
      if (storedTodos) setTodos(storedTodos);
    } catch (error) {
      console.error('Error during GET request:', error);
    }
  };Code language: JavaScript (javascript)

次に、コンポーネントが最初にレンダリングされたときに useEffect() フックを使用して getTodos() 関数を 1 回呼び出します。

useEffect(() => {
  getTodos();
}, []);Code language: JavaScript (javascript)

この構文では、useEffect は React のフックです。フックは、コンポーネントに機能を追加する関数です。

useEffect() フックを使用すると、特定の時点で関数を実行できます。2 つの引数を受け取ります。

• 関数
• 空の配列 ([])。

空の配列は、コンポーネントが最初にレンダリングされたときに関数を実行するように useEffect() フックに指示します。React フックについては、今後のチュートリアルで詳しく説明します。

新しい Todo 項目の作成

新しい Todo 項目を作成するには、次の操作が必要です。

• API POST /todos を呼び出して、データベースに新しい Todo 項目を作成します。
• setTodos 関数を使用して、新しい Todo を現在の Todos 状態に追加します。

createTodo() 関数の変更バージョンを次に示します。

const createTodo = async (title) => {
    // form a new todo
    const newTodo = {
      title: title,
      completed: false,
    };

    // call an API to create a new todo
    const url = 'http://localhost:5000/todos';
    try {
      const response = await fetch(url, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(newTodo),
      });

      if (!response.ok) throw new Error('Network response was not ok');

      const storedTodo = await response.json();

      // set a new state
      const updatedTodos = [...todos, storedTodo];

      setTodos(updatedTodos);
    } catch (error) {
      console.error('Error creating a todo:', error);
    }
  };Code language: JavaScript (javascript)

Todo 項目の削除

Todo 項目を削除するには、次の操作が必要です。

• API DELETE /todo/:id を呼び出して、データベースから ID で指定された Todo を削除します。
• 削除された Todo を todos 状態から削除します。

removeTodo() 関数の新しいバージョンを次に示します。

const removeTodo = async (id) => {
    // Delete the todo
    const url = `http://localhost:5000/todos/${id}`;

    try {
      const response = await fetch(url, {
        method: 'DELETE',
        headers: {
          'Content-Type': 'application/json',
        },
      });

      if (!response.ok) throw new Error('Network response was not ok');

      // Update the state
      const updatedTodos = todos.filter((todo) => todo.id !== id);
      setTodos(updatedTodos);
    } catch (error) {
      console.error('Error during DELETE request:', error);
      throw error;
    }
  };Code language: JavaScript (javascript)

Todo 項目の更新

Todo 項目を更新するには、次の操作が必要です。

• API PUT /todo/:id を呼び出して、ID で指定された Todo を更新します。
• 変更された Todo を todos 状態に更新します。

changeTodo() 関数の新しいバージョンを次に示します。

const changeTodo = async (id, newTitle, completed = false) => {
    // Update todo
    const url = `http://localhost:5000/todos/${id}`;

    const data = { title: newTitle, completed };

    try {
      const response = await fetch(url, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
      });

      if (!response.ok) {
        throw new Error('Network response was not ok');
      }

      const updatedTodo = await response.json();

      // Update the state
      const updatedTodos = todos.map((todo) => {
        if (todo.id === id) {
          return { ...todo, ...updatedTodo };
        }
        return todo;
      });
      setTodos(updatedTodos);
    } catch (error) {
      console.error('Error during PUT request:', error);
      throw error;
    }
  };Code language: JavaScript (javascript)

Todo アプリの残りの部分は変わりません。

API を使用した React Todo アプリをダウンロード

API を使用した React Todo アプリのソースコードをダウンロード

概要

• Web ブラウザーが提供する Fetch API を使用して API を呼び出します。
• コンポーネントが表示された後に関数を 1 回実行するには、useEffect フックを使用します。