ベストプラクティス

​

プロンプトのベストプラクティス

​

1. より良い出力を得るためのプロンプトエンジニアリングの習得:

• 明確さと冗長性: 明確で冗長なプロンプトは、より優れた出力につながります。具体的であること、正確なページ（例：/dashboard）や期待される動作に言及することが重要です。次のような自然言語でリクエストを使用してください。

Investorのロールを持つユーザーにはこのコンポーネントにアクセスさせたいですが、Adminにはアクセスさせたくありません。

• 視覚的な補助: 特にバグやUXの問題を説明する際には、スクリーンショットを追加してください。これにより、言葉だけでは伝わりにくい視覚的なコンテキストを提供できます。
• ガードレールと制限: AIに触れてはいけないものを伝えます。例えば、次のように指示することができます。

/shared/Layout.tsxは編集しないでください。

• 記憶のための反復: AIの記憶力には限界があるため、必要であればプロンプトをまたいで重要な指示を繰り返してください。
• 複雑なタスクの分割: 複数のことを同時に実装しようとしないでください。作業をより小さく、テスト可能なチャンクに分割してください。各ステップの間でディスカッションモードを使用して、次に進む前に検証します。機能分割に役立つテンプレートには、次のようなものがあります。

新しいページの作成、UIレイアウトの追加、データの接続、ロジックとエッジケースの追加、ロールごとのテスト。

• ロール固有の指示: アプリケーションが複数のユーザーロールをサポートしている場合は、プロンプトがどのロールに適用されるかを常に定義してください。これにより、共有ロジックやコンポーネントから生じるバグを防ぐことができます。例えば：

Investorとして、会社のダッシュボードを閲覧したいですが、編集はできないようにしたいです。この機能をInvestorロールのみに限定してください。

​

2. ディスカッションモードを頻繁に活用する

• いつ使うか: 「修正を試みる」が2〜3回失敗した後、複雑なロジックやデータベースの問題をデバッグするとき、または新機能を計画するときにディスカッションモードに切り替えます。次のようにプロンプトを出すことができます。

「Xを実装する3つの方法を提案してください」。

• ワークフローの推奨: 一部のユーザーは、時間の60〜70%をディスカッションモードで過ごし、完全に満足した場合にのみ「計画を実行」をクリックすることが効果的だと感じています。このアプローチは、出力の一貫性を高め、意図しない編集を防ぎます。
• 制御されたインタラクション: 意図しないコードの実行を避けるために、「調査してください、ただしコードはまだ書かないでください」や「何も変更せずにこれを解決する3つの方法を提案してください」のようなプロンプトを使用します。これにより、主導権を自分の手に保つことができます。
• AIループからの脱出: AIが壊れたコードを修正する「ループ」に入った場合は、ディスカッションモードに切り替え、エラーのスクリーンショットを貼り付けて、次のようにプロンプトを出します。

「他の機能を壊さずにこれを調査してください。必要であれば、最後に動作していたバージョンに戻して、そこから修正してください」。

​

3. 最終手段としてのリミックス

• リミックスの機能: リミックスは、T=0時点のプロジェクトのクリーンなコピーを作成します。その後、改善されたプロンプトとより明確な知識で再構築でき、古いプロジェクトは純粋に参照として使用します。
• リミックスするタイミング: バグの多いループにはまってしまった場合、履歴を保持しつつクリーンに再起動したい場合、またはSupabaseのようなデータベースサービスを切断して新しいアプローチを試したい場合に便利です。

​

4. 忍耐と冷静さを養う

• 黄金律: プロンプトに時間をかけ、すべてを再確認し、作業を小さくテスト可能なブロックに分割してください。入力の正確さは、出力の品質に直接相関します。

​

5. ワークフローを強化するためのボーナスのヒント

• 「イライラしています…」パターン: 「イライラしています…」というプロンプトパターンを使用して、AIがより集中できるようにします。
• 編集後のチェック: 大きな編集を行った後は、常に複数のロールとその動作を再確認してください。特に条件付きロジックについては注意が必要です。
• フォールバックバージョン: 安定したバージョンをフォールバックとして保存し、迅速なデバッグに備えます。
• ロール固有のコンポーネント: 過度に汎用的なロジックによるバグを避けるために、AIに次のようにプロンプトを出します。

