コピペで使えるプロンプトテンプレート集

AIコーディングですぐに使えるプロンプトをまとめました。コピペして使ってください。

新規作成系

ToDoアプリ

ToDoアプリを作ってください。

要件:
- タスクの追加（入力欄 + 追加ボタン）
- タスクの完了/未完了の切り替え
- タスクの削除
- ローカルストレージで永続化

技術:
- React + TypeScript
- Tailwind CSS

ランディングページ

[サービス名]のランディングページを作ってください。

含めるセクション:
1. ヒーロー（キャッチコピー + CTA）
2. 特徴（3つのカード）
3. 料金プラン（3プラン）
4. よくある質問（FAQ）
5. フッター

デザイン:
- モダンでミニマル
- 配色: [メインカラー]
- レスポンシブ対応

ダッシュボード

管理ダッシュボードのUIを作ってください。

レイアウト:
- 左: サイドバー（ナビゲーション）
- 上: ヘッダー（検索、ユーザーアイコン）
- メイン: 統計カード4つ + グラフ

統計カード:
- 売上
- ユーザー数
- コンバージョン率
- アクティブユーザー

技術: React + Tailwind + Recharts

機能追加系

認証機能

認証機能を追加してください。

要件:
- メール/パスワードでのサインアップ
- ログイン/ログアウト
- パスワードリセット
- 認証状態の管理

技術: Supabase Auth
ルーティング: 未認証ユーザーはログインページへリダイレクト

ダークモード

ダークモードを追加してください。

要件:
- トグルボタンをヘッダー右上に配置
- システム設定をデフォルト値として使用
- ユーザーの選択をローカルストレージに保存
- 全ページに適用

実装: next-themesを使用

検索機能

検索機能を追加してください。

要件:
- リアルタイム検索（入力中に結果更新）
- デバウンス（300ms）
- 検索対象: タイトル、説明文
- 結果がない場合のメッセージ表示
- ローディング状態の表示

無限スクロール

一覧ページに無限スクロールを実装してください。

要件:
- 初回20件読み込み
- スクロール最下部で追加読み込み
- ローディングインジケーター
- 全件読み込み完了時のメッセージ

技術: Intersection Observer API

バグ修正系

エラー修正

以下のエラーを修正してください:

エラーメッセージ:
[ここにエラーメッセージを貼り付け]

発生箇所: [ファイル名:行番号]

再現手順:
1. [ステップ1]
2. [ステップ2]
3. [ステップ3]

期待する動作: [正しい動作]
実際の動作: [現在の動作]

パフォーマンス改善

このコンポーネントのパフォーマンスを改善してください。

問題:
- 親コンポーネントが更新されるたびに再レンダリングされる
- 一覧表示が遅い

改善ポイント:
- React.memo, useMemoの活用
- 仮想スクロールの検討
- 不要な再レンダリングの防止

リファクタリング系

TypeScript化

このコンポーネントをTypeScriptに変換してください。

要件:
- すべてのpropsに型を定義
- 関数の戻り値に型を定義
- any型は使わない
- 適切なインターフェースを作成

コンポーネント分割

このファイルをリファクタリングしてください。

現状: 500行以上の1ファイル

要件:
- ロジックとUIを分離
- 再利用可能なコンポーネントに分割
- カスタムフックを抽出
- 適切なファイル構造に整理

テスト系

ユニットテスト

以下の関数のユニットテストを書いてください。

対象: [関数名]

テストケース:
1. 正常系: [期待する入出力]
2. 異常系: [エラーケース]
3. 境界値: [境界値テスト]

技術: Jest + Testing Library

E2Eテスト

ログインフローのE2Eテストを書いてください。

シナリオ:
1. ログインページにアクセス
2. メールアドレスを入力
3. パスワードを入力
4. ログインボタンをクリック
5. ダッシュボードにリダイレクトされることを確認

技術: Playwright

データベース系

テーブル設計

以下の要件でSupabaseのテーブルを設計してください。

アプリ: タスク管理
機能: ユーザー、プロジェクト、タスク

要件:
- ユーザーは複数のプロジェクトを持てる
- プロジェクトは複数のタスクを持てる
- タスクには担当者を設定できる
- 作成日、更新日を自動記録

出力: SQLのCREATE TABLE文

API系

REST APIエンドポイント

以下のREST APIエンドポイントを作成してください。

リソース: /api/tasks

エンドポイント:
- GET /api/tasks - 一覧取得
- GET /api/tasks/:id - 詳細取得
- POST /api/tasks - 作成
- PUT /api/tasks/:id - 更新
- DELETE /api/tasks/:id - 削除

技術: Next.js API Routes
バリデーション: Zod

使い方のコツ

1. [ここに入力] の部分を自分の要件に置き換え
2. 不要な項目は削除
3. 追加要件があれば追記
4. 技術スタックは自分の環境に合わせて変更

次のステップ

• プロンプトの基本
• 30分で最初のアプリを作る