商品を読み込んでいます

;\n if (state.status === \"error\") {\n return (\n

{state.message}

\n \n

\n );\n }\n if (state.products.length === 0) return

商品はまだありません

;\n```\n\n| 状態 | 表示 |\n|---|---|\n| 読み込み中 | 商品を読み込んでいます |\n| 失敗 | 失敗の理由と「もう一度読み込む」のボタン |\n| 成功（空） | 商品はまだありません |\n| 成功 | 商品の一覧。予約できない商品には「（店頭のみ）」 |\n\n`role=\"alert\"` は、画面の読み上げソフトに、内容をすぐ伝えるための目印です。\n\nAPIを止めてから画面を開き直すと、「APIに接続できませんでした」と「もう一度読み込む」が表示されます。APIを起動してからボタンを押すと、商品の一覧が表示されます。\n\n> [!NOTE] 自動で何度も送り直さない\n>\n> 失敗したときに、画面のプログラムが自動で何度も要求を送り直すと、APIやデータベースが止まっているときに、要求が積み重なります。この教材では、ボタンを押したときだけ送り直します。\n\n> [!TRY] 表示を確かめる\n>\n> APIを動かしたまま、`psql` で商品の表の行をすべて消すと（練習用のデータベースで）、画面には何が表示されますか。\n\n> [!DETAILS] 解答\n>\n> 「商品はまだありません」です。APIは `200` と空のリスト `[]` を返すため、失敗ではなく、成功（空）の状態になります。試したあとは、初期データに戻します。",14,"4.1 状態を1つの値で表す","`src/ProductList.tsx` で、画面の状態を1つの値で表します。\n\n```tsx\ntype State =\n | { status: \"loading\" }\n | { status: \"success\"; products: Product[] }\n | { status: \"error\"; message: string };\n```\n\n`status` の値によって、ほかに持つ項目が決まります。読み込み中には商品がなく、失敗のときにはメッセージがあります。\n\n```tsx\nexport function ProductList() {\n const [state, setState] = useState({ status: \"loading\" });\n const [attempt, setAttempt] = useState(0);\n\n useEffect(() => {\n const controller = new AbortController();\n setState({ status: \"loading\" });\n fetchProducts(controller.signal)\n .then((products) => setState({ status: \"success\", products }))\n .catch((error: unknown) => {\n if (controller.signal.aborted) return;\n const message = error instanceof ApiError ? error.message : \"商品を読み込めませんでした\";\n setState({ status: \"error\", message });\n });\n return () => controller.abort();\n }, [attempt]);\n```\n\n`attempt` は、読み込みの回数です。この値が変わるたびに、`useEffect` の中の処理がもう一度実行されます。`return () => controller.abort();` は、部品が画面から消えるときや、次の読み込みを始める前に、前の要求を取り消します。",13,"この章では、商品の一覧の部品で、読み込み中、成功、空、失敗の4つの状態を表示します。失敗したときは、「もう一度読み込む」のボタンで、要求を送り直せるようにします。画面の設計で決めた表示を、Reactの部品にします。",12,"第3章のまとめ","- `fetch` で要求を送り、接続の失敗、状態コード、JSONの形の3段階で確かめる\n- `fetch` は `404` や `500` でも失敗にならない。`response.ok` を確かめる\n- Zodの定義で応答の形を検査し、`z.infer` で同じ定義から型を作る\n- `as` で型を書くだけでは、外から届くデータの形は確かめられない",11,"第3章 fetchと応答の検査","3.2 型だけでは防げない","商品の型は、Zodの仕組みで定義しています。`src/schemas.ts` です。\n\n```ts\nexport const ProductSchema = z.object({\n id: z.string(),\n name: z.string(),\n price: z.number().int().nonnegative(),\n category: z.enum([\"bread\", \"pastry\", \"savory\", \"sweets\"]),\n reservable: z.boolean(),\n});\n\nexport const ProductListSchema = z.array(ProductSchema);\n\nexport type Product = z.infer;\n```\n\n`z.infer` で、検査の定義から、TypeScriptの型 `Product` を作ります。検査と型が、同じ定義から作られます。\n\n`response.json()` の結果に、`as Product[]` と型を書くだけにすると、TypeScriptは中身を確かめません。APIの応答が変わって、`price` が `\"380円\"` という文字になっていても、型の上では `number` として扱われ、計算の結果がおかしくなります。\n\n`safeParse` は、実行するときに、受け取った値を1つずつ確かめます。形が違えば、`result.success` が偽になり、どの項目が違ったかが `result.error.issues` に入ります。\n\n> [!TRY] 検査の結果を予想する\n>\n> APIが、`[{\"id\": \"p001\", \"name\": \"食パン（1斤）\", \"price\": \"380\", \"category\": \"bread\", \"reservable\": true}]` を返しました。`ProductListSchema.safeParse` の結果はどうなりますか。\n\n> [!DETAILS] 解答\n>\n> `result.success` は偽になります。`price` が文字の `\"380\"` で、`z.number()` に合わないためです。画面には「商品の情報を読み取れませんでした」と表示され、開発者ツールの「Console」に、違った項目が表示されます。",10,"3.1 商品を受け取る関数","`src/api.ts` に、商品の一覧を受け取る関数を書きます。\n\n```ts\nexport async function fetchProducts(signal?: AbortSignal): Promise {\n let response: Response;\n try {\n response = await fetch(`${API_BASE}/products`, { signal });\n } catch (error) {\n if (error instanceof DOMException && error.name === \"AbortError\") throw error;\n throw new ApiError(\"APIに接続できませんでした\", \"network\");\n }\n if (!response.ok) {\n throw new ApiError(`APIがエラーを返しました（${response.status}）`, \"http\", response.status);\n }\n const result = ProductListSchema.safeParse(await response.json());\n if (!result.success) {\n console.error(\"商品一覧の形が想定と違います\", result.error.issues);\n throw new ApiError(\"商品の情報を読み取れませんでした\", \"invalid\");\n }\n return result.data;\n}\n```\n\n| 段階 | 失敗のとき | `ApiError` の `kind` |\n|---|---|---|\n| `fetch` で要求を送る | 接続できない（APIの停止、CORS） | `network` |\n| `response.ok` を確かめる | 状態コードが200番台でない | `http` |\n| `safeParse` で形を確かめる | JSONの形が想定と違う | `invalid` |\n\n`fetch` は、状態コードが `404` や `500` でも、失敗にはなりません。`response.ok`（200番台なら真）を確かめないと、エラーの本文を商品の一覧として扱ってしまいます。\n\n`signal` は、要求を途中で取り消すための目印です。画面を離れたときに、使わなくなった要求を取り消します。",9,"この章では、画面のプログラムで、APIから商品の一覧を受け取る関数を作ります。状態コードを確かめ、受け取ったJSONが想定した形かを検査します。TypeScriptの型を書くだけでは、外から届くデータの形を確かめられないことを確かめます。",8,"第2章のまとめ","- 画面のプログラムの接続先は、`VITE_API_BASE_URL` で設定する\n- `VITE_` で始まる値はブラウザに渡るため、秘密を書かない\n- 画面とAPIのオリジンが違うため、APIの側でCORSの許可が必要\n- CORSの失敗とAPIの停止は、開発者ツールの表示とAPIのログで見分ける",7,"第2章接続先とCORS","2.2 CORSの設定を確かめる","画面（`http://localhost:5173`）からAPI（`http://localhost:8000`）を呼ぶと、オリジンが違うため、APIの側で許可が必要です。APIの `main.py` には、許可するオリジンとして `http://localhost:5173` を登録してあります。\n\n```python\napp.add_middleware(\n CORSMiddleware,\n allow_origins=[\"http://localhost:5173\"],\n allow_methods=[\"GET\", \"POST\"],\n allow_headers=[\"Authorization\", \"Content-Type\", \"Idempotency-Key\"],\n)\n```\n\nViteを別のポート（5174など）で起動すると、APIは許可を返さず、ブラウザが応答を止めます。ブラウザの開発者ツールの「Console」に、次のような表示が出ます。\n\n```text\nAccess to fetch at 'http://localhost:8000/products' from origin 'http://localhost:5174'\nhas been blocked by CORS policy\n```\n\n> [!WARNING] CORS の失敗と API の停止は、画面からは同じに見える\n>\n> CORSで止められたときも、APIが止まっているときも、画面のプログラムには「接続できなかった」という同じ失敗が届きます。どちらかを見分けるには、ブラウザの開発者ツールの表示と、APIのログ（要求が届いたか）を見ます。\n\n> [!TRY] 原因を見分ける\n>\n> 画面に「APIに接続できませんでした」と表示されました。APIのターミナルには、何の行も増えていません。開発者ツールの「Console」には、CORSの表示はありません。原因として考えられることを答えてください。\n\n> [!DETAILS] 解答例\n>\n> APIが止まっているか、`VITE_API_BASE_URL` の接続先（ポートなど）が違っていて、要求がAPIに届いていません。`/health` を開いてAPIが動いているかを確かめ、`.env` の接続先を確かめます。",6,"2.1 接続先を設定にする","画面のプログラムで、APIの住所を決めます。`src/api.ts` に書きます。\n\n```ts\nconst API_BASE = import.meta.env.VITE_API_BASE_URL ?? \"http://localhost:8000\";\n```\n\n`import.meta.env.VITE_API_BASE_URL` は、Viteの設定ファイル `.env` に書いた値です。書かれていなければ、`??` の右の `http://localhost:8000` を使います。\n\n```text\nVITE_API_BASE_URL=http://localhost:8000\n```\n\n`VITE_` で始まる名前の値だけが、画面のプログラムから読めます。画面のプログラムは、ブラウザで動き、使う人のパソコンに渡されます。そのため、`VITE_` の値に、パスワードや秘密の鍵を書いてはいけません。\n\n| `.env` の場所 | 中身 | 秘密を書いてよいか |\n|---|---|---|\n| `reservation-api/.env` | `DATABASE_URL`、`SECRET_KEY` | 書く（サーバーの中だけで使う） |\n| `reservation-web/.env` | `VITE_API_BASE_URL` | 書かない（ブラウザに渡る） |",5,"この章では、画面のプログラムが、どこのAPIに要求を送るかを決めます。接続先は設定で変えられるようにします。画面とAPIのオリジンが違うため、APIの側でCORSの設定が必要なことも確かめます。",4,"第1章のまとめ","- 予約アプリは、画面（5173）、API（8000）、データベース（5432）の3つのプログラムでできている\n- 3つは別々に起動し、別々に止まる。APIと画面は、それぞれのターミナルで動かす\n- データベース、API、画面の順に、1つずつ動いているかを確かめる\n- `/health` で、APIとデータベースへの接続を一度に確かめる",3,"第1章 3つのプログラムの起動","1.2 1つずつ確かめる","3つのプログラムが動いているかを、それぞれ確かめます。\n\n| 確かめるもの | 確かめ方 | 動いているときの結果 |\n|---|---|---|\n| データベース | `psql` で `komorebi` に接続する | `komorebi=>` が表示される |\n| API | ブラウザで `http://localhost:8000/health` を開く | `{\"status\":\"ok\",\"database\":\"ok\"}` |\n| 画面 | ブラウザで `http://localhost:5173` を開く | 店の名前が表示される |\n\nAPIの `/health` は、APIが動いていることと、データベースに接続できることを、一度に確かめられます。`503` が返ったら、APIは動いていて、データベースに接続できていません。\n\n画面が表示されないとき、商品が出ないときは、この表の上から順に確かめます。下の段のプログラムは、上の段が動いていないと、正しく動きません。\n\n> [!TRY] 止まっているプログラムを見分ける\n>\n> ブラウザで `http://localhost:5173` を開くと店の名前は表示されましたが、`http://localhost:8000/health` を開くと「このサイトにアクセスできません」と表示されました。どのプログラムが止まっていますか。\n\n> [!DETAILS] 解答\n>\n> APIです。画面のサーバーは動いていますが、8000番で待ち受けるプログラムがいません。`reservation-api` フォルダで仮想環境を使い始めてから、`fastapi dev main.py` で起動します。",2,"1.1 3つのプログラム","予約アプリは、次の3つのプログラムでできています。\n\n```text\nブラウザ（画面：React） ──> API（FastAPI） ──> データベース（PostgreSQL）\n localhost:5173 localhost:8000 localhost:5432\n```\n\n| プログラム | 起動の方法 | 待ち受けるポート |\n|---|---|---|\n| データベース | PostgreSQLのサービス、またはPostgres.app | 5432 |\n| API | `fastapi dev main.py`（`reservation-api` フォルダ） | 8000 |\n| 画面 | `npm run dev`（`reservation-web` フォルダ） | 5173 |\n\n画面のプログラムは、Viteの開発用のサーバーで動かします。ブラウザで `http://localhost:5173` を開くと、画面が表示されます。画面は、商品のデータをAPIに求め、APIはデータベースから読み出します。\n\nターミナルは、APIと画面で、1つずつ開きます。どちらも、止めるまでターミナルを使い続けるためです。",1,"この章では、予約アプリを動かすのに必要な3つのプログラムを、それぞれ起動します。画面（React）、API（FastAPI）、データベース（PostgreSQL）は、別々のプログラムで、別々に起動し、別々に止まります。どれが動いているかを、1つずつ確かめる方法を決めます。",0,"id","01a1549f-a3a6-7207-b0da-bcf021916339","画面とAPIの接続商品一覧をAPIから表示する","type","description","3つのプログラムの起動、接続先とCORS、fetchと応答の検査、読み込み中・失敗・再試行、ブラウザとログの照合を学びます。","learning_role","learning_outcome","language","JPN","created_at","2026-10-19T14:45:10.694905","updated_at","2026-10-19T14:45:12.103298","duration",30,"user",{"_124":180,"_181":164,"_134":182,"_136":183,"_184":145,"_185":20,"_186":-5,"_187":20},"producer",{"_124":180,"_181":164,"_134":182,"_136":183,"_184":145,"_185":20,"_186":-5,"_187":20},"is_published",true,"is_active","curriculum_id","01a1549f-9ccb-746f-880c-d696105f84d5","page",{"_124":60,"_57":178,"_144":145,"_179":125},"page_count",20,"tags",[],"categories",[171],"thumbnail","https://eiabkrsnynoojsnnqpqh.supabase.co/storage/v1/object/public/thumbnails/books/bk5xoyw5c7qo_f80c2e78fc22c28e.webp","level","intermediate","curriculum_slug","curriculum_title","curriculum_user","yuya","producer_label","assessment","is_favorite","is_saved","favorite_count","reader_count",{"_124":172,"_30":173,"_174":175,"_134":176,"_136":177},"00000000-0000-0000-0000-0d149b90e739","it","name","IT","2026-05-25T01:20:55.683383","2026-07-31T00:43:26.683266","# 第1章 3つのプログラムの起動\n\nこの章では、予約アプリを動かすのに必要な3つのプログラムを、それぞれ起動します。画面（React）、API（FastAPI）、データベース（PostgreSQL）は、別々のプログラムで、別々に起動し、別々に止まります。どれが動いているかを、1つずつ確かめる方法を決めます。\n\n## 1.1 3つのプログラム\n\n予約アプリは、次の3つのプログラムでできています。\n\n```text\nブラウザ（画面：React） ──> API（FastAPI） ──> データベース（PostgreSQL）\n localhost:5173 localhost:8000 localhost:5432\n```\n\n| プログラム | 起動の方法 | 待ち受けるポート |\n|---|---|---|\n| データベース | PostgreSQLのサービス、またはPostgres.app | 5432 |\n| API | `fastapi dev main.py`（`reservation-api` フォルダ） | 8000 |\n| 画面 | `npm run dev`（`reservation-web` フォルダ） | 5173 |\n\n画面のプログラムは、Viteの開発用のサーバーで動かします。ブラウザで `http://localhost:5173` を開くと、画面が表示されます。画面は、商品のデータをAPIに求め、APIはデータベースから読み出します。\n\nターミナルは、APIと画面で、1つずつ開きます。どちらも、止めるまでターミナルを使い続けるためです。\n\n## 1.2 1つずつ確かめる\n\n3つのプログラムが動いているかを、それぞれ確かめます。\n\n| 確かめるもの | 確かめ方 | 動いているときの結果 |\n|---|---|---|\n| データベース | `psql` で `komorebi` に接続する | `komorebi=>` が表示される |\n| API | ブラウザで `http://localhost:8000/health` を開く | `{\"status\":\"ok\",\"database\":\"ok\"}` |\n| 画面 | ブラウザで `http://localhost:5173` を開く | 店の名前が表示される |\n\nAPIの `/health` は、APIが動いていることと、データベースに接続できることを、一度に確かめられます。`503` が返ったら、APIは動いていて、データベースに接続できていません。\n\n画面が表示されないとき、商品が出ないときは、この表の上から順に確かめます。下の段のプログラムは、上の段が動いていないと、正しく動きません。\n\n> [!TRY] 止まっているプログラムを見分ける\n>\n> ブラウザで `http://localhost:5173` を開くと店の名前は表示されましたが、`http://localhost:8000/health` を開くと「このサイトにアクセスできません」と表示されました。どのプログラムが止まっていますか。\n\n> [!DETAILS] 解答\n>\n> APIです。画面のサーバーは動いていますが、8000番で待ち受けるプログラムがいません。`reservation-api` フォルダで仮想環境を使い始めてから、`fastapi dev main.py` で起動します。\n\n## 第1章のまとめ\n\n- 予約アプリは、画面（5173）、API（8000）、データベース（5432）の3つのプログラムでできている\n- 3つは別々に起動し、別々に止まる。APIと画面は、それぞれのターミナルで動かす\n- データベース、API、画面の順に、1つずつ動いているかを確かめる\n- `/health` で、APIとデータベースへの接続を一度に確かめる\n\n# 第2章接続先とCORS\n\nこの章では、画面のプログラムが、どこのAPIに要求を送るかを決めます。接続先は設定で変えられるようにします。画面とAPIのオリジンが違うため、APIの側でCORSの設定が必要なことも確かめます。\n\n## 2.1 接続先を設定にする\n\n画面のプログラムで、APIの住所を決めます。`src/api.ts` に書きます。\n\n```ts\nconst API_BASE = import.meta.env.VITE_API_BASE_URL ?? \"http://localhost:8000\";\n```\n\n`import.meta.env.VITE_API_BASE_URL` は、Viteの設定ファイル `.env` に書いた値です。書かれていなければ、`??` の右の `http://localhost:8000` を使います。\n\n```text\nVITE_API_BASE_URL=http://localhost:8000\n```\n\n`VITE_` で始まる名前の値だけが、画面のプログラムから読めます。画面のプログラムは、ブラウザで動き、使う人のパソコンに渡されます。そのため、`VITE_` の値に、パスワードや秘密の鍵を書いてはいけません。\n\n| `.env` の場所 | 中身 | 秘密を書いてよいか |\n|---|---|---|\n| `reservation-api/.env` | `DATABASE_URL`、`SECRET_KEY` | 書く（サーバーの中だけで使う） |\n| `reservation-web/.env` | `VITE_API_BASE_URL` | 書かない（ブラウザに渡る） |\n\n## 2.2 CORSの設定を確かめる\n\n画面（`http://localhost:5173`）からAPI（`http://localhost:8000`）を呼ぶと、オリジンが違うため、APIの側で許可が必要です。APIの `main.py` には、許可するオリジンとして `http://localhost:5173` を登録してあります。\n\n```python\napp.add_middleware(\n CORSMiddleware,\n allow_origins=[\"http://localhost:5173\"],\n allow_methods=[\"GET\", \"POST\"],\n allow_headers=[\"Authorization\", \"Content-Type\", \"Idempotency-Key\"],\n)\n```\n\nViteを別のポート（5174など）で起動すると、APIは許可を返さず、ブラウザが応答を止めます。ブラウザの開発者ツールの「Console」に、次のような表示が出ます。\n\n```text\nAccess to fetch at 'http://localhost:8000/products' from origin 'http://localhost:5174'\nhas been blocked by CORS policy\n```\n\n> [!WARNING] CORS の失敗と API の停止は、画面からは同じに見える\n>\n> CORSで止められたときも、APIが止まっているときも、画面のプログラムには「接続できなかった」という同じ失敗が届きます。どちらかを見分けるには、ブラウザの開発者ツールの表示と、APIのログ（要求が届いたか）を見ます。\n\n> [!TRY] 原因を見分ける\n>\n> 画面に「APIに接続できませんでした」と表示されました。APIのターミナルには、何の行も増えていません。開発者ツールの「Console」には、CORSの表示はありません。原因として考えられることを答えてください。\n\n> [!DETAILS] 解答例\n>\n> APIが止まっているか、`VITE_API_BASE_URL` の接続先（ポートなど）が違っていて、要求がAPIに届いていません。`/health` を開いてAPIが動いているかを確かめ、`.env` の接続先を確かめます。\n\n## 第2章のまとめ\n\n- 画面のプログラムの接続先は、`VITE_API_BASE_URL` で設定する\n- `VITE_` で始まる値はブラウザに渡るため、秘密を書かない\n- 画面とAPIのオリジンが違うため、APIの側でCORSの許可が必要\n- CORSの失敗とAPIの停止は、開発者ツールの表示とAPIのログで見分ける\n\n# 第3章 fetchと応答の検査\n\nこの章では、画面のプログラムで、APIから商品の一覧を受け取る関数を作ります。状態コードを確かめ、受け取ったJSONが想定した形かを検査します。TypeScriptの型を書くだけでは、外から届くデータの形を確かめられないことを確かめます。\n\n## 3.1 商品を受け取る関数\n\n`src/api.ts` に、商品の一覧を受け取る関数を書きます。\n\n```ts\nexport async function fetchProducts(signal?: AbortSignal): Promise {\n let response: Response;\n try {\n response = await fetch(`${API_BASE}/products`, { signal });\n } catch (error) {\n if (error instanceof DOMException && error.name === \"AbortError\") throw error;\n throw new ApiError(\"APIに接続できませんでした\", \"network\");\n }\n if (!response.ok) {\n throw new ApiError(`APIがエラーを返しました（${response.status}）`, \"http\", response.status);\n }\n const result = ProductListSchema.safeParse(await response.json());\n if (!result.success) {\n console.error(\"商品一覧の形が想定と違います\", result.error.issues);\n throw new ApiError(\"商品の情報を読み取れませんでした\", \"invalid\");\n }\n return result.data;\n}\n```\n\n| 段階 | 失敗のとき | `ApiError` の `kind` |\n|---|---|---|\n| `fetch` で要求を送る | 接続できない（APIの停止、CORS） | `network` |\n| `response.ok` を確かめる | 状態コードが200番台でない | `http` |\n| `safeParse` で形を確かめる | JSONの形が想定と違う | `invalid` |\n\n`fetch` は、状態コードが `404` や `500` でも、失敗にはなりません。`response.ok`（200番台なら真）を確かめないと、エラーの本文を商品の一覧として扱ってしまいます。\n\n`signal` は、要求を途中で取り消すための目印です。画面を離れたときに、使わなくなった要求を取り消します。\n\n## 3.2 型だけでは防げない\n\n商品の型は、Zodの仕組みで定義しています。`src/schemas.ts` です。\n\n```ts\nexport const ProductSchema = z.object({\n id: z.string(),\n name: z.string(),\n price: z.number().int().nonnegative(),\n category: z.enum([\"bread\", \"pastry\", \"savory\", \"sweets\"]),\n reservable: z.boolean(),\n});\n\nexport const ProductListSchema = z.array(ProductSchema);\n\nexport type Product = z.infer;\n```\n\n`z.infer` で、検査の定義から、TypeScriptの型 `Product` を作ります。検査と型が、同じ定義から作られます。\n\n`response.json()` の結果に、`as Product[]` と型を書くだけにすると、TypeScriptは中身を確かめません。APIの応答が変わって、`price` が `\"380円\"` という文字になっていても、型の上では `number` として扱われ、計算の結果がおかしくなります。\n\n`safeParse` は、実行するときに、受け取った値を1つずつ確かめます。形が違えば、`result.success` が偽になり、どの項目が違ったかが `result.error.issues` に入ります。\n\n> [!TRY] 検査の結果を予想する\n>\n> APIが、`[{\"id\": \"p001\", \"name\": \"食パン（1斤）\", \"price\": \"380\", \"category\": \"bread\", \"reservable\": true}]` を返しました。`ProductListSchema.safeParse` の結果はどうなりますか。\n\n> [!DETAILS] 解答\n>\n> `result.success` は偽になります。`price` が文字の `\"380\"` で、`z.number()` に合わないためです。画面には「商品の情報を読み取れませんでした」と表示され、開発者ツールの「Console」に、違った項目が表示されます。\n\n## 第3章のまとめ\n\n- `fetch` で要求を送り、接続の失敗、状態コード、JSONの形の3段階で確かめる\n- `fetch` は `404` や `500` でも失敗にならない。`response.ok` を確かめる\n- Zodの定義で応答の形を検査し、`z.infer` で同じ定義から型を作る\n- `as` で型を書くだけでは、外から届くデータの形は確かめられない\n\n# 第4章読み込み中・失敗・再試行\n\nこの章では、商品の一覧の部品で、読み込み中、成功、空、失敗の4つの状態を表示します。失敗したときは、「もう一度読み込む」のボタンで、要求を送り直せるようにします。画面の設計で決めた表示を、Reactの部品にします。\n\n## 4.1 状態を1つの値で表す\n\n`src/ProductList.tsx` で、画面の状態を1つの値で表します。\n\n```tsx\ntype State =\n | { status: \"loading\" }\n | { status: \"success\"; products: Product[] }\n | { status: \"error\"; message: string };\n```\n\n`status` の値によって、ほかに持つ項目が決まります。読み込み中には商品がなく、失敗のときにはメッセージがあります。\n\n```tsx\nexport function ProductList() {\n const [state, setState] = useState({ status: \"loading\" });\n const [attempt, setAttempt] = useState(0);\n\n useEffect(() => {\n const controller = new AbortController();\n setState({ status: \"loading\" });\n fetchProducts(controller.signal)\n .then((products) => setState({ status: \"success\", products }))\n .catch((error: unknown) => {\n if (controller.signal.aborted) return;\n const message = error instanceof ApiError ? error.message : \"商品を読み込めませんでした\";\n setState({ status: \"error\", message });\n });\n return () => controller.abort();\n }, [attempt]);\n```\n\n`attempt` は、読み込みの回数です。この値が変わるたびに、`useEffect` の中の処理がもう一度実行されます。`return () => controller.abort();` は、部品が画面から消えるときや、次の読み込みを始める前に、前の要求を取り消します。\n\n## 4.2 4つの状態の表示\n\n```tsx\n if (state.status === \"loading\") return

商品を読み込んでいます

;\n if (state.status === \"error\") {\n return (\n

{state.message}

\n \n

\n );\n }\n if (state.products.length === 0) return

商品はまだありません