WINGS(Www INtegrated Guide on Server-architecture)
Www INtegrated Guide on Server-architecture :
   ホーム お問い合わせ サーバーサイド環境構築設定 つぶやき ブックマーク レンタルサーバー 総合FAQ/訂正&ダウンロード このエントリーをはてなブックマークに追加        
  • 刊行書籍情報  [書籍マップ
  • オンライン公開 技術記事
  • シリーズ別書籍リスト
  • 「WINGS News」登録/解除
  • WINGSプロジェクト紹介
  • WINGSプロジェクトメンバ募集





【カテゴリ】 JavaScript


これからはじめるReact実践入門  

これからはじめるReact実践入門

山田祥寛/著
SBクリエイティブ株式会社/発行
定価 4,400円
B5変版・ 668ページ・ 2色
ISBN 978-4-8156-1948-0
発刊日: 2023年9月28日

[Amazon.co.jpからオンライン購入する]

   FAQ 本書訂正 アンケート ダウンロード

本書の特徴

React/Next.jsによるWebアプリ開発で役立つ応用力が身につく!

サンプルを動かしながら、Reactの機能を基礎からしっかり。モダンJavaScript、TypeScript、Next.jsによる本格的なアプリ開発まで、この1冊で総合的に学べます。
とことん丁寧で、開発に必要な応用力が身につけられる、必読の入門書です。
最新 React 18以降/Next.js 13以降に対応
分野・レベル別マップ

本書について取り上げていただいたブログさま

・技術 ブログ - HiroyukiNaitoさま
読書メモ:これからはじめるReact実践入門(2024年1月11日)
・りまりまだんの本拠地 - MofuMofuさま
これからはじめるReact実践入門を読んだ(2024年1月05日)
・無限大な夢のあと - noimpslmtbrkさま
【書評】これからはじめるReact実践入門 コンポーネントの基本からNext.jsによるアプリ開発まで( @yyamada ) (2023年11月05日)
・Qiita - @aoki1210(Atsuo AOKI)さま
書籍「これからはじめるReact実践入門」を読みました(2023年10月28日)
・Tumblr - pdaxyz-blogさま
レビュー「これからはじめるReact実践入門」(2023年10月28日)
・みどりのウェブ開発日記 - Akira Okochiさま
技術書レビュー『これからはじめるReact実践入門』(2023年10月18日)
・YouTube - たにぐち まことさま
JSX - Reactを学ぶなら知っておきたい、HTMLの表現手法(2023年10月04日)
・空きっ腹のブルース - sukipparanobluesさま
これからはじめるReact実践入門の感想(2023年9月29日)
・ナカザンドットネット - Nkznさま
書評:これからはじめるReact実践入門(2023年9月27日)
・Facebook - 伊賀 敏樹さま
Facebook投稿より(2023年9月26日)

  Contents


導入編

Chapter 1 イントロダクション
1-1 React と JavaScript
 1-1-1 JavaScript の歴史
 1-1-2 jQuery から新世代のライブラリへ
 1-1-3 主な JavaScript フレームワーク
 1-1-4 React の特徴
1-2 React アプリを開発/実行するための基本環境
 1-2-1 Create React App とは
 1-2-2 Node.js のインストール
 1-2-3 Visual Studio Code のインストール
1-3 モダン JavaScript の基本
 1-3-1 変数の宣言
 1-3-2 主なリテラル表現
 1-3-3 分割代入
 1-3-4 引数の既定値構文、可変長引数など
 1-3-5 Optional Chaining 演算子(?.)
 1-3-6 モジュール

Chapter 2 React の基本
2-1 はじめての React
 2-1-1 React アプリの作成
 2-1-2 補足:Npm Scripts
2-2 サンプルアプリの内容を確認する
 2-2-1 メインページの準備 - index.html
 2-2-2 アプリを起動するためのエントリーポイント - index.js
 2-2-3 補足:Strict モード
 2-2-4 ページを構成する UI 部品 - App.js
 2-2-5 補足:アプリを再描画する
 2-2-6 関数コンポーネントとクラスコンポーネント
2-3 JSX の基本
 2-3-1 JSX のルール
 2-3-2 JSX に JavaScript 式を埋め込む - {…} 構文
 2-3-3 {…} 構文で属性値を設定する
 2-3-4 スタイルシートを設定する - style 属性
 2-3-5 JSX 式の実体を理解する

Chapter 3 コンポーネント開発(基本)
3-1 コンポーネントを支える基本概念 - Props と State
 3-1-1 Props / State とは?
 3-1-2 Props の基本
 3-1-3 イベント処理の基本
 3-1-4 State の基本
 3-1-5 React Developer Tools の導入
3-2 条件分岐と繰り返し処理
 3-2-1 配列をリスト化する - 繰り返し処理
 3-2-2 式の真偽に応じて表示を切り替える - 条件分岐
 3-2-3 補足:スタイルを選択的に適用する
3-3 Props / State の理解を深める
 3-3-1 コンポーネント配下のコンテンツをテンプレートに反映させる
 3-3-2 複数の children を引き渡す
 3-3-3 children に対してパラメーターを引き渡す
 3-3-4 プロパティ型の検証(PropTypes)
 3-3-5 State 値更新のための 2 つの構文
 3-3-6 子コンポーネントから親コンポーネントへの情報伝達
3-4 より高度なイベント処理
 3-4-1 React で利用できるイベント
 3-4-2 イベントオブジェクト
 3-4-3 イベントの伝播を抑制する
 3-4-4 イベントハンドラーのオプションを設定する

基本編

Chapter 4 コンポーネント開発(フォーム)
4-1 フォーム操作の基本
 4-1-1 フォーム管理の基本
 4-1-2 注意:change イベントの発生タイミング
 4-1-3 非制御コンポーネントによるフォーム管理
 4-1-4 入力要素に応じたフォームの実装例
4-2 State における構造化データの更新
 4-2-1 スプレッド構文の意味
 4-2-2 Immer ライブラリによる改善
 4-2-3 配列の更新
4-3 検証機能の実装 - React Hook Form
 4-3-1 React Hook Form の基本
 4-3-2 独自の検証ルールを実装する
 4-3-3 フォームの状態に応じて表示を制御する
 4-3-4 検証ライブラリと連携する
 4-3-5 Yup で独自の検証ルールを実装する
 4-3-6 Yup で入力値を変換する
 4-3-7 Yup のエラーメッセージを日本語化する

Chapter 5 コンポーネント開発(応用)
5-1 組み込みコンポーネント
 5-1-1 コンポーネントの描画待ちを検知する - Suspense コンポーネント(1)
 5-1-2 非同期処理の終了を待ち受ける - Suspense コンポーネント(2)
 5-1-3 コンポーネントの描画時間を計測する - Profiler コンポーネント
5-2 コンポーネント開発でのスタイル定義
 5-2-1 JSX 式にスタイルシートを埋め込む - Styled JSX
 5-2-2 標準タグを拡張してスタイル付きタグを定義する - Styled Components
 5-2-3 複数の記法に対応した CSS-in-JS ライブラリ - Emotion
5-3 コンポーネントのその他の話題
 5-3-1 コンポーネント配下のコンテンツを任意の領域に描画する
 5-3-2 コンポーネントで発生したエラーを処理する - Error Boundary

Chapter 6 React ライブラリの活用
6-1 典型的な UI を実装する - MUI
 6-1-1 MUI の主なコンポーネント
 6-1-2 MUI の基本
 6-1-3 ドロワーメニューを実装する
 6-1-4 ページ内の配置を調整するレイアウト機能を活用する - グリッド
 6-1-5 MUI のスタイルをカスタマイズする - テーマ
 6-1-6 ライト/ダークモードに応じてテーマを切り替える
 6-1-7 React Hook Form + MUI を連携する
6-2 コンポーネントの見た目/動作をカタログ表示する - Storybook
 6-2-1 Storybook のインストール
 6-2-2 ストーリーの確認
 6-2-3 [Controls]タブの制御
 6-2-4 [Actions]タブの制御
 6-2-5 [Interactions]タブの制御
 6-2-6 ストーリーの表示をカスタマイズする
 6-2-7 Storybook にドキュメントを追加する
6-3 外部サービスからデータを取得する - React Query
 6-3-1 React Query を利用しない例
 6-3-2 React Query を利用した例
 6-3-3 Suspense / Error Boundary との連携

Chapter 7 フックの活用
7-1 コンポーネント描画/破棄時に処理を実行する - 副作用フック
 7-1-1 useEffect 関数の基本
 7-1-2 引数 deps の意味
 7-1-3 例:副作用フックを利用したタイマーの準備
 7-1-4 描画時に同期的に処理を実行する
7-2 さまざまな値への参照を準備する - useRef 関数
 7-2-1 関数コンポーネントで「インスタンス変数」を定義する
 7-2-2 Ref をコンポーネント配下の要素にフォワードする
 7-2-3 関数コンポーネント配下のメソッドを参照する
 7-2-4 コールバック関数を ref 属性に引き渡す - コールバック Ref
7-3 状態と処理とをまとめて管理する - useReducer 関数
 7-3-1 useState フックの問題点
 7-3-2 useReducer に関わるキーワード
 7-3-3 useReducer フックの基本
 7-3-4 Reducer を複数の Action 型に対応する
 7-3-5 State の初期値を生成する場合の注意点
7-4 コンポーネントの複数階層で値を受け渡しする - useContext 関数
 7-4-1 コンテキストの基本
 7-4-2 例:コンテキストを利用してテーマ切り替えを実装する
7-5 ステート管理ライブラリ「Recoil」
 7-5-1 Recoil とは?
 7-5-2 Recoil の基本
 7-5-3 Todo リストを Recoil アプリに対応する
 7-5-4 Todo リストを改良する
7-6 関数、またはその結果をメモ化する - memo / useMemo /
    useCallback 関数
 7-6-1 メモ化のためのサンプル
 7-6-2 関数の結果をメモ化する - useMemo 関数
 7-6-3 コンポーネントの再描画を抑制する - memo 関数
 7-6-4 関数定義そのものをキャッシュする - useCallback 関数
7-7 優先順位の低い State 更新を区別する - useTransition 関数
 7-7-1 複数の State に応じてページを制御する例
 7-7-2 useTransition 関数による描画の優先順位付け
 7-7-3 トランジションの状態に応じて処理を振り分ける
 7-7-4 特定の値の「遅延バージョン」を生成する - useDeferredValue 関数
7-8 フックの自作
 7-8-1 カスタムフックの定義
 7-8-2 カスタムフックの利用

応用編

Chapter 8 ルーティング
8-1 React Router の基本
 8-1-1 ルーティングテーブルの定義
 8-1-2 補足:ルーターの動作オプション
 8-1-3 ルート定義をタグ形式で表現する
8-2 ルーター対応リンクの設置
 8-2-1 リンク設置の基本
 8-2-2 ナビゲーションメニューに特化した >NavLink< 要素
 8-2-3 要素で利用できる主な属性
 8-2-4 補足:プログラムからのページ移動
8-3 ルーター経由で情報を受け渡しする手法
 8-3-1 パスの一部をパラメーターとして引き渡す - ルートパラメーター
 8-3-2 ルートパラメーターのさまざまな表現
 8-3-3 クエリ情報を取得する
 8-3-4 個々のリンクから任意の情報を引き渡す - state 属性
 8-3-5 親ルートから子ルートに値を受け渡す - Outlet Context
 8-3-6 ルート固有の情報を取得する - handle 属性
8-4 Route コンポーネントの属性
 8-4-1 ルート描画時の例外を捕捉する - errorElement 属性
 8-4-2 コンポーネントで利用するデータを準備する - loader 属性
 8-4-3 ルートで発生したアクションを処理する - action 属性
 8-4-4 コンポーネントを遅延ロードする - lazy 属性
8-5 ルーティングに関わるその他のテクニック
 8-5-1 現在のページへのリンクを解除する
 8-5-2 スクロール位置を復元する - <ScrollRestoration> 要素

Chapter 9 テスト
9-1 単体テスト
 9-1-1 Jest の基本
 9-1-2 コンポーネントのテスト
 9-1-3 イベントを伴うテスト
 9-1-4 子コンポーネントのモック化
 9-1-5 タイマーを伴うテスト
 9-1-6 非同期通信を伴うテスト
 9-1-7 非同期通信をモック化する - msw
 9-1-8 コンテキストを伴うテスト
9-2 E2E テスト
 9-2-1 E2E テストの準備
 9-2-2 E2E テストの作成

Chapter 10 TypeScript の活用
10-1 TypeScript の基本
 10-1-1 型アノテーションの基本
 10-1-2 TypeScript のデータ型
 10-1-3 TypeScript 固有の特殊な型
 10-1-4 複数の型を組み合わせる「複合型」
10-2 React アプリへの TypeScript の導入
 10-2-1 TypeScript テンプレートの有効化
 10-2-2 Props での型定義
 10-2-3 State /コンテキスト/ Reducer の型情報
 10-2-4 fetch データへの型定義
 10-2-5 補足:関数コンポーネントの型定義

11 Next.js の活用
11-1 Next.js の基本
 11-1-1 Next.js とは?
 11-1-2 Next.js アプリを作成する
11-2 App Router の基本を理解する
 11-2-1 2 種類のルーター
 11-2-2 App Router とは?
 11-2-3 プロジェクト既定のサンプルを確認する
 11-2-4 App Router のルートパラメーター
11-3 応用アプリ「Reading Recorder」を作成する
 11-3-1 アプリの構造を概観する
 11-3-2 利用するサービス/ライブラリ
 11-3-3 Prisma の準備
11-4 アプリの実装を読み解く
 11-4-1 ルートレイアウト(共通メニュー)
 11-4-2 書籍情報の表示
 11-4-3 レビュー情報の一覧表示
 11-4-4 Google ブックス経由での書籍検索
 11-4-5 レビュー登録フォーム
11-5 Vercel へのデプロイ
 11-5-1 GitHub リポジトリの準備
 11-5-2 Vercel 側の準備
 11-5-3 PostgreSQL データベースを準備する
 11-5-4 本番環境での動作を確認する

Column 識別子の記法
React をより深く学ぶための参考書籍
長いコードを VSCode 上で折り畳むには?
React Router アプリを本番環境に移行する場合
npm のサブコマンド
外部ストアからのデータを購読する useSyncExternalStore フック

本ページへのリンクには、このロゴをご利用ください。


著作権情報個人情報保護について広告掲載についてRSSフィードについて
出版社の方々へ会社概要スタッフ紹介サイトマップ  
書籍/記事に関するご質問/お問い合わせは「WINGSお問い合わせフォーム」をご利用ください。
Copyright(c) 1998-2024,Yamada Yoshihiro.  All Right Reserved.