ユースケース: Todoアプリ

ここではブラウザで動作するウェブアプリケーション（以下アプリ）のユースケースとして、Todoアプリを作成していきます。 ここで作成するTodoアプリは、タスクを入力し、そのタスクの完了状態をチェックボックスで管理するというアプリです。

Ajax通信のユースケースではGitHubからデータを取得して表示するだけであったため、状態を管理する部分はほとんどありませんでした。 しかし、このTodoアプリはタスクの状態管理をするため、アプリとしての状態を管理する必要があります。 このユースケースを通して、どのように状態を管理し、表示や処理を変更するかといったアプリを作るにあたり必要になる設計や考え方について見ていきます。

作成するアプリは次の要件を満たすものとします。

• Todoアイテムを追加できる
• Todoアイテムの完了状態を更新できる
• Todoアイテムを削除できる

目次

エントリーポイント

HTMLとJavaScriptモジュールを使って、アプリケーションで一番最初に呼び出されるエントリーポイントを作成します。

アプリの構成要素

これから実装するTodoアプリの機能と構成要素を見ていきます。

Todoアイテムの追加を実装する

TodoアプリへTodoアイテムを追加するフォームを作成していきます。フォームに入力された内容と送信イベントをどのようにハンドリングしていくかを見ていきます。

イベントとモデル

操作と更新が密結合になってしまい変更がしにくくなる問題を「モデル」と「イベント」を用いて改善する方法を見ていきます。

Todoアイテムの更新と削除を実装する

Todoアプリの残りの機能である「Todoアイテムの更新」と「Todoアイテムの削除」を実装していきます。

Todoアプリのリファクタリング

1つのファイルに処理が集中するとメンテナンス性が低下するため、Todoアプリの表示要素をコンポーネントという単位に分割するリファクタリングをしていきます。