TypeScript と React/Next.js でつくる実践 Web アプリケーション開発

新しいフロントエンドの入門書決定版!

本書は React/Next.js と TypeScript を用いて Web アプリケーションを開発する入門書です。

Web アプリケーションフレームワーク Next.js は React をベースに開発されています。
高速さに裏付けされた高い UX と、開発しやすさを両立しているのが特徴です。

本書では、Next.js の開発をより快適・堅牢にする TypeScript で開発を進めます。

Next.js によるアプリケーション開発の基礎、最新のフロントエンドや Web アプリケーションの開発方法が学べます。

React を土台にした Next.js で、TypeScript を使って Web アプリケーションを一本作り切るまでを案内する入門書が『TypeScript と React/Next.js でつくる実践 Web アプリケーション開発』です。著者は手島 拓也、吉田 健人、高林 佳稀の 3 人で、技術評論社から 2022 年 7 月 25 日に発売されました。版元の著者紹介には執筆分担も示されており、1〜2 章を手島、3〜4 章と 7 章を高林、5〜7 章を吉田が担当しています。版元は対象として、React/Next.js を初めて使う人や本番に導入したい人、TypeScript を中心に据えたフロントエンド開発や、Atomic Design と Storybook によるコンポーネント中心の開発に興味がある人を挙げています。

全 7 章の構成、型の基礎から 1 つのアプリのリリースまで

前半の 4 章で道具を揃え、後半の 3 章でそれを使って 1 つのアプリケーションを組み上げる構成です。1 章はフロントエンド開発の変遷の中で SSR や SSG が求められた理由を扱い、モダン開発の設計思想へ進み、2 章は型の定義から実際の開発で重要な型、ESLint を含む開発時の設定までの TypeScript の基礎です。3 章は React のコンポーネントと型、Context、Hooks から Next.js の入門へ進み、4 章では Atomic Design によるコンポーネント設計、styled-components によるスタイル実装、Storybook を使ったコンポーネント管理、React Testing Library によるユニットテストを学びます。5 章から 7 章は通しのアプリケーション開発で、React Hook Form や SWR、JSON Server を含む環境構築、API クライアントと Atoms から Templates までの段階的な実装、サインインや商品詳細、買い物カート、出品といったページの実装とテストを経て、Heroku と Vercel へのデプロイ、ロギング、SEO、アクセシビリティ、セキュリティで締めくくります。Appendix では決済の Stripe、StoryShots による UI スナップショットテスト、AWS Amplify へのデプロイ、i18n による国際化を補っています。

4 つのレンダリング手法を使い分ける考え方

Next.js を学ぶ意味の中心は、ページごとに「いつ、どこで HTML を作るか」を選べる点にあります。ビルド時に作り置く静的サイト生成 (SSG) は配信が速く、リクエストのたびにサーバーで作るサーバーサイドレンダリング (SSR) は常に新しいデータを返せ、ブラウザー側で組み立てるクライアントサイドレンダリング (CSR) は操作の多い画面に向き、作り置いたページを一定の間隔で作り直すインクリメンタル静的再生成 (ISR) はその中間を取ります。本書の 3 章はこの 4 手法を 1 節ずつ説明したうえで、getStaticProps や getStaticPaths を使った SSG、SSR、ISR のページ実装へ進むため、静的サイト生成とサーバーサイドレンダリング の違いを手を動かしながら確かめられます。表示速度、データの鮮度、サーバーの負荷のどれを優先するかを、ページ単位で判断できるようになることが、この章の効き目です。

刊行時期と Next.js の変化、読む前に知っておきたいこと

本書が扱うデータ取得の書き方は、Next.js で Pages Router と呼ばれるようになった方式のものです。2022 年 10 月の Next.js 13 で app ディレクトリを使う App Router が導入され、React Server Components を前提とした書き方が加わったため、2026 年 10 月時点で新規に Next.js を始める場合は、公式ドキュメントの App Router の解説と併せて読む必要があります。styled-components のようにブラウザー側で動いて CSS を生成する方式も、Server Components とそのままでは組み合わせにくいことが知られています。また Heroku は 2022 年 11 月に無料プランを終了しているため、デプロイの章は費用の前提を確かめながら進めるのが安全です。一方で、型でコンポーネントの入力を守る書き方、Atomic Design で部品の粒度をそろえる考え方、Storybook とユニットテストで部品を単独で確かめる流れは、ルーティングの方式が変わっても使い続けられる内容です。

JavaScript の文法から学びたい段階なら、JavaScript と TypeScript の技術書の選び方 を参考に土台となる一冊を先に選ぶほうが確実で、App Router の書き方だけを素早く身に付けたい人にも本書は遠回りになります。逆に、チュートリアルの断片ではなく、設計から部品の実装、テスト、デプロイ、リリース後の改善までを一つのアプリで通して経験したい人、あるいは Pages Router で書かれた既存のプロジェクトを引き継いで保守する立場の人にとっては、全体の流れを一冊で見渡せる実践的な教材です。