ユースケース: Todoアプリ

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

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

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

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

目次

エントリポイント

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

アプリの構成要素

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

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

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

イベントとモデル

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

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

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

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

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