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

サポートページ

 

この記事を読むのに必要な時間：およそ 0.5 分

ダウンロード

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

（2022年8月1日最終更新）

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

ダウンロード
sample20220801.zip

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

お詫びと訂正（正誤表）

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

（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の表

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