1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

React + TypeScriptでTodoリストを作りながら学んだ、コンポーネントの仕組みと状態管理のポイント

Posted at

React + TypeScriptでTodoリストを作りながら学んだ、コンポーネントの仕組みと状態管理のポイント

はじめに

最近、React と TypeScript を使ってTodoリストアプリを作成する機会がありました。単純なアプリケーションのように見えて、実は多くの学びがある開発プロセスでした。この記事では、開発中に気づいた興味深いポイントや、つまずいた部分とその解決策について共有します。

使用した技術スタック

  • React
  • TypeScript

実装のポイント

状態管理と型定義

type Todo = {
  value: string;
  // 本来はuuidが好ましい
  id: number;
  checked: boolean;
};

const [todos, setTodos] = useState<Todo[]>([]);
const [value, setValue] = useState<string>("");

Todoの型を明確に定義することで、型安全性を確保しました。各Todoは文字列の値、一意のID、完了状態を持ちます。

イベントハンドリング

入力値の取得

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  setValue(e.target.value);
};

React.ChangeEvent<HTMLInputElement> 型を使用することで、入力イベントの型安全性を確保しています。

フォーム送信

const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault();
  if (value === "") return;

  const newTodo: Todo = {
    value: value,
    id: todos.length,
    checked: false,
  };

  setTodos([...todos, newTodo]);
  setValue("");
};

e.preventDefault()でフォームのデフォルト送信動作を防ぎ、空の入力を防止しています。

つまずいたポイントと解決策

1. Todoの編集処理

const handleEdit = (id: number, value: string) => {
  const newTodos = todos.map((todo) => {
    if (todo.id === id) {
      todo.value = value;
    }
    return todo;
  });

  setTodos(newTodos);
};

なぜmapを使うのか?

  • 状態の不変性を保つため
  • 新しい配列を作成し、特定のTodoのみを更新
  • Reactの再レンダリングを効率的に行う

2. チェックボックスの状態管理

const handleChecked = (id: number, checked: boolean) => {
  const newTodos = todos.map((todo) => {
    if (todo.id === id) {
      todo.checked = !checked;
    }
    return todo;
  });

  setTodos(newTodos);
};

論理否定演算子!を使用して、現在の状態を反転させています。

3. Todoの削除

const handleDelete = (id: number) => {
  const newTodos = todos.filter((todo) => todo.id !== id);
  setTodos(newTodos);
};

filterメソッドを使用して、特定のIDを持つTodoを除外した新しい配列を作成します。

学んだこと

  1. 型の重要性

    • TypeScriptの型定義により、コードの信頼性が向上
    • イベントハンドリングの型安全性
  2. 状態管理の基本

    • 不変性の維持
    • mapfilterを使用した状態更新
    • スプレッド演算子による配列の展開
  3. イベントハンドリングの奥深さ

    • 異なるイベント型の理解
    • preventDefault()の重要性

おわりに

このTodoリストの開発を通じて、Reactと TypeScriptの基本的な仕組みをより深く理解できました。まだまだ改善の余地はありますが、着実に学びを深めていきたいと思います。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?