書籍概要

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

サポート

ダウンロード

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

(2022年8月16日最終更新)

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

ダウンロード
sample20220816.zip

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

正誤表

本書の以下の部分に誤りがありました。ここに訂正するとともに,ご迷惑をおかけしたことを深くお詫び申し上げます。

(2022年8月16日最終更新)

1.2.2 SPAの登場とMVC/MVVMフレームワークにおけるJSON APIの説明

SON APIによる疎結合の設計ができる
JSON APIによる疎結合の設計ができる

電子版でのみJSON APIの説明に誤字が含まれていました。

(以下2022年8月4日更新)

P.89 Column「FCとVFC」のFC/VFCのサンプルの型指定がおかしい

import React from 'react'

// React18からのコンポーネントへの型指定方法
// VFCが非推奨になり、FCでの暗黙的なchildrenの定義が無くなりました
type ContainerProps = {
  title: string
  children: React.ReactNode
}

const Container: React.FC<ContainerProps> = (props) => {
  const { title, children } = props

  return (
    <div style={{ background: 'red' }}>
      <span>{title}</span>
      <div>{children}</div>
    </div>
  )
}

...

P.172 4.4.3のinput.spec.tsxにクリアボタンのテストを追記した箇所

it('should reset when user clicks button', async () => {
it('should reset when user clicks button', () => {

不必要な「async」が混ざっていました。

P.176 4.4.4のinput.spec.tsxにテキストの反映テストを追記した箇所

it('should display input text 1 second after onChange event occurs', () => {
it('should display input text 1 second after onChange event occurs', async () => {

本来「async」が必要な箇所に指定がありませんでした。

(以下2022年8月3日更新)

P.154 4.2.2のthemeで定義した値を使用するリスト

color: ${(props) => props.theme.colors.primary};
color: ${(props) => props.theme.colors.red};

(以下2022年8月1日更新)

P.33 Column「Vue.jsとNuxt.js」のVue RouterのURL

https://router.vuejs.org/ja/
https://router.vuejs.org/

「ja/」が不要です。

P.62 2.5.5 インデックス型のコード例のコメント

numberとして扱う方の定義
numberとして扱うの定義

P.123-P.124 3.8.4の[id].tsxのコードの型エラー

書籍掲載のコードで動作はするものの,型エラーが起きていました。本来は下記のようなコードが望ましかったです。サンプルファイルもご参照ください。

// getStaticPathsは生成したいページのパスパラメータの組み合わせを返す
// このファイルはpages/posts/[id].tsxなので、パスパラメータとしてidの値を返す必要がある
export const getStaticPaths: GetStaticPaths = async () => {
  // それぞれのページのパスパラメータをまとめたもの
  const paths = [
    {
      params: {
        id: '1',
      },
    },
    {
      params: {
        id: '2',
      },
    },
    {
      params: {
        id: '3',
      },
    },
  ]

  // fallbackをfalseにすると、pathsで定義されたページ以外は404ページを表示する
  return { paths, fallback: false }
}

// パラメータの型を定義
interface PostParams extends ParsedUrlQuery {
  id: string
}

// getStaticPaths実行後にそれぞれのパスに対してgetStaticPropsが実行される
export const getStaticProps: GetStaticProps<PostProps, PostParams> = async (context) => {
  return {
    props: {
      id: context.params!['id'],
    },
  }
}

export default Post

P.88 Column「FCとVFC」のFC/VFCのサンプルの型指定がおかしい

本来はFC/VFCの型指定があるべきだったコードにこれらの型がありませんでした。正しいコードは下記です。

import React from 'react'

// React17以前ではFCを指定した場合、
// childrenがpropsに暗黙的に含まれています
type ContainerProps = {
  title: string
}

const Container: React.FC<ContainerProps> = (props) => {
  const { title, children } = props

  return (
    <div style={{ background: 'red' }}>
      <span>{title}</span>
      <div>{children}</div>
    </div>
  )
}

// React17以前ではchildrenを使用しない場合、VFCを指定します
const Parent: React.VFC = () => {
  return (
    <Container>
      <p>ここの部分は背景色で囲まれています</p>
    </Container>
  )
}

P.195 5.2.4 Storybookが動作しない

Storybookの設定ファイル(.storybook/preview.js)中の下記記述があると,Storybookが正しく動作しませんでした。こちらの記述を削除してお試しください。公開されているサンプルファイルも参照してください。

Object.defineProperty(NextImage, "__esModule", {
        configurable: true,
        value: true,
});

P.180 5章の冒頭のテスト自動化に関する言及

ユニットテスト、結合テスト、UIテスト
ユニットテスト

「、結合テスト、UIテスト」が不要です。

P.182 5.1.1の表

正直を買い物カートに入れ
商品を買い物カートに入れ

商品一覧