「[ロールX]専用のコンポーネントを作成し、明確にスコープが設定されていない限り、共有コンポーネントを再利用しないでください」。

​

プロンプトライブラリ – 戦略と例

1. プロジェクトの開始

• いつ使うか: プロジェクトのまさに最初に、AIがハイレベルな要件を理解し、基盤を構築するのを助けるために使用します。これは、最初のプロジェクト概要として機能します。
• 使い方: アプリケーションの種類、主要な技術（フロントエンド、バックエンド、サービス）、および主要な機能を概説します。AIにどこから始めるかを指示します。通常はメインページか重要な機能です。

「タスク管理アプリケーションが必要です。内容は次の通りです： - 技術スタック：フロントエンドはNext.js、スタイリングはTailwind CSS、認証とデータベースはSupabase。 - コア機能：プロジェクトとタスクの作成、ユーザーへのタスク割り当て、期日リマインダー、ダッシュボードの概要。 まず、メインのダッシュボードページを構築することから始めてください。内容は次の通りです： - ナビゲーション付きのヘッダー、 - ステータス付きのプロジェクトリスト、 - 新しいプロジェクトを作成するボタン。 今はダミーデータを提供し、デザインがクリーンでレスポンシブであることを確認してください」。

2. UI/UXデザインの強化

• いつ使うか: アプリケーションの機能を変更せずに、視覚的な魅力を洗練させるために使用します。これには、UIの磨き上げ、レイアウトの調整、特定のデザインスタイルの実装などが含まれます。
• 使い方: デザイン変更の範囲を明確に定義し、機能は変更しないことを強調します。望ましい美的感覚（例：モダン、ミニマリスト）についてAIをガイドします。複数の変更は一度に一つずつ対処し、ロジックを変更すべきでないUI部分があれば言及します。

「アプリのUIを、機能を一切変更せずに改善してください。 - 既存のロジックと状態管理はすべてそのままにしてください。 - 視覚的な強化：ダッシュボードページのスタイリングを更新します。各プロジェクトリストにモダンなカードデザインを使用し、コントラストを向上させるためにカラースキームを改善し、よりクリーンなレイアウトのためにパディングを増やします。 - これらの変更が機能やデータフローを壊さないことを確認してください。 目標：アプリが以前とまったく同じように動作する、より洗練された外観のための純粋な外観上の改善。」

3. レスポンシブ対応の確保

• いつ使うか: アプリがさまざまな画面サイズ（モバイル、タブレット、デスクトップ）に合わせてレイアウトを適応させる必要がある場合。UI中心のタスクの最終チェックとして理想的です。
• 使い方: モバイルファーストのアプローチを強調し、標準的なブレークポイント全体でレスポンシブであることを確認するようにAIに指示します。特定のCSSフレームワークのガイドライン（例：Tailwindのsm, md, lg, xlブレークポイント）に言及し、固定幅を避けるように要求します。

「私たちのアプリは、モバイル、タブレット、デスクトップで完全にレスポンシブである必要があります。 - モバイルファースト戦略に従ってください：小さな画面のレイアウトを優先し、次に大きな画面に合わせて調整します。 - レスポンシブデザインには、モダンなUI/UXのベストプラクティスを使用してください。（Tailwind CSSの場合、標準のブレークポイントsm、md、lg、xlを使用してください。必要でない限り、カスタムブレークポイントは使用しないでください。） - すべてのページ（特にダッシュボードとプロジェクト詳細ページ）が小さな画面で適切にリフローすることを確認してください：要素は必要に応じてスタックまたはリサイズされ、テキストは読みやすく、コンテンツが画面外にはみ出さないようにしてください。 - コアデザインや機能は変更せず、異なる画面サイズに柔軟に適応することだけを確認してください。変更後、iPhone 12の寸法と一般的なデスクトップ幅でレイアウトを再確認してください。」

