Todo List (React + TypeScript)

ReactとTypeScriptの基礎を学ぶために作成したTodoリストアプリです。

🌐 デプロイURL

https://your-todo-app.vercel.app/

🚀 概要

Viteを使用して環境構築し、Reactの基本的なフック（useState）や、TypeScriptでの型定義、イベントハンドリング（onChange, onSubmit）を実装しました。

🛠 機能

• 作成 (Create): 新しいタスクの追加
• 表示 (Read): タスク一覧のレンダリング
• 更新 (Update): タスクの編集・完了チェック
• 削除 (Delete): 不要なタスクの削除

📚 学んだこと

• TypeScript: インターフェース（Type）を使ったデータの型定義。
• React State: 複数のState（入力値とリスト）の管理。
• CSS Hierarchy: index.css と App.css の優先順位や影響範囲。

💻 実行方法

npm install
npm run dev

📺 クレジット

このプロジェクトは、以下のチュートリアル動画を参考に学習・作成しました。

参考動画： Todoリストを作りながらTypescriptとReactを触ってみよう ~Typescript入門~ （チャンネル名：プログラミングチュートリアル / Shincode）

📝 この動画から学んだこと

• TypeScriptの型定義: type キーワードを使用したTodoオブジェクトの構造化 [00:10:45]
• React Hooks × TS: useState でのジェネリクス（<Todo[]>）を用いた型指定 [00:11:45]
• イベントハンドリング: onChange や onSubmit におけるイベントオブジェクト（React.ChangeEvent 等）の型指定 [00:14:50]
• CRUD操作の実装: マップ関数やフィルター関数を用いたリストの編集・削除ロジック [00:27:00]

分かりやすい解説を提供してくださったShincodeさんに感謝いたします。