技術

【基礎編】React + TypeScript でシンプルな TODO アプリを実装①

レザボア・コンサルティングの中西です。

本記事では、React + TypeScript でシンプルな TODO アプリを実装する手順を紹介します。

React とは

React は Facebook によって開発された、ユーザーインターフェースを構築するための JavaScript ライブラリです。

（参考） react.dev

React は コンポーネントベースのアプローチを採用しており、再利用可能なUI部品を作成できます。そのため、動的なウェブアプリケーションのフロントエンド開発に多く用いられています。

TypeScript とは

TypeScript は Microsoft の Anders Hejlsberg 氏によって設計された JavaScript のスーパーセットで、大規模アプリケーションの開発に適しています。

JavaScript に静的型付けとクラスベースオブジェクト指向を導入することで、コードの品質と効率を向上させ、大規模なプロジェクトでの開発を容易にします。

（参考）TypeScript

開発環境情報

  • macOS（13.5.1）
  • Node.js（v21.3.0）

エディタは Visual Studio Code を利用しています。

手順1. React のセットアップ

任意のディレクトリで、以下のコマンドを実行します。

npx create-react-app my-todo-app --template typescript

このコマンドにより、TypeScript を用いた React アプリケーションの雛形が作成されます。

このまま開発に移っても良いのですが、せっかくなので見た目は Material UI で整えながら進めたいと思います。

Material UI とは、 Google のマテリアルデザインの仕様を用いた React のUI コンポーネントライブラリです。

洗練されたデザインを素早く実現することができるため、フロントエンド開発のデザイン時に重宝します。

以下のコマンドで Material UI をインストールします。

cd my-todo-app
npm install @mui/material @emotion/react @emotion/styled

この時点で、以下のようなディレクトリ構造になっています。

react-typescript-todo-app-01

package.json の dependencies は以下の通りです。

"dependencies": {
    "@emotion/react": "^11.11.3",
    "@emotion/styled": "^11.11.0",
    "@mui/icons-material": "^5.15.4",
    "@mui/material": "^5.15.4",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.71",
    "@types/react": "^18.2.48",
    "@types/react-dom": "^18.2.18",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  }

手順2. 単一の TODO コンポーネントの作成

まずは、TODO 1つを管理するためのコンポーネントを作成します。

src/
├─ App.tsx
├─components
└── TodoItem.tsx

上記のように、 components ディレクトリを追加し、 TodoItem.tsx を作成します。

JSX（JavaScript XML）は、Reactで使用される構文拡張です。HTMLのように見えますが、実際にはJavaScriptの表現です。JSXを使うことで、Reactのコンポーネントのレンダリングロジックを視覚的かつ宣言的に記述することができます。

React で TypeScript を用いる場合、 JSX の記述があるファイルの拡張子は .tsx である必要があります。

TodoItem.tsx は以下のように記述します。

import React from 'react';
import { Card, CardContent } from '@mui/material';

interface TodoItemProps {
  todo: {
    id: number;
    text: string;
  };
}

const TodoItem: React.FC<TodoItemProps> = ({ todo }) => {
  return (
    <Card>
      <CardContent>{todo.text}</CardContent>
    </Card>
  );
};

export default TodoItem;

TODO は、まずはシンプルに Id と TODO 名だけを持つプロパティを定義します。

Material UI の Card を用いて見た目を整えます。

手順3. TODO コンポーネントのリストの作成

手順2 では、一つの TODO を管理するコンポーネントを作成しました。
次に、これをリスト表示してみます。

src/
├─ App.tsx
├─components
└── TodoList.tsx
└── TodoItem.tsx

TodoList.tsx を追加します。

import React, { useState } from 'react';
import TodoItem from './TodoItem';
import { TextField, Button } from '@mui/material';

interface Todo {
  id: number;
  text: string;
}

const TodoList: React.FC = () => {
  const [todos, setTodos] = useState<Todo[]>([]);
  const [input, setInput] = useState('');

  const addTodo = () => {
    setTodos([...todos, { id: Date.now(), text: input }]);
    setInput('');
  };

  return (
    <div>
      <TextField label="TODOを追加" value={input} onChange={(e) => setInput(e.target.value)} />
      <Button onClick={addTodo}>追加</Button>
      {todos.map((todo) => (
        <TodoItem key={todo.id} todo={todo} />
      ))}
    </div>
  );
};

export default TodoList;

先ほど作成した TodoItem を追加できるよう、入力欄とボタンを配置します。
Reactの useState は、関数コンポーネント内で状態（state）を管理するためのフックです。これにより、状態を持つことができます。

（参考）useState

手順4. TODO リストを表示

ここまでで TODO を表示・管理するためのコンポーネントが作成できました。

App.tsx を修正し、画面に表示する準備を整えます。
テンプレート作成時点で App.tsx はすでに存在しているため、内容を上書きします。

import React from 'react';
import TodoList from './components/TodoList';

const App: React.FC = () => {
  return (
    <div>
      <h1>TODO アプリ</h1>
      <TodoList />
    </div>
  );
};

export default App;

手順5. 動作確認

以下のコマンドを実行します。

npm start

アプリケーションが Port 3000 で起動していると思います。

http://localhost:3000/ にアクセスします。

react-typescript-todo-app-01_2

このような画面が表示されれば成功です。

入力欄にタスク名を入力し、「追加」 ボタンを押して、タスクが追加できることも確認してみてください。

react-typescript-todo-app-01_3

おわりに

本記事では、React + TypeScript でシンプルな TODO アプリを実装してみました。

React による実装イメージと、 Material UI によるデザインの良さが伝わったでしょうか。

React は人気のライブラリであるため、ぜひキャッチアップしておきたいですね。

関連記事

TOP