🦧

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

2023/06/18に公開

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

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

今回作成したTodoアプリ

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

https://github.com/grazie-a-k-a-keita/react-todo-app-demo

Todoアプリ

  1. Todoを入力
  2. 「追加」ボタン押下でTodoが反映され、残りTodo件数も1件増える
  3. 「完了した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の情報まで確認できるという代物。
開発時にかなり重宝しています。

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ja

React Developer Tools

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

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

https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

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

  • rafc
  • rafce
  • rafcp

snippets

まとめ

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

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

Discussion