2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@ennagara128

AIに開発を頼む「最初のメッセージ」に入れる3つの前提 — before/afterのプロンプトとコピペテンプレ

2
Posted at

未経験の方がAI（Claude Codeなど）に開発を頼むとき、いきなり本題だけを投げていませんか？

ログイン機能を作って

これでも動くものは返ってきます。ただ、返ってくるコードが自分のプロジェクトと噛み合わなかったり、説明が専門用語だらけで読めなかったり、一気に大量のファイルが出てきて手が止まったり——ということが起きがちです。

原因は「AIが、あなたの状況を知らないまま最善を尽くしている」こと。AIはあなたが未経験なのか、どの技術を使っているのか、どんな粒度で答えを受け取りたいのかを知りません。だから毎回、平均的な回答を返してきます。

これを解決するのが、タスクを始める最初のメッセージに「3つの前提」を1回だけ貼るというやり方です。本題の前に土台を敷いておくと、そのあとの返答がまとめて変わります。

この記事では、その3つの前提を「①前提なしの雑なプロンプト → ②前提ありのプロンプト → ③AIの返しがどう変わるか → ④なぜ効くか」の順で並べ、最後にそのままコピペできる前提テンプレの全文を置きます。サンプルは Next.js（App Router）＋TypeScript を前提にしています。

そもそも「1回の依頼に足す補足」とは別の話です

先に、混同しやすい点を整理しておきます。

  • 毎回のお願いに足す補足：「買い物メモの例で」「削除ボタンは付けないで」「保存できたら完成」のように、その1つのリクエストの中身を具体化するもの。リクエストごとに変わります。
  • 最初に1回置く前提（この記事）：「使う技術」「出力の形式」「教え方」のように、その作業全体で共通する土台を設定するもの。一度貼れば、以降の会話ずっと効きます。

前者は「注文の内容を詳しくする」、後者は「お店に自分の事情を最初に伝えておく」イメージです。両方やると噛み合いますが、今日はあくまで後者——セッションの最初に1回貼る土台の話です。

前提①：使う技術と自分の状況を1行で伝える

① 前提なしの雑なプロンプト

入力フォームを作って

② 前提ありのプロンプト

Next.js（App Router）とTypeScriptを使っています。プログラミングは未経験です。
この前提で、名前とメールアドレスを入力するフォームを作ってください。

③ AIの返しがどう変わるか

前提なしだと、AIは「どのフレームワーク？」を勝手に決めます。素のHTMLで返ってきたり、Pages Router向けの書き方（pages/ディレクトリや古いAPI）で返ってきたりして、App Routerの自分のプロジェクトに貼っても動かない、ということが起きます。

前提ありだと、App Router の作法（app/ディレクトリ、"use client"が必要な場面、Server ComponentとClient Componentの区別）に沿ったコードが返ってきます。さらに「未経験です」の一言で、変数名がわかりやすくなり、コメントが増え、専門用語の使い方が丁寧になります。

④ なぜ効くか

AIは「説明のレベル」と「コードの書き方」を、相手に合わせて調整できます。ただし相手が誰かを教えないと調整のしようがありません。技術スタックを教えると書き方が固定され、習熟度を教えると説明の深さが固定されます。この2つは、あなたのプロジェクトのほぼ全リクエストで共通なので、最初に1回言っておくのが一番コスパが良いのです。

前提②：出力の「形」を指定する

① 前提なしの雑なプロンプト

ToDoリストの機能を作って

② 前提ありのプロンプト

コードは1つのファイルにまとめて、省略せず全文で出してください。
いきなり全部ではなく、まず動く最小限から始めて、1ステップずつ進めてください。

③ AIの返しがどう変わるか

前提なしだと、AIは複数ファイルに分けたコードを、しかも「（略）」「// 既存のコードはそのまま」といった省略付きで返しがちです。未経験のうちは、この「省略された部分を自分で補う」のが一番つまずきます。どこに何を足すのかが分からず、コピペしても動かない。

「1ファイルに全文で」と指定すると、そのまま貼れば動くコードが返ってきます。「1ステップずつ」と指定すると、最初はフォームだけ、次に一覧表示、次に削除……と段階的に返ってくるので、各ステップで動作確認しながら進められます。

④ なぜ効くか

