Todoアプリの設計と準備

学習の目標

本章では、以下の内容を学習します。

Todoアプリに必要な機能を整理し、設計する方法を理解する
React コンポーネントの適切な分割方法を学ぶ
Todoデータの構造設計を考える
新しいReactプロジェクトを作成してTodoアプリ開発の準備をする
Tailwind CSSでレスポンシブなデザインを設計する

はじめに

これまでReactの基本的な機能について学んできました。

useStateでの状態管理、Propsでのデータ受け渡し、イベントハンドリングなど、実用的なアプリケーションを作るための土台が整いました。

今回は、これらの知識を組み合わせて、実際に Todoアプリ を作成していきます。

Todoアプリは、プログラミング学習において非常に人気のある練習課題です。

シンプルに見えますが、データの追加・削除・更新という基本的なCRUD操作を含んでいるため、実際のWebアプリケーション開発で必要となるスキルを幅広く身につけることができます。

まずは、どのような機能が必要なのかを整理し、開発の準備を進めていきましょう。

必要な機能の整理

基本的な機能要件

Todoアプリに必要な機能を洗い出してみましょう。

一般的なTodoアプリには、以下のような機能があります。

Todo項目の表示

登録されているTodo項目を一覧で表示する機能です。

各Todo項目には、タスクの内容と完了状態が含まれます。

新しいTodo項目の追加

ユーザーが新しいタスクを入力して、Todo一覧に追加できる機能です。

入力フォームとボタンが必要になります。

Todo項目の完了・未完了の切り替え

既存のTodo項目をクリックすることで、完了状態と未完了状態を切り替える機能です。

完了したタスクは見た目でも分かるようにします。

Todo項目の削除

不要になったTodo項目を削除する機能です。

削除ボタンをクリックすることで、一覧から項目を取り除きます。

今回実装する機能

上記の基本機能の中から、今回のカリキュラムでは以下の機能を段階的に実装していきます。

まず最初に、 Todo一覧表示機能 から始めます。

サンプルデータを使って、Todoが画面に表示される基本的な仕組みを作ります。

次に、 Todo追加・削除機能 を実装します。

フォーム入力とuseStateを使った状態管理を組み合わせて、動的にTodoを管理する方法を学びます。

最後に、 完了状態の管理機能 を追加します。

各Todoの完了・未完了を切り替えられるようにして、より実用的なアプリケーションに仕上げます。

シンプルに始める理由

最初から高度な機能を盛り込もうとすると、複雑になりすぎて理解が困難になります。

そのため、まずはコアとなる基本機能に集中して、Reactの状態管理とコンポーネントの連携に慣れることを優先します。

基本的な仕組みが理解できたら、後から機能を追加したり改善したりすることができます。

コンポーネント構成の設計

コンポーネント分割の考え方

React開発では、画面を小さなコンポーネントに分割して開発を進めます。

適切にコンポーネントを分割することで、コードの再利用性が高まり、保守しやすくなります。

Todoアプリで必要になるコンポーネントを考えてみましょう。

App コンポーネント

アプリケーション全体を管理するメインのコンポーネントです。

Todoのデータを管理し、他のコンポーネントに必要なデータを渡します。

TodoForm コンポーネント

新しいTodoを追加するためのフォームコンポーネントです。

入力欄とボタンが含まれ、入力されたデータを親コンポーネントに送信します。

TodoList コンポーネント

Todo項目の一覧を表示するコンポーネントです。

複数のTodoItemコンポーネントをまとめて管理します。

TodoItem コンポーネント

個別のTodo項目を表示するコンポーネントです。

完了状態の表示や削除ボタンなどが含まれます。

コンポーネント間のデータの流れ

React では、データは親コンポーネントから子コンポーネントに向かって流れます（Props）。

逆に、子コンポーネントから親コンポーネントにデータを送りたい場合は、関数を渡して実行する方法を使います。

今回のTodoアプリでは、以下のようなデータの流れになります。

App コンポーネント（状態管理）
├── TodoForm コンポーネント
│   └── 新しいTodoデータを App に送信
└── TodoList コンポーネント
    └── TodoItem コンポーネント
        └── 削除や完了の操作を App に送信

このように、状態の管理は App コンポーネントで一元化し、各コンポーネントは必要な機能にのみ集中できるようにします。

Todoデータの構造設計

データの形式を決める

Todoアプリで管理するデータの構造を決めておきましょう。各Todo項目には、最低限以下の情報が必要です。

id

各Todo項目を一意に識別するための番号です。削除や更新の際に、どの項目を操作するかを特定するために使用します。

text

Todoの内容を表すテキストです。ユーザーが入力したタスクの説明が格納されます。

completed

そのTodoが完了しているかどうかを表すboolean値です。 true が完了、false が未完了を意味します。

具体的なデータ例

実際のデータは、以下のようなJavaScriptのオブジェクトとして管理します。

const todoData = [
  {
    id: 1,
    text: "React の基礎を学ぶ",
    completed: false
  },
  {
    id: 2,
    text: "Todoアプリを作成する",
    completed: false
  },
  {
    id: 3,
    text: "JavaScriptの復習をする",
    completed: true
  }
];

