> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Replit AIで効果的なプロンプトを作成する

> Replit Agentを使う際の効果的なプロンプトの原則を学び、例を確認する。

export const YouTubeEmbed = ({videoId, title = "YouTube video", startAt}) => {
  if (!videoId) {
    return null;
  }
  let url = "https://www.youtube.com/embed/" + videoId;
  if (startAt) {
    url = url + "?start=" + startAt;
  }
  return <Frame>
      <iframe src={url} title={title} allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowFullScreen></iframe>
    </Frame>;
};

効果的なプロンプトとは、有能なアシスタントに明確な指示を与えることです。[**Agent**](/references/agent/overview)を上手く導けば、アイデアからアプリへと素早く進めます。

<YouTubeEmbed videoId="7m5SjKZBw6I" title="より良いバイブコーディングのための10のヒント" />

## クイック例

漠然としたプロンプトと効果的なプロンプトの違いを見てみましょう：

<AccordionGroup>
  <Accordion title="コードを修正する" icon="bug">
    **漠然と：** 「コードを修正して。」

    **効果的：** 「ユーザー入力を処理する際にスクリプトが失敗します。エラーはバリデーション関数にあると思われます。`validate_input` 部分のデバッグを手伝ってもらえますか？エラーメッセージはこちらです：\[詳細]」

    効果的なプロンプトは問題の箇所、疑わしい関数を特定し、コンテキストを提供しています。
  </Accordion>

  <Accordion title="機能を構築する" icon="hammer">
    **漠然と：** 「ウェブサイトを作って。」

    **効果的：** 「ホーム、自己紹介、お問い合わせフォームのセクションがあるシンプルなポートフォリオサイトを作成してください。クリーンでモダンなデザインテーマとプレースホルダーコンテンツを使用してください。」

    効果的なプロンプトは目的、中心機能、望ましい美観を定義しています。
  </Accordion>

  <Accordion title="パフォーマンスの改善" icon="gauge-high">
    **漠然と：** 「遅くしないで。」

    **効果的：** 「データ処理関数をリファクタリングして、より大きな入力をより効率的に処理できるようにしてください。別のアルゴリズムやデータ構造を使えますか？」

    否定的な制約ではなく、*どのように*改善するかをAgentに伝えましょう。
  </Accordion>

  <Accordion title="UIの変更" icon="paintbrush">
    **漠然と：** 「アニメーションを追加して。」

    **効果的：** 「ランディングページのメイン画像が最初に読み込まれる際に、歓迎ムードを作り出すよう柔らかくフェードインするようアニメートしてください。」

    特定の要素、望ましい効果、タイミング、意図した体験を明確にしてください。
  </Accordion>

  <Accordion title="複雑なシステム" icon="server">
    **漠然と：** 「バックエンドを構築して。」

    **効果的：** 「サーバーサイドのロジックをセットアップしてください。ユーザー認証（サインアップ/ログイン）を実装し、ユーザープロファイルデータを安全に取得するAPIエンドポイントを作成してください。」

    大きなタスクを特定の機能に分割しましょう。
  </Accordion>
</AccordionGroup>

## 基本原則

<Frame>
  <img src="https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/10-tips.png?fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=21e1e7269802faa767fef0187bdb6e3d" alt="Replit Agentで効果的なプロンプトを作成するための10のヒント" width="1259" height="1101" data-path="images/tutorials/10-tips.png" />
</Frame>

### まず計画する

<Tip>プロンプトを作成する前に、アプリの機能とユーザーフローを概説しましょう。明確な計画がより集中したプロンプトに繋がります。</Tip>

プロダクトマネージャーのようにアプリケーションの構造を考えましょう。全体的な目標を論理的な段階に分解します。

**代わりに：** 「タスク管理アプリを構築して。」

**試してみて：** 「1. 入力フィールドとタスクリストを含む基本的なHTML構造を作成する。2. タスクを追加するJavaScriptを追加する。3. データベースを使用してタスクを保存する。4. タスクを完了としてマークする機能を追加する。」

その後、各ステップについてAgentにプロンプトします。

### 段階的に構築する