4. コードのリファクタリング

• いつ使うか: 定期的に、特にコードが乱雑になったり遅くなったりした場合。リファクタリングは、外部の動作を変更することなく、コードの構造、可読性、またはパフォーマンスを改善します。
• 使い方: スコープ（ファイル、機能、またはコードベース）を特定します。特定のファイルについては、「このファイルを明確さと効率性のためにリファクタリングしてください。ただし、その機能や出力を変更しないでください」とプロンプトを出します。重複の削減やロジックの簡素化などの重点分野を指定します。より大きなリファクタリングの場合は、AIに段階的な計画を立てるか、まずコードを監査するように依頼します。

「ProjectListコンポーネントファイルをリファクタリングしてください。ただし、その動作とUIはまったく同じに保ってください。 目標： - コード構造と可読性を向上させる（複雑な関数を簡素化し、必要に応じて小さな関数に分割する）。 - 未使用の変数やインポートを削除する。 - ファイルがベストプラクティスに従い、十分に文書化されていることを確認する。 新しい機能を追加したり、ユーザーにとってのコンポーネントの動作方法を変更したりしないでください。これは純粋に保守性のためのコードクリーンアップです。コードのいずれかの部分が不明確な場合は、明確化のために簡単なコメントを追加してください。」

5. アプリの種類と機能

Eコマースストア：商品リスト、検索、フィルタリング、カート、チェックアウト、ユーザーアカウント。

CMS：管理ダッシュボード、コンテンツ作成/編集/公開、リッチテキスト、画像アップロード、SEO。

プロジェクト管理：タスクボード、リスト、カード、割り当て、期日、ドラッグアンドドロップ。

ソーシャルメディアフィード：投稿、コメント、いいね、共有、ユーザープロフィール、通知、無限スクロール。

分析ダッシュボード：さまざまなチャートタイプ、データフィルタリング、日付範囲選択、エクスポート可能なレポート。

SaaSアプリケーションスターター：ユーザー認証、サブスクリプション管理、設定、ダッシュボード、ロールベースのアクセス。

AIチャットインターフェース：会話履歴、タイピングインジケーター、メッセージスレッド、フィードバック。

AIコンテンツ生成ツール：入力に基づくコンテンツ生成、洗練オプション、保存、エクスポート。

推薦コンポーネント：ユーザーの行動/好みに基づく、フィードバック、推薦の説明。

パーソナライゼーションシステム：カスタマイズ可能なUI、コンテンツ推薦、パーソナライゼーションに対するユーザーコントロール。

6. AIによる戦略的計画

• いつ使うか: 複雑で多段階の実装を開始する前、または分割する必要のある大きな機能がある場合。計画プロンプトを使用すると、コードが書かれる前にアプローチの概要を説明でき、ポイントを節約し、誤った方向への進行を防ぐことができます。
• 使い方: AIに計画やチェックリストを求めます。例えば、「Xの段階的な計画の概要を説明してください」や「コーディングの前に、Yを実装するために取る手順をリストアップしてください」などです。これは、コードの実行を避けるためにディスカッションモードで行うのが最適です。

「コードを書く前に、新しい通知機能の実装を計画してください。 - タスクが期限切れになったときにメール通知を追加するために必要な各ステップをリストアップしてください。 - フロントエンド（UIの変更があれば）とバックエンド（スケジュールされたチェックやトリガーの作成）の両方の側面を考慮してください。 - 計画が現在の機能を安定に保つことを確認してください – 既存のものを壊すことはできません。 - 計画を順序付きリスト（1、2、3、...）で提供し、各ステップの簡単な説明を付けてください。 計画の概要を説明したら、レビューのために一時停止してください。まだコードの変更は行わないでください。」 AIは次のような計画で応答するかもしれません： 1. タスクにタイムスタンプフィールドを追加する。 2. 期限切れのタスクをチェックするサーバーサイド関数を作成する。 3. メール送信を統合する。 4. 通知トグルのためにUIを更新する。 5. フローをテストする。