React + TS徹底フォーカス：TypeScriptマスター with React（動画コース）

Typescript-with-React-Master-Course.pdf

【「TypeScriptをReactで使う」に徹底フォーカスした実践動画コース】

■「TypeScriptだけ」、あるいは「Reactだけ」にフォーカスした教材はいくつもありますが、本コースのように「TypeScriptをReactで使う」という点に重点を置いたものはほぼありません。

■「TypeScriptをReactで使う」にフォーカスした本コースで、2025年の必須スキルを身につけましょう。

◆ 2025年のフロントエンド開発現場で必須のTypeScript。基礎から高度な内容までを全カバー

◆ 最新のReactバージョン19に完全対応

◆ 2025年3月リリース。

◆「TypeScriptをReactで使う」という点に徹底フォーカス。React + TypeScript開発で必須の知識とスキルを効率的に獲得

◆ 最新のReact開発環境構築ツール「React + Vite」を使用

◆「手を動かしがら学ぶ」ハンズオン形式なので、最後まで飽きづらい構成

◆ 自信をもってReact + TypeScriptコードが書けるようになるワンストップのマスターコース

【対象者】

◆ 2025年のReact開発現場スタンダードのスキルを身につけたい人

◆ 理論重視ではなく、手を動かす実践ベースで学習を進めたい人

◆ Reactの基礎を学習した人

◆ Reactアプリを数回作ったことのある人

◆ TypeScriptのコードは複雑でむずかしいと感じている人

◆ TypeScript初心者〜中級者

◆ TypeScriptのコードを「なんとなく」書いている人

【発売日】
2025年3月19日

【動画数／時間】
数：49本
コースの長さ：4時間37分20秒

【視聴】
下記ページにて、数本の動画をお試しで公開しています。
▶︎▶︎ https://monotein-master-videos-viewing.netlify.app

【商品について】
本コースは動画配信プラットフォームVimeoにパスワード付きで用意してあります。本商品を購入すると、Vimeoへのリンクと閲覧パスワードの記載されたPDFファイルがダウンロードいただけます。

【本コースで利用するテクノロジーおよびバージョン情報等】
OS：Mac（Sequoia）
ブラウザ：Googleクローム
Node.jsバージョン22
Reactバージョン19
VS Code

*本ショッピングサイトは、ネットショップ開設サービス「BASE（ベイス）」を利用して作られています。決済サービスもBASE社の提供しているものです。

---------------------

【コースの内容】（4時間37分20秒）

◆ セクション１　TypeScriptについて知ろう（11分50秒）
【1-1】このセクションで学ぶこと
【1-2】データとTypeScript
【1-3】TypeScriptをむずかしいと感じる理由
【1-4】TypeScriptの追加機能
【1-5】Reactの予備知識

◆ セクション２　TypeScriptでReactアプリを開発しよう　その１（1時間34分17秒）
【2-1】このセクションで学ぶこと
【2-2】バックエンドの準備
【2-3】開発ツールのインストール
【2-4】ReactコンポーネントをTypeScriptで書く
【2-5】アプリの構成を確認する
【2-6】イベントとfunctionに型をつける　その１
【2-7】イベントとfunctionに型をつける　その２
【2-8】複雑な構造のデータに型をつける
【2-9】フォームの入力文字を消す
【2-10】画像とCSSを追加する
【2-11】ローディングを追加する
【2-12】childrenに型をつける
【2-13】action属性の利用（Reactバージョン19）
【2-14】useActionStateの導入（Reactバージョン19）

◆ セクション３　TypeScriptだけを使ってみよう（12分45秒）
【3-1】このセクションで学ぶこと
【3-2】配列の型定義
【3-3】typeとinterface
【3-4】入れ子になった型定義（lookup型）

◆ セクション４　TypeScriptでReactアプリを開発しよう　その２（1時間55分38秒）
【4-1】このセクションで学ぶこと
【4-2】アプリの構造の確認
【4-3】ページとルーティングの準備
【4-4】ユーザー登録機能の開発　その１（基礎づくり）
【4-5】ユーザー登録機能の開発　その２（Zodバリデーション導入）
【4-6】ログイン機能の開発
【4-7】複数のデータを受け取るコンポーネントの開発
【4-8】柔軟な型を定義してコンポーネントを汎用化
【4-9】外部データを取得するコンポーネントの開発
【4-10】ローディングとボタンの開発
【4-11】複数の型定義を、ひとつのコンポーネントで使う方法
【4-12】CSSと画像の追加

◆ セクション５　TypeScriptをもっと使ってみよう（42分50秒）
【5-1】このセクションで学ぶこと
【5-2】CSSProperties
【5-3】ComponentProps
【5-4】引数とreturnがあるfunctionの型定義
【5-5】型アサーション（as）
【5-6】as const
【5-7】ユーティリティタイプ（Type Utility）
【5-8】anyとunknownの違い
【5-9】ジェネリクス　その１（型定義のジェネリクス）
【5-10】ジェネリクス　その２（functionのジェネリクス）
【5-11】ジェネリクス　その３（型定義とfunction両方のジェネリクス）
【5-12】ジェネリクス　その４（複数のジェネリクス）
【5-13】インデックス・シグネチャ（Index Signature）
【5-14】enum