AIは黙っていると「網羅的で洗練された答え」を出そうとします。経験者にはありがたいですが、未経験者にとっては情報量が多すぎて迷子になる原因です。出力の粒度（全文か省略か・一括か分割か）を指定すると、自分が処理できるサイズに切り分けられます。これも作業全体で共通する好みなので、最初に1回宣言しておくと毎回効きます。

前提③：どう教えてほしいかを伝える

① 前提なしの雑なプロンプト

useEffectを使ってデータを取得して

② 前提ありのプロンプト

専門用語が出てきたら、その都度かんたんに説明を添えてください。
コードを直すときは「なぜそう直すのか」も一言で説明してください。

③ AIの返しがどう変わるか

前提なしだと、useEffectも依存配列も副作用も、説明なしでコードだけが返ってきます。動くけれど、なぜ動くのかが分からないまま次に進むことになり、少し違うことをしたいときに応用できません。

前提ありだと、「useEffectは画面が表示された後に処理を動かす仕組みです」のように、用語のそばに短い説明が入ります。修正時も「ここは再レンダリングのたびに実行されて無限ループになるので、依存配列を空[]にします」と理由が付きます。作業しながら学べる状態になります。

④ なぜ効くか

AIにとって「コードを出す」ことと「教える」ことは別のモードです。指定しなければ前者に寄ります。「用語を説明して」「理由を添えて」と伝えると、後者のモードが混ざり、コードが動く成果物であると同時に教材になります。未経験からの独学では、この一言があるかないかで、半年後の理解度がかなり変わります。

なぜ「毎回書く」ではなく「最初に1回」なのか

ここまで読んで、「その3つ、リクエストのたびに毎回書けばいいのでは？」と思った方もいるはずです。理屈上はその通りで、実際、毎回書いても効きます。ただ現実には続きません。人は面倒なことを省くので、3〜4回もやると前提を書かずに本題だけ投げるようになり、元の「雑なプロンプト」に戻ります。

AIとの会話は、最初のメッセージで設定した前提が、そのセッションの間ずっと文脈として残り続けます。だから最初に1回だけ土台を敷けば、2通目以降は本題だけ書いても、AIは技術・状況・出力の形・教え方を覚えたまま応答します。「毎回頑張る」ではなく「最初に1回で済ませる」設計にするから、続くのです。

言い換えると、この3つの前提は「その都度の指示（＝リクエストの中身）」ではなく「会話の初期設定（＝土台）」です。だからこそテンプレ化する価値があります。次のセクションで、その全文を渡します。

仕上げ：そのままコピペできる前提テンプレ全文

上の3つをまとめたものがこちらです。新しいタスクを始める最初のメッセージの先頭にこれを貼り、続けて本題（作りたいもの）を書く——それだけです。

【前提】
・使う技術：Next.js（App Router）とTypeScriptを使っています。
・私の状況：プログラミングは未経験です。
・出力の形：コードは1ファイルにまとめて省略せず全文で。いきなり全部ではなく、動く最小限から1ステップずつ進めてください。
・教え方：専門用語は都度かんたんに説明を添えて。コードを直すときは「なぜそう直すか」も一言お願いします。

上の前提でお願いします。まず作りたいのは——
（ここに本題。例：入力した「やること」を一覧に追加・削除できる簡単なToDoアプリ）

使い方はシンプルです。

  1. 新しく何かを作り始めるとき、この前提ブロックを最初のメッセージに貼る
  2. 最後の「まず作りたいのは——」の続きに、本題を普通の言葉で書く
  3. 2つ目以降のメッセージは本題だけでOK（前提は会話に残り続けます）

自分の環境に合わせて、1行目の技術（Reactだけ、Vue、など）や2行目の状況（「HTMLとCSSは少し分かります」など）を書き換えれば、そのまま使えます。前提を最初に敷くだけで、AIから返ってくるものの手触りが変わるのを実感できるはずです。

Qiita読者の方には当たり前の内容だったかもしれません。この記事は「これからプログラミングを始める未経験の知人にAIの頼み方を教えたい」ときの説明素材として書いています。もし身近に独学を始めた方がいれば、共有・社内研修の題材などにお使いください。

未経験から Next.js + Supabase + Claude Code で Webアプリを公開するまで を、全20セッションで体系化した教材を運営しています。Claude Code を学習パートナーにする CLAUDE.md / Skills 設計まで含みます。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?