React

React + TypeScript でTodoリストを作る!サンプルを用いて解説

こんにちは、アプリ開発者のテルです!

「React + TypeScript の基本的な使い方を知りたい」とお悩みではないでしょうか?

テル

本記事ではそんな悩みを解決していきます!

本記事を読むメリット
  1. Todoリストの作り方をサンプルで理解できる
  2. コードを公開しているので、自分の環境で確かめることができる

React + TypeScript Todoリストの作り方

事前準備

パッケージをインストール

今回使用するパッケージは特にありません。

プロジェクト構成

今回実装するアプリの「リポジトリ構成」と「完成イメージ」は以下の通りです。

リポジトリ構成

完成イメージ

今回実装するTodoリストは、上記の通りです。TypeScriptがReact開発でどのように使われるかという雰囲気を掴むための簡単な内容になっています。

では早速、こちらのアプリを作っていきましょう!

ソースコード

Index.js

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import Example from "./Example";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <Example />
  </StrictMode>
);

Example.tsx

import React, { useState } from "react";
import TaskList from "./TaskList";

// Todoの内容の型を定義
export type Todo = {
  id: number;
  text: string;
};

const Example = () => {
  const [inputText, setInputText] = useState("");
  // 状態管理する対象をTodoとする
  const [todos, setTodos] = useState<Todo[]>([
    { id: 0, text: "Todo1" },
    { id: 1, text: "Todo2" },
    { id: 2, text: "Todo3" }
  ]);

  // eventの型を指定
  const changeHandler = (e: React.ChangeEvent<HTMLInputElement>) =>
    setInputText(e.target.value);

  const addTodo = () => {
    setTodos((state) => [...state, { id: state.length, text: inputText }]);
    setInputText("");
  };

  return (
    <>
      <input type="text" value={inputText} onChange={changeHandler} />
      <button onClick={addTodo}>+</button>
      <TaskList todos={todos} />
    </>
  );
};

export default Example;

TodoList.tsx

import React from "react";
import type { Todo } from "./Example";

// propsの型を定義
type TaskListProps = {
  todos: Todo[];
};

const TaskList: React.FC<TaskListProps> = ({ todos }) => {
  return (
    <ul>
      {todos.map((todo) => {
        return <li key={todo.id}>{todo.text}</li>;
      })}
    </ul>
  );
};

export default TaskList;

大変お疲れ様でした!以上でアプリは完成です!

⬇︎Todoリストを作成することでわかること

  1. コンポーネント分割の方法
  2. コンポーネント間でのstateの受け渡し方
  3. イベントリスナーの使い方
  4. map/filterメソッドの使い方

Todoリストの作成は、React開発の基礎の部分を押さえられるので初心者の方には非常におすすめです。上記のコードを参考に、ぜひ色々と試してみてください!

▼JS版もあるので興味がある方はぜひご覧ください。

まとめ

今回は「React + TypeScript の基本的な使い方」を解説しました。

今回解説したTodoリストは、TypeScriptがReact開発でどのように使われるかという雰囲気を掴むための簡単な内容でした。

TypeScriptを本格的に学びたい場合は「Udemy」がおすすめです。私も含め、現役エンジニアの多くが技術のキャッチアップに利用しています。

▼TypeScript学習におすすめのUdemy講座はこちら

本記事が参考になっていれば幸いです。

最後までご覧いただきありがとうございました。ではまた!

エンジニア就活対策