ダウンロード
サンプルコードについて
（2026年6月17日更新）
本書のハンズオンで使用するサンプルコードは、著者のGitHubリポジトリで公開しています。
- https://github.com/NagaiKoki/frontend-test-gihyo-book-sample
サンプルプロジェクトはReact＋TypeScript＋Viteで構築されています。各章のハンズオンはブランチで管理しているため、章ごとにブランチを切り替えて作業してください。詳しいセットアップ手順は本書の第2章で解説しています。
お詫びと訂正（正誤表）
本書の以下の部分に誤りがありました。ここに訂正するとともに、ご迷惑をおかけしたことを深くお詫び申し上げます。
（2026年6月17日最終更新）
P.122 コード6.38内
| 誤 |
// スケルトンスクリーンが表示されることを確認
const skeleton = page.getByTestId('skeleton-card');
await expect(skeleton).toBeVisible();
await expect(skeleton).toHaveCount(3); // 3つのプレースホルダー
// データが読み込まれた後、実際のコンテンツが表示されることを確認
await expect(page.getByText('記事タイトル1')).toBeVisible();
await expect(page.getByText('著者A')).toBeVisible();
// スケルトンスクリーンが消えることを確認
await expect(skeleton).not.toBeVisible();
|
|---|
| 正 |
// スケルトンスクリーンが表示されることを確認
const skeleton = page.getByTestId('skeleton-card');
await expect(skeleton.first()).toBeVisible(); // 可視性は先頭要素で確認
await expect(skeleton).toHaveCount(3); // 3つのプレースホルダー
// データが読み込まれた後、実際のコンテンツが表示されることを確認
await expect(page.getByText('記事タイトル1')).toBeVisible();
await expect(page.getByText('著者A')).toBeVisible();
// スケルトンスクリーンが消えることを確認
await expect(skeleton).toHaveCount(0);
|
|---|
詳細は、サンプルリポジトリの下記ファイルに記載されています。
https://github.com/NagaiKoki/frontend-test-gihyo-book-sample/blob/main/ERRATA.md