各成功ステップの後に[**チェックポイント**](/references/agent/overview#checkpoints)を使用して進捗を保存します。何かが壊れた場合、動作している状態にロールバックして別のアプローチを試すことができます。

**代わりに：** 「完全なeコマースプラットフォームを構築して。」

**試してみて：** 「Replit Authでユーザーサインアップとログインができるeコマースサイトの基本的なフルスタックプロジェクトをセットアップしてください。」次に、商品リスト、カート、チェックアウトのプロンプトを続けます。

### 具体的に

必要なものを正確に定義する：出力形式、制約、エッジケース。

**代わりに：** 「お問い合わせフォームを追加して。」

**試してみて：** 「`/contact` に以下のフィールドを持つお問い合わせフォームページを作成してください：

* 名前（必須）
* メール（必須、有効な形式であること）
* メッセージ（必須、最小10文字）

送信時に、フォームデータを `contact@mydomain.com` に送信してください。」

### ポジティブな言語を使う

避けたいことではなく、*欲しいこと*を述べましょう。

**代わりに：** 「ユーザープロファイルページを分かりにくくしないで。」

**試してみて：** 「クリーンなユーザープロファイルページを設計してください。ユーザー名を目立つように表示し、その後にメールと登録日を表示します。「プロフィールを編集」ボタンを含めてください。」

### シンプルに保つ

明確で直接的な言語を使いましょう。複雑なリクエストは箇条書きに分解します。

**代わりに：** 「ユーザー生成コンテンツアーティファクトの動的生成と取得を促進するために必要なサーバーサイドインフラを実装する。」

**試してみて：** 「ユーザーがブログ投稿を送信するためのバックエンド機能を作成してください。ユーザーはタイトルと本文コンテンツを入力します。投稿をデータベースに保存してください。」

## コンテキストを活用する

### 関連ファイルを提供する

プロジェクト全体を添付するのではなく、特定のファイルに言及しましょう。

**代わりに：** （すべてを添付して）「デザインシステムに基づいてユーザープロファイルページを実装して。」

**試してみて：** 「ユーザープロファイルページを作成してください。サーバーエンドポイントからユーザーデータを取得します。\[デザインドキュメントのURL]に従ってスタイルを設定し、このモックアップに合わせてください：\[`profile_mockup.jpg` を添付]。」

<Tip>無関係なタスクに切り替える際は新しいチャットを開始しましょう。蓄積されたコンテキストによる混乱を防げます。</Tip>

### 例を示す

具体的な例（コードスニペット、サンプルデータ、スクリーンショット）を提供して曖昧さを減らしましょう。

**代わりに：** 「商品カードをより見栄えよくして。」

**試してみて：** 「ショップページの商品カードを再設計してください。各カードは商品画像、名前、価格、「カートに追加」ボタンを表示し、このレイアウトに似たものにしてください：\[スクリーンショットを添付]。薄いグレーのボーダーを使用してください。」

## 効果的にデバッグする

エラーが発生した場合、以下を提供してください：

* **正確な**エラーメッセージ
* 関連するコードスニペット
* エラーが発生するファイル名
* 何を達成しようとしていたか
* すでに試したステップ

**代わりに：** 「ログインページが壊れています。」

**試してみて：** 「`/login` で正しい認証情報でログインすると、ブラウザコンソールに「ユーザーが見つかりません」エラーが表示されます。データベースチェックが機能していないようです。`auth.js` のログイン処理コードはこちらです。」

## ガイダンスを求める

<Tip>構築前にPlanモードに切り替えてオプションを検討しましょう。ライブラリ、アプローチ、トレードオフについてAgentに聞いてください。</Tip>

**代わりに：** 「支払いを追加して。」

**試してみて：** 「Replit上に構築されたWebアプリでクレジットカード支払いを受け付けるためのいくつかの良いオプションは何ですか？比較的シンプルに統合できるものが必要です。」

## プロンプトを繰り返し改善する

最初のプロンプトが完璧でないことは普通です。結果が正しくない場合：

* 詳細を追加する
* 例を提供する
* 指示を簡略化する
* 別の説明方法を試す

**最初：** 「ウェブサイトのヘッダーを作成して。」

**改善後：** 「サイトロゴが左にあり、ナビゲーションリンク（ホーム、会社概要、お問い合わせ）が右にある固定ヘッダーコンポーネントを作成してください。」

## まとめ

効果的なプロンプトの要点：

* プロンプトの前に**計画**する
* チェックポイントで段階的に**構築**する
* 要件について**具体的**に
* 例と関連ファイルを通じて**コンテキストを提供**する
* 結果が少し違う場合は**繰り返し改善**する

これらの原則をマスターすれば、Agentでアプリをより速く構築できます。