React + TS徹底フォーカス：TypeScriptマスター with React（動画コース）
- ダウンロード商品¥ 22,880
React + TS徹底フォーカス：TypeScriptマスター with React（動画コース） 視聴はこちら 👉👉 https://monotein-master-videos-viewing.netlify.app
「TypeScriptをReactで使う」に徹底フォーカスした実践動画コース
🟡 2025年のフロントエンド開発現場で必須のTypeScript。基礎から高度な内容までを全カバー 🟡 「TypeScriptをReactで使う」という点に徹底フォーカス。React + TypeScript開発で必須の知識とスキルを効率的に獲得 🟡 最新のReactバージョン19に完全対応 🟡 2025年3月リリース 🟡 最新のReact開発環境構築ツール「React + Vite」を使用 🟡 「手を動かしがら学ぶ」ハンズオン形式なので、飽きづらく、最後まで読み終えられる構成 🟡 自信をもってReact + TypeScriptコードが書けるようになる一冊 🟩「TypeScriptだけ」、あるいは「Reactだけ」にフォーカスした書籍はいくつもありますが、本教材のように「TypeScriptをReactで使う」という点に重点を置いた本はほぼありません。 🟩「TypeScriptをReactで使う」にフォーカスした本書で、2025年の必須スキルを身につけましょう。
🟩 対象者
🔶 2025年のReact開発現場スタンダードのスキルを身につけたい人 🔶 理論重視ではなく、手を動かす実践ベースで学習を進めたい人 🔶 Reactの基礎を学習した人 🔶 Reactアプリを数回作ったことのある人 🔶 TypeScriptのコードは複雑でむずかしいと感じている人 🔶 TypeScript初心者〜中級者 🔶 TypeScriptのコードを「なんとなく」書いている人
🟩 発売日と提供フォーマット
2025年3月19日 動画（49本／計4時間37分20秒） 本コースは動画配信プラットフォームVimeoにパスワード付きで用意してあります。本商品を購入すると、Vimeoへのリンクと閲覧パスワードの記載されたPDFファイルがダウンロードいただけます。 下記ページにて、数本の動画をお試しで公開しています。 ▶︎▶︎ https://monotein-master-videos-viewing.netlify.app
🟩 本コースで利用するテクノロジーおよびバージョン情報等
OS：Mac（Sequoia） ブラウザ：Googleクローム Node.jsバージョン22 Reactバージョン19 VS Code
🟩 カバーしている事項
🔷 プログラミング言語の役割 🔷 TypeScriptを使う理由 🔷 TypeScriptにむずかしさを感じる理由 🔷 JavaScriptとTypeScriptの違い 🔷 動的型付け言語と静的型付け言語 🔷 データの種類と形 🔷 オブジェクト 🔷 配列 🔷 プリミティブ 🔷 Reactの復習（function／コンポーネントの記法／分割代入） 🔷 React + Vite + TypeScriptのセットアップ 🔷 型定義の書き方 🔷 useStateの型 🔷 propsの型 🔷 分割代入したpropsの型の記法 🔷 イベントの型 🔷 イベントの型の記法 🔷 functionの型の構造 🔷 非同期処理の型 🔷 型を確認する方法 🔷 型推論 🔷 any型 🔷 複雑な構造をしたデータの型 🔷 Layoutコンポーネント 🔷 ローディングの設定 🔷 childrenの型 🔷 JSX.Element 🔷 React.ReactNode 🔷 React.ReactElement 🔷 Reactバージョン19による書き換え 🔷 formData 🔷 useActionState 🔷 TypeScriptの開発環境セットアップ 🔷 TypeScriptのコンパイル方法 🔷 TypeScriptとJavaScriptのコード比較 🔷 tsconfig.jsonの設定 🔷 interfaceとtypeの違い 🔷 配列の型定義 🔷 インターセクション型 🔷 lookup型 🔷 タプル型 🔷 ユニオン型 🔷 リテラル型 🔷 型引数 🔷 ジェネリクス 🔷 ジェネリクスの記法（Arrow function） 🔷 型ガード 🔷 ナローイング 🔷 ページ設定 🔷 useStateでオブジェクトを扱う方法 🔷 Local Storage 🔷 イベント・オブジェクトの型 🔷 ログイン状態の維持の仕組み 🔷 ログイン状態によって表示を変える 🔷 useEffectの働き 🔷 非Nullアサーション 🔷 Reactコンポーネントの汎用化 🔷 柔軟な型を定義する方法 🔷 非同期処理 🔷 型定義を共有する方法 🔷 入力データのバリデーション（Zod） 🔷 入力データの保持 🔷 型の確認方法 🔷 CSSProperties 🔷 ComponentProps 🔷 ComponentPropsWithoutRef 🔷 restオペレーター 🔷 functionの型定義 🔷 型アサーション（as） 🔷 as const 🔷 anyとunknown 🔷 Type Utility 🔷 Pick 🔷 Omit 🔷 Partial 🔷 Required 🔷 Record 🔷 ジェネリクス 🔷 型定義に使うジェネリクス 🔷 functionに使うジェネリクス 🔷 型定義とfunction両方に使うジェネリクス 🔷 複数のジェネリクス 🔷 インデックス・シグネチャ 🔷 enum
🟩 講師について：三好アキ
Amazonベストセラー1位を複数回獲得している『はじめてつくるReactアプリ with TypeScript』や、『動かして学ぶ！Next.js/React開発入門（翔泳社／2024年）』などの著者。 自身のJavaScript挫折経験をもとに、HTMLとCSSの知識だけで本格的なアプリ開発を始められる教材制作を得意とする。 専門用語なしでプログラミングを教えるメソッドに定評があり、1200人以上のビギナーを、最新のフロントエンド開発入門に成功させる。 🔷 既刊書（Amazon） → https://www.amazon.co.jp/stores/author/B099Z51QF2 🔷 Udemy → udemy.com/user/aki-miyo 🔷 ウェブサイト → https://monotein.com 🔷 X（Twitter）→ https://twitter.com/monotein_ 🔷 note → https://note.com/monotein
🟩 コースの目次
🔷 セクション１ 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