概要

『TypeScript と React/Next.js でつくる実践 Web アプリケーション開発』(2022 年 7 月、技術評論社)は、TypeScript + React + Next.js でフロントエンド Web アプリを 1 つ作りきる実装書。手島拓也 / 吉田健人 / 高林佳稀 の 3 名共著。コンポーネント設計 / 状態管理 / Next.js 11+ Pages Router(本書時点)/ テスト / デプロイ までを 1 つのプロダクト題材で通す構成。Next.js App Router 登場前の本書だが、TypeScript の使い方や React コンポーネント設計の原則は今でも参考になる。

想定読者

• JavaScript は使えるが TypeScript を学んでいないフロントエンドエンジニア
• React のチュートリアルは終わったが「実プロダクトの全体像」が分からない人
• Next.js Pages Router をベースにしたプロジェクトの保守担当者
• フロントエンドの設計(コンポーネント分割 / 型設計)を体系で学びたい中級者

こんな人には向いていない

• Next.js App Router(13+)を中心に学びたい読者(本書は Pages Router ベース)
• React Server Components / Server Actions を扱う最新書を期待する読者
• 既に TypeScript + React に習熟している上級者(本書は実装ハンズオン)

読了後にできるようになること

• TypeScript + React の型設計の基本所作が身に付く — Props / State / Context の型
• Next.js の SSR / SSG / ISR の使い分けが分かる — レンダリング戦略の判断軸
• コンポーネント分割の指針が見える — Container / Presentational / Atomic Design
• テスト(Jest / React Testing Library)を書ける — フロントエンドのテスト所作

本書のキー概念

• 第 1 章 Next.js と TypeScript の基本 — 環境構築、設定ファイル
• 第 2 章 TypeScript の型システム — Generics / Conditional Types / Utility Types
• 第 3 章 React + TypeScript の使い方 — Props / Hooks の型
• 第 4 章 コンポーネント開発 — Atomic Design による分割
• 第 5 章 アプリケーション開発(本書のメイン) — 1 つの SNS 風アプリを作りきる
• 第 6 章 テスト — Jest / React Testing Library / Storybook
• 第 7 章 デプロイと CI/CD — Vercel / GitHub Actions

なぜ「TypeScript + React 入門の定番」として残るのか

App Router 移行後の今でも、Pages Router を採用したプロジェクトは多数残存しており、本書は 既存プロジェクトの理解 に役立つ。また「TypeScript の型設計」「React コンポーネント設計」は App Router でも基本は同じため、本書 → App Router 対応書 と読み継ぐ流れで長く活用できる。フロントエンドの中級者向け定番書として 2022 年以降広く採用された。

関連書籍

• 『プロを目指す人のための TypeScript 入門』 — TypeScript の前段学習
• 『Effective TypeScript 第 2 版』 — TypeScript の発展、本書の次に
• 『Next.js 公式ドキュメント』 — App Router の最新仕様、本書を補完

関連 Topic

• /topics/typescript — TypeScript
• /topics/react — React
• /topics/nextjs — Next.js
• /topics/javascript — JavaScript
• /topics/frontend — フロントエンド