著者紹介

内容

目次

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