書籍概要

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

著者
発売日
更新日

概要

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

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

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

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

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

こんな方におすすめ

  • モダンなWebフロントエンドに興味のある方
  • React/Next.jsを初めて使う方,本番に導入したい方
  • React/Next.jsとTypeScriptを組み合わせた開発スタイルに興味のある方
  • TypeScriptを中心に据えたWebフロントエンド開発に興味のある方
  • Atomic DesignやStorybookなど,コンポーネント中心の開発に興味のある方

サンプル

samplesamplesamplesample

目次

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

サポート

ダウンロード

サンプルファイルのダウンロード

(2023年4月19日最終更新)

本書のサンプルファイルをご利用いただけます。適宜展開してご利用ください。最終更新以前にダウンロードされた方は再度ダウンロードをお願いいたします。

ダウンロード
sample20230419.zip

なお,一部のファイルはGitHubで公開しています。

正誤表

本書の正誤表および補足情報は下記リンク先のスプレッドシート上で公開しています。

(2023年4月25日更新)

TypeScriptとReact_Next.jsでつくる 実践Webアプリケーション開発正誤表

商品一覧