---
author: azu
description: "ブラウザで動作するウェブアプリケーションの例としてTodoアプリを作成しながら、モジュールを使ったコード管理について紹介します。"
sponsors: []
---

# ユースケース: Todoアプリ {#todo-app}

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

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

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

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

<!-- 目次のアップデートでreflinkが消えるのでこの位置 -->

[ajax通信]: ../ajaxapp/README.md

## 目次 {#summary}

### [エントリーポイント](./entrypoint/README.md) {#entrypoint}

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

### [アプリの構成要素](./app-structure/README.md) {#app-structure}

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

### [Todoアイテムの追加を実装する](./form-event/README.md) {#form-event}

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

### [イベントとモデル](./event-model/README.md) {#event-model}

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

### [Todoアイテムの更新と削除を実装する](./update-delete/README.md) {#update-delete}

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

### [Todoアプリのリファクタリング](./final/README.md) {#final}

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