Reactを学んだら、次はTypeScriptを実際のプロジェクトに適用してみましょう。TodoListアプリを自分で作りながら、コンポーネントや状態に型を適用し、CRUD機能からLocalStorageへのデータ保存、デプロイまでを経験して、実務で活用できるReact + TypeScript開発の感覚を身につけていきます。
受講生 18名
難易度 初級
受講期間 無制限
React + TypeScript開発環境の構築
UIコンポーネントの構造設計および状態管理の基礎
やることの追加／完了／削除機能の実装
TypeScriptを活用したロジックの最適化
リファクタリングと保守に強いコード構造の設計
チャンネル登録 & いいね & コメントイベント
簡単なミッションを完了して50%割引クーポンをすぐに受け取りましょう。期間限定で提供される史上最高の特典を、今すぐ手に入れてください！
イベントに参加する：https://forms.gle/wcD2wRVeaG7B7fSj7
自分だけのTodoアプリを作りながら学ぶ実践TypeScriptプロジェクト
TypeScriptを勉強したものの、実際のReactプロジェクトでどのように使えばよいのか分からず困っていませんか？
この講義は、ReactとTypeScriptを活用して実際に動作する**タスク管理ウェブアプリ（Todo List App）**をゼロから完成させる、プロジェクト中心の講義です。
プロジェクトの作成から型定義、コンポーネント構成、状態管理、機能実装、最終的なデプロイまで、1つのプロジェクトを追いながら作り上げ、TypeScriptが実際の開発でどのように活用されるのかを体験します。
複雑な理論よりも、実際に作りながら身につける実習に重点を置きます。
講義をすべて受講すると、次のようなTodoアプリを実際に完成させることができます。
実際に使ってみて、どのような機能を実装するのか確認してみましょう。
タスクの登録：タイトルと期限を入力して新しいタスクを追加します。
完了状態の管理: チェックボックスでタスクの完了 여부を変更します。
タスクの編集：登録したタスクのタイトルと締切日を編集します。
タスクの削除：不要なタスクを一覧から削除します。
データ保存：ブラウザのローカルストレージを活用してデータを管理します。
自分で実装したWebアプリをGitHubとVercelを活用してインターネット上にデプロイするまでの過程を経験します。
1. JavaScriptからTypeScriptへ移行したい方
JavaScriptの基本文法は知っているものの、TypeScriptをプロジェクトでどのように活用すればよいか悩んでいる方に適しています。
2. Reactを学んだものの、実際のプロジェクト経験が不足している方
Reactのコンポーネントと状態管理の概念をシンプルなTodoアプリに直接適用しながら、開発のプロセスを学ぶことができます。
3. TypeScriptの型定義にまだ慣れていない方
インターフェース、ユニオン型、オプショナルプロパティなどを実際のプロジェクトコードで活用してみることができます。
4. 小さなプロジェクトを最初から完成させたい方
UIの実装からデータ管理、主要機能の開発、デプロイまで、一つのプロジェクトを完成させたい方におすすめです。
ReactとTypeScriptのプロジェクトを作成し、実習に必要な開発環境を準備します。
プロジェクトの作成および開発環境の設定
共通型の定義およびプロジェクト構造の理解
実際のプロジェクトでTypeScriptを活用する方法
Todoアプリの画面を構成しながら、ReactのコンポーネントとTypeScriptを併用します。
Todo入力フォームと一覧UIの実装
コンポーネント構造を理解する
PropsとStateに型を適用する
Todoデータを管理する基本構造の構築
Todo管理に必要な機能を実装しながら、TypeScriptの型定義と活用方法を学びます。
Todoの登録および一覧表示
完了および未完了状態の切り替え
タスクの編集および削除
インターフェースとユーティリティ型の活用
ローカルストレージを活用したデータ管理
実装したコードをレビューし、完成したプロジェクトをインターネット上に公開します。
コード全体のレビュー
GitHubを活用したプロジェクト管理
Vercelを利用したWebアプリのデプロイ
GitHubとVercelを活用したデプロイ
React + TypeScriptの開発環境を自分で構築できます。
データ構造に合わせて型を定義し、活用できます。
PropsとStateに型を適用して、コンポーネントを実装できるようになります。
タスクの登録、編集、削除、および完了状態の管理機能を実装できるようになります。
ローカルストレージでデータを管理する方法を理解できます。
完成したプロジェクトをGitHubとVercelを利用してデプロイできます。
このコースで学んだ内容をもとに、メモ帳やスケジュール管理など、ほかのReactミニプロジェクトにも挑戦できます。
この講義はReactとTypeScriptを初めて学ぶ初心者も受講できるコースです。
HTML、CSS、JavaScriptの基本文法を知っていれば十分ついていけます。
Reactの基礎文法（コンポーネント、props、useState）について簡単な理解があれば、よりスムーズに進められます。
コード中心で進めるため、理論よりも実際に作りながら身につける実習形式の授業を目指しています。
コード中心の講義のため、IDE（Visual Studio Code）環境で一緒にコードを入力しながら進めることをおすすめします。
この講義の動画、コード例、画像、教材などの資料にはすべてezweb に著作権があります。
ただし、受講生は個人学習およびポートフォリオ目的で、サンプルコードを自由にご利用いただけます。
講義で扱うすべての例は教育目的の実習用コードであり、商用利用には別途許可が必要です。
学習対象は
誰でしょう？
TypeScriptを学んだものの、実際のプロジェクトで活用したことがない方
Reactで簡単なアプリを作ってみたものの、型安全性のないコードに不安を感じている方
ポートフォリオ用のReact + TypeScriptミニプロジェクトを完成させたい方
実務で求められるコンポーネントベース設計と状態管理の基礎を身につけたいフロントエンド初心者
前提知識、
必要でしょうか？
html/css
javascript
typescript
キャリア認証
3,001
受講生
77
受講レビュー
4
回答
4.9
講座評価
15
講座
フロントエンドの実務教育から企業・機関への出張講義、オンライン講義の制作まで行う、Webフロントエンド専門講師です。
■ フロントエンド専門講義
HTML/CSS、JavaScript、React、Firebase、Figma、AIを活用したウェブ開発など
ウェブパブリッシングからフロントエンド実務まで、段階的な教育を行います。
■ 企業・機関・教育機関への出張講義が可能
企業の実務担当者向け研修、KDTコース、大学・スクールでの特別講義など
受講者の対象とレベルに合わせたカリキュラム構成および出張講義が可能です。
■ オンライン教育課程の設計・制作が可能
オンライン講義のカリキュラム企画から教材・PPT・実習資料・サンプルコードの制作、
講義の撮影およびコンテンツ納品まで、オンライン教育コンテンツの全工程に対応できます。
■ オンライン・オフライン講義の両方に対応
スクールでの対面講義だけでなく、リアルタイムのオンライン講義、録画型コンテンツの制作など
教育環境に合わせてさまざまな形式で実施します。
■ 主な活動
ESTSOFT KDT フロントエンド講義
グリーンコンピューターアカデミー Webパブリッシング・フロントエンド講義
WebパブリッシングのYouTubeチャンネル「ezweb」を運営
Webパブリッシング・Webデザイン関連書籍の執筆
■ 書籍
2021.07 / Webデザイン＆WebパブリッシングのためのFigma完全活用ガイド / ビージェイパブリック
2022.08 / コーディングが初めての人のための with ウェブパブリッシング / ヨンジン出版社
2023.10 / 2024 SDエデュ ユ・ソンベ ウェブデザイン技能士実技 個別指導ノート / 時代考試企画
2024.11 / 2025 SDエデュ ユ先輩 ウェブデザイン技能士 実技個別指導ノート / 時代考試企画
2025.11 / 2026 SDエデュ ユ・ソンベ ウェブデザイン技能士 実技個別指導ノート / 時代考試企画
全体
14件 ∙ (3時間 23分)
講座資料:
9. タスク編集 - UI実装
25:31
10. やることをチェックする
07:04
11. タスクを編集する
10:06
12. タスクを削除する
08:08
13. アプリレビュー
07:46
全体
1件
知識共有者の他の講座はこちら
同じ分野の他の講座を見てみましょう！
新規会員登録で25%OFF
￥3,222
25%
￥4,292
