概要
新しいフロントエンドの入門書決定版！
本書は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など，コンポーネント中心の開発に興味のある方
サポート
ダウンロード
サンプルファイルのダウンロード
本書のサンプルファイルをご利用いただけます。適宜展開してご利用ください。最終更新以前にダウンロードされた方は再度ダウンロードをお願いいたします。
- ダウンロード
- sample20220816.zip
なお，一部のファイルはGitHubで公開しています。
正誤表
本書の以下の部分に誤りがありました。ここに訂正するとともに，ご迷惑をおかけしたことを深くお詫び申し上げます。
1.2.2 SPAの登場とMVC/MVVMフレームワークにおけるJSON APIの説明
| 誤 |
SON APIによる疎結合の設計ができる |
|---|
| 正 |
JSON APIによる疎結合の設計ができる |
|---|
電子版でのみJSON APIの説明に誤字が含まれていました。
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」が必要な箇所に指定がありませんでした。
P.154 4.2.2のthemeで定義した値を使用するリスト
| 誤 |
color: ${(props) => props.theme.colors.primary};
|
|---|
| 正 |
color: ${(props) => props.theme.colors.red};
|
|---|
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の表
| 誤 |
正直を買い物カートに入れ |
|---|
| 正 |
商品を買い物カートに入れ |
|---|
