JavaScript から React、TypeScript まで ゼロから学ぼう

PHPとの違い

アロー関数、テンプレートリテラル、分割代入など PHP にない構文を学びます

配列メソッド

map, filter, find, reduce など React で必須の配列操作を学びます

DOM操作の基本

querySelector, textContent, classList, createElement で DOM を操作します

イベント処理

addEventListener、イベントオブジェクト、イベント委任を学びます

非同期処理とFetch

Promise, async/await, fetch API で外部データを取得する方法を学びます

Todo App を作ろう

バニラ JS で CRUD 機能付き Todo アプリを作り、DOM 操作を実践します

⏱ 45 min

複雑なUIパターン

タブ、モーダル、検索フィルターなど実践的な UI を DOM で構築します

状態管理の壁

複数のデータソースと DOM 同期の問題を体験し、React の必要性を理解します

モダンJSとNext Steps

ES Modules, npm, Vite を学び React コースへの橋渡しをします

NEXT STEP

React コース

JavaScript コースを修了した方向け。全 11 チャプターで、React の基礎からライブラリ活用まで段階的に学びます。

環境構築

Vite + React の開発環境をセットアップします

⏱ 20 min

JSX を理解しよう

React の JSX 記法を学び、HTML との違いを理解します

コンポーネント

関数コンポーネントの作成と分割の方法を学びます

Props

コンポーネント間のデータの受け渡しを学びます

State と useState

状態管理の基本と画面の更新の仕組みを理解します

イベントハンドリング

クリックや入力などのユーザー操作を処理します

リストと条件分岐

配列の表示と条件付きレンダリングを学びます

useEffect

副作用の処理と API からのデータ取得を学びます

フォームを作ろう

手動でフォームのバリデーションを実装します

⏱ 45 min

React Hook Form + Zod

ライブラリを使ってフォームをスマートに書き直します

⏱ 45 min

React エコシステム

React 周辺のライブラリと次のステップを知ります

⏱ 15 min

ADVANCED

TypeScript コース

React コースを修了した方向け。全 11 チャプターで、TypeScript の基礎から React + TypeScript の実践まで段階的に学びます。

環境構築

TypeScript + React の開発環境をセットアップします

⏱ 20 min

基本の型

string・number・boolean など TypeScript の基本的な型を学びます

型注釈と型推論

明示的な型注釈と TypeScript の型推論の使い分けを学びます

インターフェースと型エイリアス

オブジェクトの形を定義する interface と type の使い方を学びます

ユニオン型とリテラル型

複数の型を組み合わせるユニオン型と型の絞り込みを学びます

関数の型

関数のパラメータ・戻り値・コールバックの型定義を学びます

ジェネリクス

型をパラメータ化して再利用可能なコードを書く方法を学びます

React + TypeScript 基礎

コンポーネントの Props・State・イベントに型を付ける方法を学びます

React + TypeScript Hooks

useRef・useContext・useReducer やカスタムフックの型定義を学びます

実践パターン

as const・ユーティリティ型・コンポーネント設計パターンを学びます

移行ガイド

既存の JavaScript React プロジェクトを TypeScript に移行する方法を学びます