ハコヅミを作る #40：エラーの画面を作ったら、「何も出ていなかった」ことに気づく
前回（#39）は、サーバーのログと、お知らせでした。今回は、ベータ版の前の洗い出しで挙がった、残りの2つです。
- エラーの画面を作る
- 小さな直しを、まとめて行う
今までのエラーの画面
ない URL を開くと、今までは、こう出ていました。
404
Not Found
SvelteKit の、素の表示です。ヘッダーもフッターもなく、どこへ戻ればよいかも分かりません。初めての人は、間違った URL や、古いリンクを踏みやすいものです。日本語で、次にどうすればよいかを伝える画面にします。
画面イメージ
案は2つでした。
左の2つが案A、右の2つが案B。それぞれ、404 と 500
- 案A：ほかの画面と同じ作り（見出しと、白いカード）
- 案B：カードを使わず、まん中に寄せて、番号を大きく薄く出す
Claude Code のおすすめは、案A でした。ほかの画面とそろっていて、番号が目立たない、という理由です。
選んだのは、案B です。エラーの画面は、ふだんの画面と違って見えたほうがよい、と考えました。一覧や編集の画面と同じ作りだと、「何かの画面が、空で出ている」ように見えます。おすすめと違うほうを選ぶこともあります。
404 は、どれも同じ文にする
エラーの画面に出す文は、応答の番号だけから決めます。
| 番号 | 見出し |
|---|---|
| 404 | ページが見つかりません |
| 429 | 操作が多すぎます |
| 500 など | うまくいきませんでした |
404 には、3つの場合があります。
- ない URL を開いた
- ない id のギアやキャンプを開いた
- 管理者でない人が、管理画面を開いた
3つとも、1文字も違わない画面にしました。#29で、管理画面は、管理者でない人には「あることを見せない」と決めています。エラーの画面の文が違えば、そこから見分けられてしまいます。
テストは、画面の文字を丸ごと比べています。ない URL を開いたときの文字と、管理画面を開いたときの文字が、同じであること。
回数の制限に当たると、何も出ていなかった
#35で、送信の回数に制限を付けました。超えると、「操作が多すぎます」と返します。
Issue には、こう書いていました。
どこまで画面にするかは、取りかかるときに、今の出方を確かめてから決める
確かめてもらうと、思っていなかったことが分かりました。画面のフォームから送って、制限に当たったとき、画面には、何も出ていなかったのです。
サーバーは、ちゃんと「操作が多すぎます」という文を返しています。ところが、画面の側は、決まった形（JSON）の応答を待っています。ただの文が返ってくると、読めずに、そのまま何もしません。使っている人から見ると、「保存を押したのに、反応がない」状態です。
#35のテストは、「断られること（番号が 429 であること）」を確かめていました。「断られたことが、使っている人に伝わること」は、確かめていませんでした。
断るときの応答を、相手に合わせて、3つに分けました。
| 相手 | 返すもの |
|---|---|
| 画面のフォームからの送信 | 画面が読める形で返す。エラーの画面が出る |
| ブラウザで、画面を開こうとした | かんたんなページ |
| プログラムからの送信 | 今までどおり、短い文 |
画面を描く前に断るときの、かんたんなページ
2つ目のページは、アプリの画面を描く前に返すものです。アプリの CSS が使えないので、色を直接書いています。色を変えたら、ここも直す必要があります。忘れないよう、CLAUDE.md に書きました。
テストには、「300 回送ったあとに、画面から保存を押すと、『操作が多すぎます』の画面が出る」を足しています。
小さな直しを、まとめて行う
#31で始めた、「気づいた点を1つの Issue にためる」やり方の、3回目です。今回は、2つありました。
幅 320px で、ギアの一覧がはみ出す
前から分かっていて、直していなかったものです。小さい iPhone の幅（320px）で、ギアの一覧が、横に 12px はみ出します。
Claude Code は、まず、15 の画面を幅 320px で開いて、はみ出す要素を調べました。はみ出していたのは、ギアの一覧の、「所有・欲しい・廃棄済」の3つのタブだけでした。
ところが、直す前の画面を撮ってみると、はみ出していません。数字では 12px はみ出しているのに、画像では収まっています。
原因は、フォントでした。
- Web フォント（#21の丸ゴシック）が効いているとき：収まる
- 効く前・読み込めなかったとき（端末のフォント）：文字の幅が少し広く、はみ出す
数字を測ったのは、フォントが効く前。画像を撮ったのは、効いたあとでした。
自動テストは、Web フォントを読み込まない設定にしています（外のサービスの調子に、左右されないため）。つまり、テストは、いつも「幅の広いほう」で動いています。はみ出しを見つけるには、厳しいほうの条件で、ちょうどよかったことになります。
幅 360px より狭い画面では、タブの文字と余白を、少し小さくしました。件数が3けた（300・100・100）になっても収まることを、テストで確かめています。
キャンプの画面の見出し
もう1つは、キャンプの画面の見出しです。スマホの幅では、期間が2行、プランの名前が1行で、3行になっていました。幅 320px では、プランの名前が、途中で折り返して、4行です。
左から、今（幅 375px）、別案（375px）、今（320px）、別案（320px）
別案にしました。スマホの幅では、文字を一回り小さくして、1行目に期間、2行目にプランの名前と、進み具合の札を置きます。広い幅は、今までどおりです。
最初に撮った別案は、進み具合の札が、期間の文字に少し重なっていました。これも、撮って、見て、気づいたものです。
おわりに
- エラーの画面は、ふだんの画面と違って見えてよい。おすすめと違うほうを選ぶこともある
- 「あるかないか」を見せたくないものは、エラーの文も同じにする
- 「断ること」と「断ったと伝わること」は、別。テストは、使っている人に見えるところまで確かめる
- 数字と見た目が食い違ったら、どちらかが間違っているのではなく、条件が違う
- 自動テストの条件（フォントを読み込まない）は、厳しいほうにしておくと、役に立つ
次回は、ベータ版の前に、もう1つ機能を足すことにした話です。