강의

멘토링

로드맵

NEW
Programming

/

Web Development

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

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

5名 が受講中です。

  • ezweb
프론트엔드개발자#취업준비생
웹개발
typescript
react
HTML/CSS
JavaScript
React
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

こんにちは
です。

2,554

受講生

50

受講レビュー

3

回答

4.9

講座評価

10

講座

■ [현재] 그린컴퓨터아트학원 웹퍼블리싱, 프론트엔드 강의
■ [현재] 웹 퍼블리싱 유튜브 채널 'Rock's Easyweb' 운영
■ 더조은 컴퓨터아카데미 웹 퍼블리싱 강사
■ 한빛 컴퓨터아카데미 웹 퍼블리싱 강사
■ 프론트엔드 퍼블리셔, 프론트엔드 퍼블리싱 전문강사
■ UI/UX 웹 디자인 포트폴리오 강의


[ 도서 ]
2021.07.19 출간 / 웹디자인 & 웹퍼블리싱을 위한 피그마 완벽 활용서 / 비제이퍼블릭

2022.08.25 출간  / 코딩을 처음이라 with 웹 퍼블리싱  / 영진출판사

2023.10 출간 /2024 SD에듀 유선배 웹디자인기능사 실기 과외노트 / 시대고시기획

2024.11 재판 /2025 SD에듀 유선배 웹디자인기능사 실기 과외노트 / 시대고시기획

 

[ 수상경력 ]
2022.08 그린컴퓨터 아트 학원 종로지점 - 우수강사 2021.06 그린컴퓨터 아트 학원 종로지점 - 우수강사 2018.06 그린 컴퓨터아카데미 신촌 지점 - 우수강사 2017.05 그린 컴퓨터아카데미 신촌 지점 - 우수강사 2016.05 그린 컴퓨터아카데미 신촌 지점 - 우수강사 2015.10 그린 컴퓨터아카데미 신촌 지점 - 우수강사 

 

 

 

カリキュラム

全体

14件 ∙ (3時間 23分)

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

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

受講レビュー

まだ十分な評価を受けていない講座です。
みんなの役に立つ受講レビューを書いてください!

期間限定セール

¥9

66%

¥4,090

ezwebの他の講座

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

似ている講座

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