🦧

React(TypeScript)の復習として簡単なTodoアプリを作ってみた話

2023/06/18に公開

React

TypeScript

tech

こんにちは、ぐらじえです。

最近Reactの復習として、超簡単なTodoアプリを作ってみたので、紹介できればと思います。
Reactの勉強や復習される際に活用していただけると嬉しく思います！

今回作成したTodoアプリ

今回作成してみたTodoアプリはこんな感じになります。

Todoアプリ

Todoを入力
「追加」ボタン押下でTodoが反映され、残りTodo件数も1件増える
「完了したTodoを削除」ボタン押下でチェック済みのTodoがすべて削除される

はい、めっちゃシンプルです。

コンポーネント化

コンポーネント（部品）として、どの粒度で分割するかは考え方、シーンによりけりかと思いますが、今回はこのようにコンポーネント化しています。

AddTodo：Todoの追加に関するコンポーネント
TodoList：Todoのリストを管理するコンポーネント（map関数を使って、Todoを格納）
Todo：1つ1つのTodoコンポーネント
DeleteTodo：Todoの削除に関するコンポーネント

ざっくり分けていますが、それぞの役割が明確でいいかなと思っています。

コンポーネントに分けるだけで、returnの中身がかなりスッキリ、わかりやすくなるので、ここがReactの最大のメリットだなと個人的に感じています。（あくまで個人的に、、）

App.tsx

import React, { useState } from "react";
import "./css/App.css";
import AddTodo from "./components/AddTodo";
import TodoList from "./components/TodoList";
import DeleteTodo from "./components/DeleteTodo";

type Todo = {
  id: number;
  task: string;
  completed: boolean;
};

function App() {
  const [todos, setTodos] = useState<Todo[]>([]);

  return (
    <div className="App">
      <h1>- Todoアプリ -</h1>
      <AddTodo todos={todos} setTodos={setTodos} />
      <TodoList todos={todos} setTodos={setTodos} />
      <p>残りTodo件数 : {todos.length}件</p>
      <DeleteTodo todos={todos} setTodos={setTodos} />
    </div>
  );
}

export default App;

後は各コンポーネントごとに要件通りコーディングしていくのみです。
各コンポーネントのソースを見たい方はGitHubまで！

ReactHook

今回は「フック」として、下記の2つを使用しました。

useState
useRef

useState

状態変数として、これら3つを管理しています。

id
task
completed

useState

TypeScriptで記載する場合は、こんな感じになるかと思います。

App.tsx

import React, { useState } from "react";
...
type Todo = {
  id: number;
  task: string;
  completed: boolean;
};
...
const [todos, setTodos] = useState<Todo[]>([]);

useRef

Todo追加の際のインプットの中身を参照する際に使用しました。
inputタグの属性にrefを使用するだけで、入力値が参照できるので、かなり便利です！
useRef

TypeScriptで記載する場合は、こんな感じになるかと思います。

AddTodo.tsx

import React, { useRef } from "react";
...
const taskText = useRef<HTMLInputElement>(null)
...
<input type="text" placeholder="Todoを追加" ref={taskText} />

React開発で便利だと思ったツール類

ついでですが、最近Reactの開発で便利だと思ったツールを紹介させていただきます。
どれも有名かもですが、、

React Developer Tools

これめっちゃ便利です！
開発者ツールで"Components"を選択すると出てくるやつで、アプリを動かしながら、各コンポーネントの情報や、propsの情報まで確認できるという代物。
開発時にかなり重宝しています。

React Developer Tools

ES7+ React/Redux/React-Native snippets(VSCode拡張機能)

これを使うとファイルの雛形が一瞬で作成することができます。
これもなかなかに便利なのでよく使用しています。

以下3つのコマンド（私が知る限りでは3つ？）でそれぞれReactのひな形を作成することができます。

rafc
rafce
rafcp

snippets

まとめ

今回はReactの復習として、Todoアプリを作成してみた話を記事にしてみました。
正直やってる内容自体はそこまで難しくないので、結構初学者向けのレベル感になってる気がします。
Reactチュートリアルなど一通り試した後に腕試し感覚で、このような簡単なアプリケーションを作成することでよりReactへの理解が深まる気がします！

最後まで読んでくださった方、ありがとうございました！！！

今回作成したTodoアプリ

コンポーネント化

ReactHook

useState

useRef

React開発で便利だと思ったツール類

React Developer Tools

ES7+ React/Redux/React-Native snippets(VSCode拡張機能)

まとめ

Discussion