ローディング画面とエラー画面を作る

Webサイトを開いたとき、データを読み込んでいる間に画面が真っ白になったり、何か問題が起きたときに「ページが開けません」とだけ表示されて困った経験はありませんか。このレッスンでは、あなたが作ったサイトに「読み込み中です」と伝える画面（ローディング画面）と、「ちょっと問題が起きました」と伝える画面（エラー画面）を、AIツールに頼んで15分以内で追加します。

たとえるなら、レストランで料理を待つ間に「ただいま調理中です」と書いた紙を置いてくれるか、停電で営業できないときに「本日休業」の札を出してくれるか、という気配りの話です。この気配りがあるサイトと無いサイトでは、訪れた人の安心感がまったく違います。

• データ読み込み中に表示される「ローディング画面」
• 何か問題が起きたときに表示される「エラー画面」
• ブラウザで実際に動作を確認したスクリーンショット2枚

• Next.js（＝Webサイトを作るための道具）のプロジェクトがすでに手元で動いている
• ページの切り替え（ルーティング）の基本を一度触ったことがある
• Claude Code、Cursor、ChatGPT のどれか1つが使える状態になっている

1. 画面を置く場所を決める

Next.js では、app というフォルダの中に、特別な名前のファイルを置くだけで自動的に機能する仕組みがあります。loading.tsx という名前のファイルを作るとローディング画面、error.tsx という名前のファイルを作るとエラー画面になります。まるで「この名前の紙をここに貼れば自動で機能する」という魔法のルールです。

まずは対象にしたいページのフォルダ（たとえば app/dashboard など）を決めます。そのフォルダの直下に、2つのファイルを追加します。

2. AIにローディング画面を作ってもらう

お使いのAIツール（Claude Code / Cursor / ChatGPT など）に、次のプロンプト（＝AIへの指示文）をそのまま貼り付けてください。

Next.js (App Router) のプロジェクトです。
app/dashboard/loading.tsx を新規作成してください。
中央にシンプルなスピナー（回転するアイコン）と「読み込み中です…」という日本語テキストを表示する、React Server Component として書いてください。
TailwindCSS は使える前提です。外部ライブラリは追加しないでください。

良い例と悪い例を比べてみます。

• 良い例: 「日本語テキストを表示する」「外部ライブラリは追加しない」と条件を具体的に書く
• 悪い例: 「いい感じのローディング画面を作って」とだけ頼む（人によって『いい感じ』が違うので、想定外のライブラリを入れられることがあります）

3. AIにエラー画面を作ってもらう

続けて、同じAIに次のプロンプトを渡します。エラー画面は「何が起きたかを伝える」ことと、「もう一度やり直せるボタン」を置くことが大切です。

同じプロジェクトで、app/dashboard/error.tsx を新規作成してください。
Next.js の仕様に従い、'use client' を先頭に付け、error と reset を props で受け取るコンポーネントにしてください。
画面には日本語で「読み込み中に問題が発生しました」と表示し、「もう一度試す」ボタンを置いて、押したら reset() を呼ぶようにしてください。
余計な外部ライブラリは使わず、TailwindCSS のみで整えてください。

4. ブラウザで動作を確認する

ターミナル（＝命令を文字で打ち込む黒い画面）を開き、次のコマンドでサイトを起動します。

pnpm dev

このコマンドは「あなたのパソコンの中だけで、作ったサイトを試しに動かしてください」とNext.jsに頼むものです。起動したら、ブラウザで http://localhost:3000/dashboard を開きます。

ローディング画面は一瞬で消えることが多いので、確認するには次のどちらかを使います。

• AIに「このページの Server Component で、2秒だけ待つ処理を一時的に入れてください」と頼む
• ブラウザの検証画面（F12キー）で「Network」タブを開き、通信速度を「Slow 3G」に一時的に変える

エラー画面の確認は、対象ページの中でわざと throw new Error('test') を書き足してリロードします。確認が終わったら、必ず元に戻してください。

• app/dashboard/loading.tsx と app/dashboard/error.tsx の2ファイルが存在する
• ローディング画面には「読み込み中です…」の日本語が出ている
• エラー画面には「もう一度試す」ボタンがあり、押すと画面が復活する
• 両方のスクリーンショットを保存できた

• エラー画面が真っ白のまま表示されない: error.tsx の先頭に 'use client' を書き忘れているケースが最も多いです。AIの出力をそのまま貼ったつもりでも抜けていることがあるので、1行目を必ず目視で確認します。
• ファイルを置く場所が違う: app/ フォルダの外（たとえば pages/ や src/components/）に置くと機能しません。必ず app フォルダの中、対象ページと同じ階層に置きます。
• ローディング画面が一瞬で消えて見えない: これは問題ではなく正常動作です。確認のために前述の「2秒待つ処理」をAIに頼むと安心です。終わったら忘れずに外します。
• AIが勝手に大きなライブラリを入れてしまう: プロンプトに「外部ライブラリは追加しないでください」と明記します。入っていたら「追加しない版に書き直してください」ともう一度依頼します。