TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発
書籍情報
発売日 : 2022年07月25日
著者／編集 : 手島 拓也/吉田 健人/高林 佳稀
出版社 : 技術評論社
発行形態 : 単行本
書籍説明
内容紹介
本書は、皆さんがＴｙｐｅＳｃｒｉｐｔとＲｅａｃｔ／Ｎｅｘｔ．ｊｓの基礎をしっかり理解できるように解説し、サンプルアプリケーション開発を通じて業務にそのまま役立てられる実践的なスキルを身につけられるように執筆されています。世界共通で評価される、ＴｙｐｅＳｃｒｉｐｔやＮｅｘｔ．ｊｓを中心としたフロントエンドスキルを本書で学んでください。
目次
1 Next.jsとTypeScriptによるモダン開発
1.1 Next.jsとTypeScript
1.2 フロントエンド開発の変遷
1.2.1 JavaScript黎明期とjQueryの人気
1.2.2 SPAの登場とMVC/MVVMフレームワーク
column. SPA普及の裏で貢献したHistory API
1.2.3 Reactの登場とコンポーネント指向・状態管理
1.2.4 Node.jsの躍進
column. CommonJSとESモジュール
column. Deno
1.2.5 AltJSの流行とTypeScriptの定番化
1.2.6 ビルドツールとタスクランナー
1.2.7 SSR/SSGの必要性
1.2.8 Next.jsの登場と受容
1.3 モダンフロントエンド開発の設計思想
1.3.1 フロントエンド技術の複雑化
1.3.2 コンポーネント指向とは
column. FluxのライブラリRedux
1.3.3 Next.jsがなぜ必要になってきているか
column. Vue.jsとNuxt.js
column. Next.jsの対応ブラウザ
column. Reactコンポーネントの復元 - Hydration
2 TypeScriptの基礎
2.1 TypeScriptの基礎知識
2.1.1 TypeScript登場の背景
2.1.2 TypeScriptとVisual Studio Code
2.1.3 TypeScriptとJavaScriptの違い
2.1.4 TypeScriptコマンドラインツールによるコンパイル
2.2 型の定義
2.2.1 変数
2.2.2 プリミティブ型
2.2.3 配列
2.2.4 オブジェクト型
2.2.5 any
2.2.6 関数
2.3 基本的な型の機能
2.3.1 型推論
2.3.2 型アサーション
2.3.3 型エイリアス
2.3.4 インタフェース
2.3.5 クラス
2.4 実際の開発で重要な型
2.4.1 Enum型
2.4.2 ジェネリック型
2.4.3 Union型とIntersection型
2.4.4 リテラル型
2.4.5 never型
2.5 TypeScriptのテクニック
2.5.1 Optional Chaining
2.5.2 Non-null Assertion Operator
2.5.3 型ガード
2.5.4 keyofオペレーター
2.5.5 インデックス型
2.5.6 readonly
2.5.7 unknown
2.5.8 非同期のAsync/Await
2.5.9 型定義ファイル
2.6 TypeScriptの開発時設定
2.6.1 tsconfig.json
2.6.2 Prettier
2.6.3 ESLint
2.6.4 コンパイルオプション
column. コーディングスタイルガイド
column. TypeScriptのコンパイラ
column. import type
3 React/Next.jsの基礎
3.1 React入門
3.1.1 Reactの始め方
3.1.2 Reactの基本
3.1.3 Reactのコンポーネントを作成する
3.2 Reactにおけるコンポーネント
3.2.1 React要素
3.2.2 コンポーネント（Reactコンポーネント）
column. 関数コンポーネントとクラスコンポーネント
3.3 Reactにおける型
column. FCとVFC
3.4 Context（コンテキスト）
3.5 React Hooks（フック）
3.5.1 useStateとuseReducer―状態のフック
3.5.2 useCallbackとuseMemo―メモ化のフック
3.5.3 useEffectとuseLayoutEffect―副作用のフック
column. React18におけるuseEffect・useLayoutEffectの挙動
3.5.4 useContext―Contextのためのフック
3.5.5 useRefとuseImperativeHandle―refのフック
3.5.6 カスタムフックとuseDebugValue
3.6 Next.js入門
3.6.1 プロジェクトのセットアップ
3.6.2 プロジェクトの基本的な構成
3.7 Next.jsのレンダリング手法
3.7.1 静的サイト生成（SSG）
3.7.2 クライアントサイドレンダリング（CSR）
3.7.3 サーバーサイドレンダリング（SSR）
3.7.4 インクリメンタル静的再生成（ISR）
3.8 ページとレンダリング手法
3.8.1 Next.jsのページとデータ取得
3.8.2 SSGによるページの実装
3.8.3 getStaticPropsを用いたSSGによるページの実装
3.8.4 getStaticPathsを使った複数ページのSSG
column. useRouter―ルーティングのためのフック
3.8.5 SSRによるページの実装
3.8.6 ISRによるページの実装
3.9 Next.jsの機能
3.9.1 リンク
3.9.2 画像の表示
3.9.3 APIルート
3.9.4 環境変数/コンフィグ
3.9.5 React/Next.jsとライブラリの互換性
4 コンポーネント開発
4.1 Atomic Designによるコンポーネント設計
4.1.1 Presentational ComponentとContainer Component
4.1.2 Atomic Design
4.1.3 Atoms
4.1.4 Molecules
4.1.5 Organisms
4.1.6 Templates
4.1.7 Pages
4.2 styled-componentsによるスタイル実装
4.2.1 styled-componentsをNext.jsに導入
4.2.2 styled-componentsを用いたコンポーネント実装
4.3 Storybookを使ったコンポーネント管理
4.3.1 Storybookの基本的な使い方
4.3.2 Actionを使用したコールバックのハンドリング
4.3.3 Controlsタブを使ったpropsの制御
4.3.4 アドオン
4.4 コンポーネントのユニットテスト
4.4.1 Reactにおけるユニットテスト
4.4.2 テスト環境構築
4.4.3 React Testing Libraryによるコンポーネントのユニットテスト
4.4.4 非同期コンポーネントのユニットテスト
column. Next.js 11以前のstyled-components/jest導入
5 アプリケーション開発1～設計・環境設定～
5.1 本章で開発するアプリケーション
5.1.1 アプリケーションの仕様
5.1.2 アプリケーションのアーキテクチャ
5.2 開発環境構築
5.2.1 Next.jsのプロジェクト作成
5.2.2 styled-componentsの設定
5.2.3 ESLintの設定
5.2.4 Storybookの設定
5.2.5 React Hook Formの導入
5.2.6 SWRの導入
5.2.7 React Content Loaderの導入
5.2.8 Material Iconsの導入
5.2.9 環境変数
5.2.10 テスト環境構築
5.2.11 JSON Serverの設定
5.2.12 CSS in JSライブラリ
6 アプリケーション開発2～実装～
6.1 アプリケーションアーキテクチャと全体の実装の流れ
6.2 APIクライアントの実装
6.2.1 fetcher関数
6.2.2 APIクライアントの関数
6.2.3 アプリケーションで使用されるデータの型
6.2.4 開発環境のためのAPIリクエストプロキシ
6.3 コンポーネント実装の準備
6.3.1 レスポンシブデザインに対応したコンポーネント
6.3.2 Wrapperコンポーネントの実装
6.4 Atomic Designによるコンポーネント設計の実施
6.4.1 Atomic Designに沿ってコンポーネントを分割する
6.5 Atomsの実装
6.5.1 ボタン―Button
6.5.2 テキスト―Text
6.5.3 シェイプイメージ―ShapeImage
6.5.4 テキストインプット―Input
6.5.5 テキストエリア―TextArea
6.5.6 バッジ―Badge
6.6 Moleculesの実装
6.6.1 チェックボックス―Checkbox
6.6.2 ドロップダウン―Dropdown
6.6.3 ドロップゾーン―Dropzone
6.6.4 イメージプレビュー―ImagePreview
6.7 Organismsの実装
6.7.1 カート商品―CartProduct
6.7.2 グローバルスピナー―GlobalSpinner
6.7.3 ヘッダー―Header
6.7.4 商品カード―ProductCard
column. データURIスキーム
6.7.5 商品投稿フォーム―ProductForm
6.7.6 サインインフォーム―SigninForm
6.7.7 ユーザープロファイル―UserProfile
6.8 Templatesの実装
6.8.1 レイアウト―Layout
6.9 ページの設計と実装
6.9.1 サインインページ
6.9.2 ユーザーページ
6.9.3 トップページ
6.9.4 検索ページ
6.9.5 商品詳細ページ
6.9.6 買い物カートページ
6.9.7 出品ページ
6.10 コンポーネントのユニットテストの実装
6.10.1 ボタンのユニットテスト
6.10.2 ドロップダウンのユニットテスト
6.10.3 ドロップゾーンのユニットテスト
6.10.4 ヘッダーのユニットテスト
6.10.5 サインインフォームのテスト
6.10.6 商品投稿フォームのテスト
7 アプリケーション開発3～リリースと改善～
7.1 デプロイとアプリケーション全体のシステムアーキテクチャ
7.2 Heroku
7.3 Vercel
7.3.1 Vercelへのアプリケーションのデプロイ
7.4 ロギング
column. ログレベル
7.5 SEO
7.5.1 メタタグ
7.5.2 パンくずリスト
7.5.3 sitemap
7.5.4 robots.txt
7.6 アクセシビリティ
7.6.1 セマンティック
7.6.2 補助テキスト
7.6.3 WAI-ARIA
7.7 セキュリティ
7.7.1 フロントエンド開発における脆弱性とその対策
column. CSRF
column. Permissions-Policy
column. X-XSS-Protectionヘッダー
column. セキュリティテスト
column. Next.jsのバックエンドの考え方
column. Next.jsの認証
Appendix Next.jsのさらなる活用
A.1 決済ツールStripe
A.1.1 Stripeのセットアップ
A.1.2 Stripe APIの利用
A.1.3 Stripeの公式ドキュメント
A.2 StoryShots―UIスナップショットテスト
A.2.1 StoryShotsとは
A.2.2 storyshots-puppeteer―スナップショットイメージによるUIテスト
A.3 AWS AmplifyへのNext.jsアプリケーションのデプロイ
A.3.1 Next.jsアプリケーションのAWS Amplifyへのデプロイ
A.3.2 SSGを使用したNext.jsアプリケーションのAWS Amplifyへのデプロイ
A.4 国際化ツールi18n
A.4.1 パスによる言語ルーティング
A.4.2 next-i18nを使ったテキストのi18n対応
1.1 Next.jsとTypeScript
1.2 フロントエンド開発の変遷
1.2.1 JavaScript黎明期とjQueryの人気
1.2.2 SPAの登場とMVC/MVVMフレームワーク
column. SPA普及の裏で貢献したHistory API
1.2.3 Reactの登場とコンポーネント指向・状態管理
1.2.4 Node.jsの躍進
column. CommonJSとESモジュール
column. Deno
1.2.5 AltJSの流行とTypeScriptの定番化
1.2.6 ビルドツールとタスクランナー
1.2.7 SSR/SSGの必要性
1.2.8 Next.jsの登場と受容
1.3 モダンフロントエンド開発の設計思想
1.3.1 フロントエンド技術の複雑化
1.3.2 コンポーネント指向とは
column. FluxのライブラリRedux
1.3.3 Next.jsがなぜ必要になってきているか
column. Vue.jsとNuxt.js
column. Next.jsの対応ブラウザ
column. Reactコンポーネントの復元 - Hydration
2 TypeScriptの基礎
2.1 TypeScriptの基礎知識
2.1.1 TypeScript登場の背景
2.1.2 TypeScriptとVisual Studio Code
2.1.3 TypeScriptとJavaScriptの違い
2.1.4 TypeScriptコマンドラインツールによるコンパイル
2.2 型の定義
2.2.1 変数
2.2.2 プリミティブ型
2.2.3 配列
2.2.4 オブジェクト型
2.2.5 any
2.2.6 関数
2.3 基本的な型の機能
2.3.1 型推論
2.3.2 型アサーション
2.3.3 型エイリアス
2.3.4 インタフェース
2.3.5 クラス
2.4 実際の開発で重要な型
2.4.1 Enum型
2.4.2 ジェネリック型
2.4.3 Union型とIntersection型
2.4.4 リテラル型
2.4.5 never型
2.5 TypeScriptのテクニック
2.5.1 Optional Chaining
2.5.2 Non-null Assertion Operator
2.5.3 型ガード
2.5.4 keyofオペレーター
2.5.5 インデックス型
2.5.6 readonly
2.5.7 unknown
2.5.8 非同期のAsync/Await
2.5.9 型定義ファイル
2.6 TypeScriptの開発時設定
2.6.1 tsconfig.json
2.6.2 Prettier
2.6.3 ESLint
2.6.4 コンパイルオプション
column. コーディングスタイルガイド
column. TypeScriptのコンパイラ
column. import type
3 React/Next.jsの基礎
3.1 React入門
3.1.1 Reactの始め方
3.1.2 Reactの基本
3.1.3 Reactのコンポーネントを作成する
3.2 Reactにおけるコンポーネント
3.2.1 React要素
3.2.2 コンポーネント（Reactコンポーネント）
column. 関数コンポーネントとクラスコンポーネント
3.3 Reactにおける型
column. FCとVFC
3.4 Context（コンテキスト）
3.5 React Hooks（フック）
3.5.1 useStateとuseReducer―状態のフック
3.5.2 useCallbackとuseMemo―メモ化のフック
3.5.3 useEffectとuseLayoutEffect―副作用のフック
column. React18におけるuseEffect・useLayoutEffectの挙動
3.5.4 useContext―Contextのためのフック
3.5.5 useRefとuseImperativeHandle―refのフック
3.5.6 カスタムフックとuseDebugValue
3.6 Next.js入門
3.6.1 プロジェクトのセットアップ
3.6.2 プロジェクトの基本的な構成
3.7 Next.jsのレンダリング手法
3.7.1 静的サイト生成（SSG）
3.7.2 クライアントサイドレンダリング（CSR）
3.7.3 サーバーサイドレンダリング（SSR）
3.7.4 インクリメンタル静的再生成（ISR）
3.8 ページとレンダリング手法
3.8.1 Next.jsのページとデータ取得
3.8.2 SSGによるページの実装
3.8.3 getStaticPropsを用いたSSGによるページの実装
3.8.4 getStaticPathsを使った複数ページのSSG
column. useRouter―ルーティングのためのフック
3.8.5 SSRによるページの実装
3.8.6 ISRによるページの実装
3.9 Next.jsの機能
3.9.1 リンク
3.9.2 画像の表示
3.9.3 APIルート
3.9.4 環境変数/コンフィグ
3.9.5 React/Next.jsとライブラリの互換性
4 コンポーネント開発
4.1 Atomic Designによるコンポーネント設計
4.1.1 Presentational ComponentとContainer Component
4.1.2 Atomic Design
4.1.3 Atoms
4.1.4 Molecules
4.1.5 Organisms
4.1.6 Templates
4.1.7 Pages
4.2 styled-componentsによるスタイル実装
4.2.1 styled-componentsをNext.jsに導入
4.2.2 styled-componentsを用いたコンポーネント実装
4.3 Storybookを使ったコンポーネント管理
4.3.1 Storybookの基本的な使い方
4.3.2 Actionを使用したコールバックのハンドリング
4.3.3 Controlsタブを使ったpropsの制御
4.3.4 アドオン
4.4 コンポーネントのユニットテスト
4.4.1 Reactにおけるユニットテスト
4.4.2 テスト環境構築
4.4.3 React Testing Libraryによるコンポーネントのユニットテスト
4.4.4 非同期コンポーネントのユニットテスト
column. Next.js 11以前のstyled-components/jest導入
5 アプリケーション開発1～設計・環境設定～
5.1 本章で開発するアプリケーション
5.1.1 アプリケーションの仕様
5.1.2 アプリケーションのアーキテクチャ
5.2 開発環境構築
5.2.1 Next.jsのプロジェクト作成
5.2.2 styled-componentsの設定
5.2.3 ESLintの設定
5.2.4 Storybookの設定
5.2.5 React Hook Formの導入
5.2.6 SWRの導入
5.2.7 React Content Loaderの導入
5.2.8 Material Iconsの導入
5.2.9 環境変数
5.2.10 テスト環境構築
5.2.11 JSON Serverの設定
5.2.12 CSS in JSライブラリ
6 アプリケーション開発2～実装～
6.1 アプリケーションアーキテクチャと全体の実装の流れ
6.2 APIクライアントの実装
6.2.1 fetcher関数
6.2.2 APIクライアントの関数
6.2.3 アプリケーションで使用されるデータの型
6.2.4 開発環境のためのAPIリクエストプロキシ
6.3 コンポーネント実装の準備
6.3.1 レスポンシブデザインに対応したコンポーネント
6.3.2 Wrapperコンポーネントの実装
6.4 Atomic Designによるコンポーネント設計の実施
6.4.1 Atomic Designに沿ってコンポーネントを分割する
6.5 Atomsの実装
6.5.1 ボタン―Button
6.5.2 テキスト―Text
6.5.3 シェイプイメージ―ShapeImage
6.5.4 テキストインプット―Input
6.5.5 テキストエリア―TextArea
6.5.6 バッジ―Badge
6.6 Moleculesの実装
6.6.1 チェックボックス―Checkbox
6.6.2 ドロップダウン―Dropdown
6.6.3 ドロップゾーン―Dropzone
6.6.4 イメージプレビュー―ImagePreview
6.7 Organismsの実装
6.7.1 カート商品―CartProduct
6.7.2 グローバルスピナー―GlobalSpinner
6.7.3 ヘッダー―Header
6.7.4 商品カード―ProductCard
column. データURIスキーム
6.7.5 商品投稿フォーム―ProductForm
6.7.6 サインインフォーム―SigninForm
6.7.7 ユーザープロファイル―UserProfile
6.8 Templatesの実装
6.8.1 レイアウト―Layout
6.9 ページの設計と実装
6.9.1 サインインページ
6.9.2 ユーザーページ
6.9.3 トップページ
6.9.4 検索ページ
6.9.5 商品詳細ページ
6.9.6 買い物カートページ
6.9.7 出品ページ
6.10 コンポーネントのユニットテストの実装
6.10.1 ボタンのユニットテスト
6.10.2 ドロップダウンのユニットテスト
6.10.3 ドロップゾーンのユニットテスト
6.10.4 ヘッダーのユニットテスト
6.10.5 サインインフォームのテスト
6.10.6 商品投稿フォームのテスト
7 アプリケーション開発3～リリースと改善～
7.1 デプロイとアプリケーション全体のシステムアーキテクチャ
7.2 Heroku
7.3 Vercel
7.3.1 Vercelへのアプリケーションのデプロイ
7.4 ロギング
column. ログレベル
7.5 SEO
7.5.1 メタタグ
7.5.2 パンくずリスト
7.5.3 sitemap
7.5.4 robots.txt
7.6 アクセシビリティ
7.6.1 セマンティック
7.6.2 補助テキスト
7.6.3 WAI-ARIA
7.7 セキュリティ
7.7.1 フロントエンド開発における脆弱性とその対策
column. CSRF
column. Permissions-Policy
column. X-XSS-Protectionヘッダー
column. セキュリティテスト
column. Next.jsのバックエンドの考え方
column. Next.jsの認証
Appendix Next.jsのさらなる活用
A.1 決済ツールStripe
A.1.1 Stripeのセットアップ
A.1.2 Stripe APIの利用
A.1.3 Stripeの公式ドキュメント
A.2 StoryShots―UIスナップショットテスト
A.2.1 StoryShotsとは
A.2.2 storyshots-puppeteer―スナップショットイメージによるUIテスト
A.3 AWS AmplifyへのNext.jsアプリケーションのデプロイ
A.3.1 Next.jsアプリケーションのAWS Amplifyへのデプロイ
A.3.2 SSGを使用したNext.jsアプリケーションのAWS Amplifyへのデプロイ
A.4 国際化ツールi18n
A.4.1 パスによる言語ルーティング
A.4.2 next-i18nを使ったテキストのi18n対応
著者情報
手島 拓也
吉田 健人
高林 佳稀
