React本格入門 ~実践力が身に付くコンポーネント開発⁠~

「React本格入門」のカバー画像
著者
樹下雅章きのしたまさあき 著
定価
3,300円(本体3,000円+税10%)
発売日
2026.4.15
判型
B5
頁数
304ページ
ISBN
978-4-297-15523-0

概要

ReactはWebアプリケーション開発におけるUI開発に特化した人気のJavaScriptライブラリです。本書では最新の安定版であるReact19をベースに、「環境構築」「コンポーネントの使い方」「プロパティ(props)の使い方」「フックの使い方」「アクションの使い方」などReactの押さえておくべきポイントを体系的に学べます。また、集大成として、実際にアプリケーションを開発することで最新のWebアプリケーション開発の一連の流れが学べるため、近年需要が高まっているセミナーや研修でも利用できます。

こんな方にオススメ

  • はじめてReact使用してWeb開発する人

目次

1章 Reactの世界へようこそ

1-1 Reactとは

  • 1-1-1 Reactの特徴
  • 1-1-2 React学習のメリット

1-2 開発環境の整備

  • 1-2-1 Node.jsのインストール
  • 1-2-2 Visual Studio Code(VSCode)のインストール

1-3 Vite の活用

  • 1-3-1 Viteの利用理由
  • 1-3-2 初回Reactプロジェクトの作成

1-4 Reactプロジェクトの構造理解

  • 1-4-1 プロジェクト構造の確認 29
  • 1-4-2 VSCodeの拡張機能のインストール

2章 コンポーネント

2-1 JSXの基礎

  • 2-1-1 JSXの特徴
  • 2-1-2 JSX記述のルール

2-2 コンポーネント指向

  • 2-2-1 コンポーネント指向の理解
  • 2-2-2 画面コンポーネントの設計

2-3 コンポーネントの作成

  • 2-3-1 フォルダ構造の検討
  • 2-3-2 小規模コンポーネントからの作成

3章 props(プロップス)とstate(ステート)

3-1 props(プロップス)の基礎

  • 3-1-1 props(プロップス)の概要
  • 3-1-2 props(プロップス)の使用方法

3-2 state(ステート)の基礎

  • 3-2-1 state(ステート)の概要
  • 3-2-2 state(ステート)の使用方法

4章 状態のリフトアップとイベント

4-1 状態のリフトアップの基礎

  • 4-1-1 状態のリフトアップの概要

4-2 イベント処理の基礎

  • 4-2-1 イベントの概要
  • 4-2-2 主要イベントの活用

5章 副作用(サイドエフェクト)の理解

5-1 useEffectの基礎

  • 5-1-1 useEffectの概要
  • 5-1-2 useEffectの使用方法

5-2 クリーンアップ関数の基礎

  • 5-2-1 クリーンアップ関数の概要
  • 5-2-2 クリーンアップ関数の使用方法

6章 Context(コンテキスト)の理解

6-1 プロップスドリリング(props drilling)

  • 6-1-1 親から子へのpropsの受け渡し
  • 6-1-2 プロップスドリリング(props drilling)の考え方

6-2 Context(コンテキスト)の基礎

  • 6-2-1 Context(コンテキスト)の概要

7章 React Routerによるページ遷移

7-1 React Router DOMの基礎

  • 7-1-1 React Router DOMの概要
  • 7-1-2 React Router DOMの使用方法

7-2 パラメーターを使った動的ルート

  • 7-2-1 useParamsの使用方法
  • 7-2-2 複数URLパラメーターの扱い方

7-3 ネストされたルートと

  • 7-3-1 ネストされたルートの概要

7-4 NotFound ページの実装

  • 7-4-1 NotFound(404)ページの概要

8章 フォームと入力値の管理

8-1 フォームの基本と値の管理

  • 8-1-1 フォームの概要
  • 8-1-2 バリデーションの概要

8-2 React Hook Formの活用

  • 8-2-1 React Hook Formの概要
  • 8-2-2 React Hook Formの使用方法

9章 非同期処理とAPI

9-1 非同期処理とAPIの基礎

  • 9-1-1 同期処理と非同期処理の比較
  • 9-1-2 APIの概要
  • 9-1-3 Web APIの概要

9-2 非同期処理によるAPIの活用

  • 9-2-1 fetch関数の概要(Promiseとの関係)
  • 9-2-2 fetch関数を用いたサンプルの作成

10章 MUI

10-1 MUIの導入

  • 10-1-1 MUIの概要
  • 10-1-2 MUIコンポーネントによるUI作成

10-2 MUIの活用方法

  • 10-2-1 MUI公式サイトの活用手順

11章 AxiosによるAPI通信の最適化

11-1 JSON Serverの活用

  • 11-1-1 JSON Serverの構築
  • 11-1-2 JSON Serverの概要

11-2 Axiosの活用

  • 11-2-1 fetchの復習
  • 11-2-2 AxiosによるJSON Serverとの通信

12章 基盤ファイルの作成(総合演習)

12-1 作成するアプリケーションの説明と準備

  • 12-1-1 作成するReact アプリの概要
  • 12-1-2 プロジェクトの準備
  • 12-1-3 プロジェクト構成の理解と整理

12-2 独立性の高いファイルの作成

  • 12-2-1 レイアウト(見た目の枠組み)の作成
  • 12-2-2 入力チェックの作成
  • 12-2-3 Contextの作成

13章 コンポーネントの作成(総合演習)

13-1 UIコンポーネントの作成

  • 13-1-1 Todoを入力して保存するフォーム
  • 13-1-2 1件分のTodoを表示する部品
  • 13-1-3 Todoを一覧で表示する部品
  • 13-1-4 確認ダイアログ

13-2 ページコンポーネントの作成

  • 13-2-1 Todo一覧ページの作成
  • 13-2-2 Todo新規作成ページの作成
  • 13-2-3 Todo編集ページの作成

14章 ルーティング処理とテスト(総合演習)

14-1 ルーティングの設定

  • 14-1-1 ページ遷移(ルーティング)
  • 14-1-2 React Routerの主要コンポーネント復習

14-2 全機能の動作確認

  • 14-2-1 テストの概要と前準備
  • 14-2-2 テストシナリオ

プロフィール

樹下雅章きのしたまさあき

大学卒業後、ITベンチャー企業にてエンジニアとしてキャリアを開始。要件定義から保守まで開発工程を一通り経験し、SES・自社パッケージ開発など多様なプロジェクトに携わる。その後、大手食品会社で社内SEとして業務改善やベンダー管理を担当。事業部撤退を機に「教える道」へ転向し、現在はIT講師として新人・企業研修を担当している。「難しいことを、誰にでもわかるように」を信条に、初学者の“最初の一歩”を支える教材づくりに情熱を注いでいる。