目次
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対応