このように配列の中にオブジェクトを格納する形式にすることで、複数のTodo項目を効率的に管理できます。

また、map メソッドを使って一覧表示したり、filter メソッドを使って特定の条件のTodoだけを抽出したりすることも簡単になります。

新しいReactプロジェクトの作成

プロジェクトの作成

それでは、実際にTodoアプリ用の新しいReactプロジェクトを作成しましょう。

ターミナルを開いて、プロジェクトを作成したいフォルダに移動します。そして、以下のコマンドを実行してください。

npm create vite@latest todo-app -- --template react

コマンドが完了したら、作成されたフォルダに移動します。

cd todo-app

必要なライブラリをインストールします。

npm install

少し時間がかかるかもしれませんが、インストールが完了するまで待ちましょう。

以下のようなメッセージが表示されれば、依存関係のインストールが成功しています。

$ npm install

added 155 packages, and audited 156 packages in 11s

33 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Tailwind CSSの追加

今回のプロジェクトでもTailwind CSSを使用します。

以前の章で React プロジェクトに Tailwind CSSを導入する方法を学びましたので、同様の手順で進めます。

まず、ターミナルで以下のコマンドを実行してください。

npm install tailwindcss @tailwindcss/vite

このコマンドにより、Tailwind CSSとその関連ツールがインストールされ、設定ファイルが作成されます。

次に、プロジェクト直下に作成されている vite.config.js ファイルを開きます。

バージョンによって少し変わるかもしれませんが、最初は以下のように書かれているかと思います。

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
})

これを、以下のように変更します。

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [react(), tailwindcss()],
});

この設定により、TailwindはReactコンポーネントファイル内のクラス名を検出してCSSを生成するようになります。

次に src/index.cssファイルを開き、一旦中身をすべて削除してから、以下のコードを追加してください。

@import "tailwindcss";

この1行により、Tailwind CSSの全てのスタイルがプロジェクトに読み込まれます。

また、src/App.jsx ファイルを開いて、以下のように変更します。

function App() {
  return (
    <div className="min-h-screen bg-gray-50 py-8">
      <div className="max-w-md mx-auto">
        <h1 className="text-3xl font-bold text-center text-gray-800 mb-8">
          Todo アプリ
        </h1>
        <p className="text-center text-gray-600">
          準備完了！これからTodoアプリを作っていきます。
        </p>
        <p className="text-center text-red-500 mt-4">
          ここが赤字のテキストです。
        </p>
      </div>
    </div>
  )
}

export default App

では、プロジェクトが正しく作成できているか確認しましょう。

npm run dev

ブラウザで http://localhost:5173/ にアクセスして、Reactアプリケーションが正常に表示されることを確認してください。

ブラウザで確認すると、シンプルなタイトルが中央に表示されるはずです。

スクリーンショット

不要なファイルの整理

開発を始める前に、不要なファイルを整理しておきましょう。

src/App.css ファイルは今回使用しないため、ファイル自体を削除するか、中身を空にしておいてください。

rm src/App.css

Tailwind CSSでのレスポンシブデザイン

ここでは、今回のTodoアプリで使用するTailwind CSSの基本的なデザイン方針を決めていきます。

事前に方針を決めているだけですので、実際のスタイルは後の章で実装していきます。

基本的なレイアウト設計

Todoアプリのレイアウトは、スマートフォンでも使いやすいようにレスポンシブデザインにします。

今回のプロジェクトでは、以下の方針でデザインを進めます。

モバイルファースト

まずスマートフォンでの表示を基準にデザインし、必要に応じてタブレットやデスクトップでの表示を調整します。

適切な幅の制限

画面が大きい場合でも、アプリの幅を制限して読みやすさを保ちます。 max-w-md（最大幅448px）程度が適切でしょう。

中央配置

アプリ全体を画面の中央に配置することで、どの画面サイズでも使いやすくします。

カラーパレットの決定

一貫性のあるデザインにするため、使用する色を事前に決めておきます。

背景色

bg-gray-50: 全体の背景色（薄いグレー）
bg-white: カードやフォームの背景色

テキスト色

text-gray-800: メインのテキスト色（濃いグレー）
text-gray-600: サブテキスト色（中程度のグレー）
text-gray-400: プレースホルダー色（薄いグレー）

アクセント色

bg-blue-500: ボタンの背景色
text-blue-600: リンクやアクション色
bg-green-100: 完了済みTodoの背景色
bg-red-500: 削除ボタンの色

まとめ

本章では、Todoアプリの設計と開発準備について学習しました。理解できた内容は以下の通りです。

Todoアプリに必要な基本機能を整理し、段階的な開発計画を立てました
Reactコンポーネントの適切な分割方法とデータの流れを設計しました
Todoデータの構造を決定し、効率的な管理方法を理解しました
新しいReactプロジェクトを作成し、Tailwind CSSを導入して開発環境を整えました
レスポンシブデザインの基本方針とカラーパレットを決定しました

これで、Todoアプリ開発の準備が整いました。設計をしっかりと行うことで、実装時に迷うことなく効率的に開発を進めることができます。

次の章では、最初の機能として「Todo一覧表示機能」を実装していきましょう。