フロントエンド

ToDo管理のフロントエンドを、次の順で実装していきます。

目次

ページ外観の作成

ToDoページの外観を作成します。

コンポーネントの分割

ToDoページをコンポーネントに分割します。

REST APIクライアントの作成

REST APIクライアントコードを使用する準備として、クライアントコードをラッピングしたオブジェクトを作成します。

CORSの設定

バックエンドのREST APIにアクセスできるようにするため、CORSを設定します。

モックサーバの起動

OpenAPIドキュメントを使用してモックサーバを起動し、REST APIの呼び出しをテストできるようにします。

ToDoの一覧表示

ToDoページで登録されているToDoを一覧表示できるように実装します。

ToDoの登録

ToDoページで新しいToDoを登録できるように実装します。

ToDo状態の更新

ToDoページでToDoの状態を更新できるように実装します。

ToDo一覧の絞り込み

ToDoページで表示されるToDoを絞り込みできるように実装します。