React と TypeScript を
ゼロから学ぼう
バックエンド経験者のための、実践的な学習コース。
React の基礎から TypeScript の実践まで、手を動かしながら学びます。
カリキュラム
全 11 チャプターで、React の基礎からライブラリ活用まで段階的に学びます。
環境構築
Vite + React の開発環境をセットアップします
⏱ 20 minJSX を理解しよう
React の JSX 記法を学び、HTML との違いを理解します
⏱ 25 minコンポーネント
関数コンポーネントの作成と分割の方法を学びます
⏱ 30 minProps
コンポーネント間のデータの受け渡しを学びます
⏱ 30 minState と useState
状態管理の基本と画面の更新の仕組みを理解します
⏱ 35 minイベントハンドリング
クリックや入力などのユーザー操作を処理します
⏱ 25 minリストと条件分岐
配列の表示と条件付きレンダリングを学びます
⏱ 35 minuseEffect
副作用の処理と API からのデータ取得を学びます
⏱ 40 minフォームを作ろう
手動でフォームのバリデーションを実装します
⏱ 45 minReact Hook Form + Zod
ライブラリを使ってフォームをスマートに書き直します
⏱ 45 minReact エコシステム
React 周辺のライブラリと次のステップを知ります
⏱ 15 minTypeScript コース
React コースを修了した方向け。全 11 チャプターで、TypeScript の基礎から React + TypeScript の実践まで段階的に学びます。
環境構築
TypeScript + React の開発環境をセットアップします
⏱ 20 min基本の型
string・number・boolean など TypeScript の基本的な型を学びます
⏱ 25 min型注釈と型推論
明示的な型注釈と TypeScript の型推論の使い分けを学びます
⏱ 25 minインターフェースと型エイリアス
オブジェクトの形を定義する interface と type の使い方を学びます
⏱ 30 minユニオン型とリテラル型
複数の型を組み合わせるユニオン型と型の絞り込みを学びます
⏱ 30 min関数の型
関数のパラメータ・戻り値・コールバックの型定義を学びます
⏱ 30 minジェネリクス
型をパラメータ化して再利用可能なコードを書く方法を学びます
⏱ 35 minReact + TypeScript 基礎
コンポーネントの Props・State・イベントに型を付ける方法を学びます
⏱ 40 minReact + TypeScript Hooks
useRef・useContext・useReducer やカスタムフックの型定義を学びます
⏱ 40 min実践パターン
as const・ユーティリティ型・コンポーネント設計パターンを学びます
⏱ 35 min移行ガイド
既存の JavaScript React プロジェクトを TypeScript に移行する方法を学びます
⏱ 25 minこのコースの対象者
バックエンド経験者
Laravel や Rails などのフレームワーク経験がある方
API の概念がわかる
REST API のリクエスト・レスポンスの流れを理解している方
JavaScript の基礎
変数、関数、配列などの基本的な JS の書き方がわかる方