MENU
プログラミングとか趣味とか、なんかいろいろ。
  1. ホーム
  2. React 講座

React 講座

当ページのリンクには広告が含まれています。

Reactを学ぶ前に

第0章：Reactで何ができるのかをざっくり掴む（執筆中）

  • SPA（シングルページアプリ）とは何か
  • Reactの立ち位置（Vue / Svelte などとのざっくり比較）
  • どんなアプリに向いているか（ダッシュボード・管理画面・フロントSPAなど）
  • 今後作るミニアプリの全体像（例：Todoアプリ → API連携 → 認証付きミニアプリ）

Part 1. 前提知識と環境構築

第1章：Reactに必要なJavaScript基礎の整理（執筆中）

（すでにC/C++ができる前提で「Reactに直結する部分だけ」を狙い撃ち）

  • let / const、スコープ、アロー関数
  • オブジェクト・配列・分割代入・スプレッド構文
  • クラスではなく「関数＋オブジェクト」思考で書く練習
  • import / export（ES Modules）
  • Promise と async/await（API呼び出しに必須）

第2章：Node.js・npm・ビルドツールの基礎（執筆中）

  • Node.js と npm / pnpm / yarn の役割
  • package.json の読み方
  • Vite or Create React App でプロジェクトを作る流れ
  • 開発サーバー起動・ビルド（本番用ファイルの生成）

Part 2. Reactの基礎（コンポーネントと思考法）

第3章：ReactコンポーネントとJSXの基本（執筆中）

  • JSXとは何か（HTMLっぽい記法の正体）
  • 関数コンポーネントの基本形
  • props の概念と値の受け渡し
  • コンポーネントの分割とファイル構成

第4章：イベント処理と状態管理（useState）（執筆中）

  • ボタンのクリックイベント onClick の扱い方
  • useState で状態を持たせる
  • 状態が変わると再レンダリングされる仕組み
  • 「UIは状態の関数」という考え方

第5章：コンポーネント設計とデータの流れ（執筆中）

  • 親子コンポーネント間でのデータ受け渡し（props drilling）
  • 「表示用」と「ロジック用」の分離（Presentational / Container のイメージ）
  • 小さなTodoアプリを作って、状態の持ち方を考える

Part 3. 実用的な機能を作る（フォーム・副作用・ルーティング）

第6章：フォームとユーザー入力（執筆中）

  • input / textarea / select などの扱い
  • Controlled Component の概念
  • 入力値のバリデーションの基本（必須チェック・文字数チェックなど）

第7章：副作用とライフサイクル（useEffect）（執筆中）

  • 「副作用」とは何か（レンダリング以外の処理）
  • useEffect の基本と依存配列
  • 初回マウント時だけ動かす処理
  • クリーンアップ処理（タイマーやイベントリスナーの解除）

第8章：API通信とデータ取得（執筆中）

  • fetch や axios を使ったAPI呼び出し
  • ローディング・エラー状態の扱い
  • 取得データをリスト表示・ページングしてみる
  • 簡単なバックエンド（モックAPI）との連携イメージ

第9章：ルーティング（React Router）（執筆中）

  • SPAにおけるページ遷移の考え方
  • React Routerの基本（BrowserRouter / Route / Link）
  • パラメータ付きルート（/users/:id）
  • 認証が必要なページのイメージ（ガード的な考え方）

Part 4. 状態管理・再利用性・スタイリング

第10章：コンテキストとグローバル状態（執筆中）

  • props drilling の問題点
  • React Context でのグローバルな状態共有
  • テーマ切り替え・ログインユーザー情報などをContext化してみる

第11章：useReducerとロジックの整理（執筆中）

  • useReducer の基本（Reducer・Action の考え方）
  • useState が増えすぎた時にどう整理するか
  • 中規模のフォームや一覧画面での使いどころ

第12章：カスタムフックとロジック再利用（執筆中）

  • カスタムフック useXxx の作り方
  • フォームロジック・データ取得ロジックなどをカスタムフック化
  • 「UIは薄く、ロジックはフックに集約」という構造を意識

第13章：Reactのスタイリング手法（執筆中）

  • 素のCSS / CSS Modules の使い方
  • CSS-in-JS（styled-components）やTailwind CSSの概要
  • コンポーネント単位でのスタイル設計の考え方（BEMなどとの違い）

Part 5. 品質・パフォーマンス・ツール

第14章：パフォーマンス最適化の基礎（執筆中）

  • 再レンダリングの仕組みをざっくり理解
  • React.memo / useMemo / useCallback の使いどころ
  • コンポーネント分割とメモ化のバランス感覚
  • 遅延ロード（lazy / Suspense）で初期表示を軽くする

第15章：テストとデバッグ（執筆中）

  • Jest ＋ React Testing Library のざっくりした使い方
  • 「ユニットテスト」と「コンポーネントテスト」の違い
  • React DevTools を使った状態確認・レンダリング確認
  • コンソールログだけに頼らないデバッグのやり方

Part 6. 実戦投入と発展

第16章：小さなフル機能アプリを作る（執筆中）

  • 認証なしのシンプルなCRUDアプリを1つ完成させる
    例：
    • タスク管理アプリ
    • ブックマーク管理アプリ
    • シンプルなブログ（一覧・詳細・新規作成）
  • ログ・エラーハンドリング・ローディングインジケータなど、「実務で必要なUI」を組み込む
  • フォルダ構成や命名規則を見直す

第17章：TypeScriptで型安全なReact開発（執筆中）

  • TypeScriptの超基本（型注釈・インターフェース・型推論）
  • React＋TypeScriptでのコンポーネント宣言
  • Props・State・カスタムフックに型を付ける
  • 型があることで得られるメリット（リファクタリング・保守性）

第18章：Reactエコシステムへの入り口（執筆中）

  • 状態管理ライブラリ（Redux Toolkit / Zustand など）概説
  • データ取得ライブラリ（React Query / SWR など）
  • UIコンポーネントライブラリ（MUI, Chakra UI, Ant Designなど）
  • Next.jsなどのメタフレームワークの存在を知る（SSR/SSGの世界）