エッジケース
アプリが通常は動くが、異常な入力、空の状態、大量のデータで壊れる場合。
エッジケースとは？
エッジケースは、アプリが通常の使用では問題なく動くが、異常な状況で壊れる場合です：
- まだデータがない新しいユーザー（空の状態）
- レイアウトを崩す非常に長いテキスト
- 特殊文字（引用符、スラッシュ、絵文字）
- リスト内の数百〜数千のアイテム
- 境界の日付（月末、うるう年）
- ゼロまたは負の数
- フォームを素早く2回送信（二重送信）
よくあるエッジケース
| シナリオ | 何が起こるか | 修正方法 |
|---|---|---|
| 空の状態（データなし） | ページがクラッシュまたは何も表示しない | 「まだデータがありません」メッセージを追加 |
| 非常に長いテキスト | レイアウトが崩れ、テキストがはみ出す | テキストの切り捨てや文字数制限を追加 |
| 特殊文字 | データが壊れるかクエリが失敗 | 入力のサニタイズ、パラメータ化クエリの使用 |
| 大量のデータセット | ページの読み込みが遅い、またはクラッシュ | ページネーションまたは仮想スクロールを追加 |
| ゼロの値 | ゼロ除算や表示の間違い | 計算前にゼロチェックを追加 |
| 二重送信 | 重複エントリが作成される | 最初のクリック後にボタンを無効化 |
「もしも」のマインドセット
機能を構築するとき、自分に問いかけてください：
- このリストが空だったら？
- このテキストが非常に長かったら？
- この数字がゼロだったら？
- ユーザーがボタンを2回クリックしたら？
- ユーザーがデータのない全くの新規ユーザーだったら？
空の状態の処理
最もよくあるエッジケースです。新しいユーザーがアプリを開くと、親切なメッセージではなくクラッシュが表示されます。
Claudeに空の状態を処理してもらう
Claudeプロンプトmy-app-name: 新しいユーザーがログインしてデータがまだない場合、ダッシュボードがクラッシュします。
クラッシュの代わりに「まだデータがありません。最初のエントリを作成して始めましょう！」のような親切なメッセージを表示するように、ダッシュボードに適切な空の状態処理を追加してください。
事前のエッジケース処理
バグを待つのではなく、Claudeに事前にエッジケースを処理してもらいましょう：
事前にエッジケースを処理
Claudeプロンプトmy-app-name: [ページ名]ページのフォーム送信を確認し、以下のエッジケースの処理を追加してください：
1. 空のフォームフィールド（バリデーションエラーを表示）
2. 非常に長いテキスト入力（文字数制限を追加）
3. 送信ボタンのダブルクリック（重複送信を防止）
4. テキストフィールドの特殊文字（正しく保存されることを確認）
エッジケースのテスト
Claudeにエッジケースを修正してもらった後、PRを開いてコメントに投稿されるプレビューURLで自分で試してください。試すこと:
- 空のフォームを送信
- 非常に長いテキストを入力（100文字以上）
- 特殊文字を使用:
' " < > & / - データがないページを読み込む
- 送信ボタンを素早く連続クリック
クイズ
Quiz
新しいユーザーがアプリを開くと、ダッシュボードの代わりにクラッシュが表示されます。これはどの種類のバグですか？