inflearn logo
知識共有
inflearn logo

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

React + TypeScriptを活用し、実務感覚で「ToDoリスト(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コンポーネント構造の設計および状態管理の基礎

  • ToDoの追加 / 完了 / 削除機能の実装

  • TypeScriptを活用したロジックの最適化

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

"今もらわないと損!YouTube登録だけで受講料が半額"

チャンネル登録&高評価&コメントイベント

簡単なミッションを完了して、50%割引クーポンを今すぐ手に入れましょう。期間限定で提供される過去最大級の特典を、今すぐお見逃しなく!

イベントに参加する:https://forms.gle/wcD2wRVeaG7B7fSj7

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

  • React + TypeScriptを活用して「ToDoリストアプリ」を実際に作成するプロジェクト中心のカリキュラム

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

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


最終配布された完成版を直接確認してみてください。

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

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

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

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

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


TODOリストを表示する


ToDoの修正(TODOの修正)

このような方におすすめです

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

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

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

受講後には

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

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

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

  • 完成したTodoListアプリをポートフォリオにそのまま活用できます。

このような内容を学びます

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,802

受講生

63

受講レビュー

4

回答

4.9

講座評価

14

講座

■ [現在] 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

    受講レビュー 4

    平均評価 5.0

    5

    64% 受講後に作成

    ezwebの他の講座

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

    似ている講座

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

    ¥4,306