atom.web-builder.read-data-in-next
Next.js でデータを読み込む
Next.js でデータを読み込む レストランでメニューを注文する場面を想像してみてください。あなたがウェイターに注文を伝え、厨房から料理が出てきてテーブルに並ぶ——この流れは、ウェブページがデータを読み込む仕組み...
成果物成果物このレッスンが終わったとき、あなたの手元に残る具体的な成果物です(例: 公開済みの Web ページ、動作するフォームなど)。
証跡証跡成果物が正しく作れたことを確認するためのチェックリストです(例: ブラウザで動作する、フォーム送信で値が保存される)。
メディアメディアレッスン内に出てくる図や動画のスロットです。実際の画面やイメージで理解を補助します。
レッスン本文
Next.js でデータを読み込む
レストランでメニューを注文する場面を想像してみてください。あなたがウェイターに注文を伝え、厨房から料理が出てきてテーブルに並ぶ——この流れは、ウェブページがデータを読み込む仕組みとそっくりです。厨房（＝データの置き場所）に注文を出して、料理（＝データ）をテーブル（＝画面）に運ぶ。これが「データの読み込み」です。
このレッスンでは、Next.js（＝Webアプリを作るための人気の道具）を使って、外部のデータを読み込んで画面に表示する一連の流れを体験します。AIツールに指示を出してコードを書いてもらうので、プログラミングの知識は不要です。
前提を確認する
このレッスンを始める前に、次の2つが整っているか確認してください。
- Next.js のプロジェクトがある — 「Next.js プロジェクトを作る」レッスンを終えている
- ターミナルが開ける — ターミナル（＝コンピュータに文字で命令を出す黒い画面）を起動できる
- AIツールが使える — Claude Code、Codex CLI、Cursor、ChatGPT のいずれかが使える状態になっている
まだプロジェクトがない場合は、先に「Next.js プロジェクトを作る」レッスンを終えてから戻ってきてください。
全体像をつかむ — 3ステップで完了
Next.js でデータを読み込む流れは、大きく3ステップです。
| ステップ | やること | レストランのたとえ |
|---|---|---|
| 1. 読み込み先を決める | API（＝データを受け取る窓口）の住所を決める | メニューを見る |
| 2. AIにコードを書いてもらう | AIツールに指示を出してコードを作成 | ウェイターに注文する |
| 3. 画面で確認する | 読み込んだデータがページに表示されるか確認 | 料理がテーブルに届く |
ステップ1: 読み込むデータを決める
今回は、無料で誰でも使えるテスト用データ「JSONPlaceholder」を使います。ここにはブログの投稿データ（タイトルと本文のセット）が入っていて、特別な手続きなしに読み込めます。
AIに指示を出すときのコツは、「どこから」「何を」読み込むかをはっきり伝えることです。
良い例:
「https://jsonplaceholder.typicode.com/posts からデータを読み込んで、タイトル一覧を表示するページを作って」
悪い例:
「データを読み込んで」 ← どこから・どんなデータかが曖昧で、AIが的外れなコードを書いてしまう
ステップ2: AIに指示を出してページを作る
お使いのAIツールに合わせて、以下のように指示を出してください。
Claude Code / Codex CLI を使う場合
ターミナルで Claude Code（または Codex CLI）を起動し、次のプロンプトを入力します。
app/posts/page.tsx を作って。
https://jsonplaceholder.typicode.com/posts から投稿データを読み込んで、
タイトルを一覧表示するページにして。
各コード行に日本語のコメントをつけて。
サーバーコンポーネントの async/await を使って。
AIがコードを生成してファイルに書き込んでくれます。「サーバーコンポーネント」や「async/await」が何かわからなくても大丈夫です。AIが適切に処理してくれます。
Cursor / ChatGPT を使う場合
Cursor のチャット欄、または ChatGPT に同じ指示を貼り付けてください。ChatGPT の場合は、生成されたコードをコピーして app/posts/page.tsx に自分で保存する必要があります。
ポイント: AIが作ったコードの中身を完全に理解する必要はありません。「AIに正しく指示を出せた」「結果を確認できた」——これが今回のゴールです。
ステップ3: 開発サーバーを立ち上げて確認する
ターミナルで次のコマンドを入力して、開発サーバー（＝手元のパソコンでWebページを試し見するための仕組み）を起動します。
npm run dev
（これは「開発用のサーバーを動かして」という命令です。）
起動したら、ブラウザで http://localhost:3000/posts を開きます。
結果をチェックする
画面が表示されたら、次の3つを確認してください。
- タイトルが並んでいるか — 「sunt aut facere…」「qui est esse…」のようなタイトルが10個以上見える
- エラーが出ていないか — 赤い文字のエラーメッセージが画面に出ていない
- すぐ表示されたか — ページを開いてから2〜3秒以内にデータが見える
3つとも確認できたら、データの読み込みは成功です！
つまずいたときに対処する
うまくいかないときは、まず下の表を確認してください。そして、エラーメッセージや画面の状態をそのままAIに伝えるのが最速の解決法です。
| 症状 | よくある原因 | AIへの伝え方（プロンプト例） |
|---|---|---|
| 画面が真っ白 | データ読み込みのコードに問題がある | 「http://localhost:3000/posts を開いたら真っ白です。app/posts/page.tsx を確認して修正して」 |
| 「404」と表示される | ファイルの保存場所が違う | 「/posts にアクセスすると404になります。app/posts/page.tsx が正しい場所にあるか確認して」 |
| 赤いエラーメッセージ | コードの文法エラー | エラーメッセージ全文をコピーして「このエラーを修正して」と貼り付ける |
| 表示に10秒以上かかる | ネットワークが遅い | Wi-Fi接続を確認する。問題が続く場合は「読み込み中の表示を追加して」とAIに依頼 |
npm run dev が動かない | Node.js が入っていない | 「npm run dev と入力したら command not found と出ました」とAIに伝える |
大事なコツ: エラーが出ても慌てないでください。エラーメッセージをそのままAIに貼り付ければ、ほとんどの場合AIが原因を特定して修正してくれます。
振り返る
ここまでで、次の3つができるようになりました。
- 外部データの読み込み先を決めて、AIに的確な指示を出せる
- 開発サーバーを立ち上げて、結果を自分の目で確認できる
- エラーが出たときに、AIに状況を伝えて修正してもらえる
この3つが確認できたら、このレッスンは完了です。スクリーンショットを撮って保存しておきましょう。
次のステップとして、こんなことに挑戦できます：
- 「タイトルだけでなく本文も表示して」とAIに追加指示を出す
- 「投稿をカード形式で見やすくデザインして」とレイアウトを変える
- Supabase のデータベースから自分のデータを読み込む（次のレッスンで扱います）
種類: markdown_doc
検証: basic_manual_check_v1
証跡証跡成果物が正しく作れたことを確認するためのチェックリストです(例: ブラウザで動作する、フォーム送信で値が保存される)。
メディア