Todoアプリここではブラウザで動作するウェブアプリケーション(以下アプリ)のユースケースとして、Todoアプリを作成していきます。ここで作成するTodoアプリは、タスクを入力し、そのタスクの完了状態をチェックボックスで管理するというアプリです。Ajax通信のユースケースではGitHubからデータを取得して表示するだけであったため、状態を管理する部分はほとんどありませんでした。このTodoアプリはタスクの状態管理をするため、アプリとしての状態を管理する必要があります。このユースケースを通して、どのように状態を管理し、表示や処理を変更するかといったアプリを作るにあたり必要になる設計や考え方について見ていきます。作成するアプリは次の要件を満たすものとします。Todoアイテムを追加できるTodoアイテムの完了状態を更新できるTodoアイテムを削除できる目次エントリーポイントHTMLとJavaScriptモジュールを使って、アプリケーションで一番最初に呼び出されるエントリーポイントを作成します。アプリの構成要素これから実装するTodoアプリの機能と構成要素を見ていきます。Todoアイテムの追加を実装するTodoアプリへTodoアイテムを追加するフォームを作成していきます。フォームに入力された内容と送信イベントをどのようにハンドリングしていくかを見ていきます。イベントとモデル操作と更新が密結合になってしまい変更がしにくくなる問題を「モデル」と「イベント」を用いて改善する方法を見ていきます。Todoアイテムの更新と削除を実装するTodoアプリの残りの機能である「Todoアイテムの更新」と「Todoアイテムの削除」を実装していきます。Todoアプリのリファクタリング1つのファイルに処理が集中するとメンテナンス性が低下するため、Todoアプリの表示要素をコンポーネントという単位に分割するリファクタリングをしていきます。