inflearn logo
知識共有
inflearn logo

React + TypeScript TodoList App - 実務型TypeScriptプロジェクト入門

React + TypeScriptを活用して実務感覚で「タスク管理アプリ(ToDo List)」を直接作るプロジェクト中心のコースです。単純に文法を学ぶだけでなく、コンポーネント構造設計 → 状態管理 → 型適用 → 機能実装 → ローカルストレージ連携 → デプロイまで実際のサービス形態で完成させながらTypeScriptの活用感覚を身につけることができます。

難易度 初級

受講期間 無制限

HTML/CSS
HTML/CSS
JavaScript
JavaScript
React
React
TypeScript
TypeScript
HTML/CSS
HTML/CSS
JavaScript
JavaScript
React
React
TypeScript
TypeScript

受講後に得られること

  • React + TypeScript 開発環境構成

  • UIコンポーネント構造設計と状態管理の基礎

  • タスクの追加・完了・削除機能の実装

  • TypeScript活用ロジック最適化

  • リファクタリングと保守に強いコード構造設計

🧩 React + TypeScript TodoList App - TypeScriptプロジェクト入門

  • React + TypeScriptを活用して「タスク管理アプリ(ToDo List)」を直接作るプロジェクト中心コース

  • コンポーネント構造設計 → 状態管理 → 型適用 → 機能実装 → ローカルストレージ連携 → デプロイ

  • 基礎文法をアプリ開発に直接適用しながら、Reactの実務環境でTSを自然に習得できるように構成しました。


最終デプロイされた完成版を直接確認してみてください。

https://web-todo-ts.vercel.app/

  • タスクのタイトルを入力し、いつまでに完了するか期限日を選択後、追加ボタンをクリックします。

  • タスクのタイトルをクリックして完了に切り替えてみてください。

  • 編集ボタンをクリックして、タスクのタイトルを修正してみてください。

  • 削除ボタンをクリックしてタスクを削除してみてください。


やることリストの出力


やることを修正する

こんな方におすすめです

TypeScriptを学習したが、実際のプロジェクトに適用したことがない方

Reactで簡単なアプリを作ってみたものの、型安全性のないコードに不安を感じている方

ポートフォリオ用React + TypeScript ミニプロジェクトを完成させたい方

受講後には

  • ReactプロジェクトにTypeScriptを自然に適用する方法を学びます。

  • コードの型安全性と生産性を同時に確保する感覚を身につけます。

  • 実務アプリ設計の基本であるコンポーネント分離と状態フローを明確に理解します。

  • 完成されたTodoList Appをポートフォリオにすぐに活用できます。

こんな内容を学びます

React + TypeScript 開発環境構成

vite、parcel、rsbuildの比較およびアプリ作成、共通タイプ設定

UIコンポーネント構造設計及び状態管理基礎

入力フォーム、ToDoリストコンポーネント構成、propsとstateの型指定

UIコンポーネント構造設計と状態管理の基礎

入力フォーム、ToDoリストコンポーネント構成、propsとstateの型指定

TypeScript活用ロジック最適化

インターフェース、ユニオン型、オプショナルプロパティなど実務型タイプ活用

ウェブアプリデプロイ

GitHubとVercelサービスを利用して完成したプロジェクトをデプロイします。

githubとvercelを活用したデプロイ

受講前の参考事項

前提知識および注意事項

  • この講義はReactとTypeScriptを初めて学ぶ入門者でも受講できるコースです。
    HTML、CSS、JavaScriptの基本文法を知っていれば十分についていくことができ、
    Reactの基礎文法(コンポーネント、props、useState)について簡単な理解があればより円滑に進めることができます。
    コード中心で進行するため、理論よりも直接作りながら身につける実習型授業を目指しています。

  • コード中心の講義なので、IDE(Visual Studio Code)環境で一緒にタイピングして進めることをお勧めします。

  • この講義の動画、コード例、画像、教材などの資料はすべてezwebに著作権があります。
    ただし、受講生は個人学習およびポートフォリオ用途で例題コードを自由に活用していただけます。
    講義で扱うすべての例題は教育目的の実習用コードであり、商業的利用時は別途許可が必要です。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • TypeScriptを学習したが、実際のプロジェクトに適用してみたことがない方

  • Reactで簡単なアプリを作ってみたものの、型安全性のないコードに不安を感じている方

  • ポートフォリオ用React + TypeScript ミニプロジェクトを完成させたい方

  • 実務で求められるコンポーネントベース設計と状態管理の基礎を固めたいフロントエンド入門者

前提知識、
必要でしょうか?

  • HTML/CSS

  • JavaScript

  • TypeScript

こんにちは
ezwebです。

2,786

受講生

62

受講レビュー

4

回答

4.9

講座評価

13

講座

■ [現在] ESTSOFT KDT フロントエンド講師
■ グリーンコンピュータアート学院 ウェブパブリッシング、フロントエンド講師
■ ウェブパブリッシングYouTubeチャンネル「Rock's Easyweb」運営
■ ザ・ジョウンコンピュータアカデミー ウェブパブリッシング講師
■ ハンビッコンピュータアカデミー ウェブパブリッシング講師
■ フロントエンドパブリッシャー、フロントエンドパブリッシング専門講師
■ UI/UXウェブデザインポートフォリオ講義


[ 書籍 ]
2021.07.19 刊行 / ウェブデザイン&ウェブパブリッシングのためのFigma完璧活用書 / BJ Public

2022.08.25 出版 / コーディングは初めて with ウェブパブリッシング / ヨンジン出版社

2023.10 出刊 /2024 SDエデュ ユ・ソンベ ウェブデザイン技能士 実技 家庭教師ノート / 時代考試企画

2024.11 重版 /2025 SDエデュ ユーソンベ ウェブデザイン技能士 実技 家庭教師ノート / 時代考試企画

2025.11 重版 /2026 SDエデュ ユ先生のウェブデザイン技能士実技家庭教師ノート / 時代考試企画

 

[ 受賞歴 ]
2022.08 グリーンコンピュータアート学院 鐘路支店 - 優秀講師 2021.06 グリーンコンピュータアート学院 鐘路支店 - 優秀講師 2018.06 グリーンコンピュータアカデミー 新村支店 - 優秀講師 2017.05 グリーンコンピュータアカデミー 新村支店 - 優秀講師 2016.05 グリーンコンピュータアカデミー 新村支店 - 優秀講師 2015.10 グリーンコンピュータアカデミー 新村支店 - 優秀講師

 

 

 

もっと見る

カリキュラム

全体

14件 ∙ (3時間 23分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

1件

5.0

1件の受講レビュー

  • pan5158a1332님의 프로필 이미지
    pan5158a1332

    受講レビュー 3

    平均評価 5.0

    5

    64% 受講後に作成

    ezwebの他の講座

    知識共有者の他の講座を見てみましょう!

    似ている講座

    同じ分野の他の講座を見てみましょう!

    ¥4,279