0. はじめに：コードよりも大切な「AIへの指示の出し方」
この記事では、**プログラミングを始めたばかりの人でも作れる「AIチャットアプリ」**を通じて、
生成AIを思い通りに動かすための“プロンプトエンジニアリング”の基本を学んでいきます。
🎯 ゴール：
「AIに何をどう指示すれば、思い通りの結果が得られるのか？」を理解し、
自分だけのテーマ特化型AIチャットボットを完成させること！
最近では、ChatGPTやClaude、Geminiなど、生成AIを使えばアプリ開発がとても手軽になりました。
しかし、結果の良し悪しは「コード」よりも「プロンプト（指示文）」次第です。
例えば同じAIでも、
何か質問に答えて
と指示するのと、
あなたは旅行プランナーです。東京から日帰りで楽しめるスポットを3つ、表形式で紹介してください。
では、出力の質がまったく違います。
この記事では、そんな「AIへの指示の出し方（＝プロンプト）」を中心に、
ほんの数行のコードで動くAIチャットアプリを作っていきましょう。
1. 準備：あなたのアイデアを形にする土台
今回使う技術スタックは以下のとおりです👇
（コードは最後にまとめて掲載するので、今は覚える必要はありません）
| 項目 | 内容 |
|---|---|
| フレームワーク | Next.js（App Router） |
| 言語 | TypeScript |
| UI | shadcn/ui + Tailwind CSS |
| AIライブラリ |
openai or ai SDK |
| 開発環境 | Node.js 18以上 |
🔑 まずはOpenAI APIキーを用意しよう
- OpenAI公式サイトでアカウントを作成
- 「API Keys」ページでキーを発行
-
.env.localに以下のように保存します👇
OPENAI_API_KEY=sk-xxxxxxx
これで準備完了です！
💡安心してください。この記事のコードはすべてコピペでOKです。
2. ステップ1：『ダメなプロンプト』で動かしてみよう
まずは、AIに何も考えずに指示してみるところから始めましょう。
たとえば、以下のようなプロンプト👇
質問に答えてください。
このプロンプトを使ってチャットアプリを動かすと、AIは一応答えてくれます。
でも、たいていは「ふわっとした返答」になり、具体性に欠ける結果になります。
💬 実行結果の例
ユーザー：おすすめの旅行先は？
AI：色々な旅行先があります。海が好きなら沖縄、山が好きなら長野などがおすすめです。
なんだか 「無難すぎる」
これは、AIが「どんな立場で」「どんな条件で」答えるかを理解していないからです。
3. ステップ2：『役割を与えるプロンプト』で賢くする
ここからが本題です。
AIに「役割」を与えると、出力の質が劇的に変わります。
🧩 プロンプトエンジニアリングの3つのコツ
| コツ | 説明 | 例 |
|---|---|---|
| 🎭 役割を与える | AIがどんな専門家かを指定 | 「あなたは旅行プランナーです」 |
| 🧱 制約を設ける | 条件や制限を加える | 「日帰りで行ける場所を3つ」 |
| 🧾 出力形式を指定 | 表やリストで答えさせる | 「表形式で出力してください」 |
✨ 改善したプロンプトの例
あなたは旅行プランナーです。
東京から日帰りで行ける観光スポットを3つ紹介してください。
それぞれのスポットについて、「場所名」「おすすめポイント」「所要時間」を表形式で答えてください。
💬 実行結果の例
| 場所名 | おすすめポイント | 所要時間 |
|---|---|---|
| 鎌倉 | 古都の雰囲気と美しい寺社 | 約1時間 |
| 箱根 | 温泉と自然が楽しめる | 約1.5時間 |
| 日光 | 歴史ある建造物が多い | 約2時間 |
一気に「専門家っぽい」回答になりましたね。
しかも構造化された出力（表）なので、アプリ側でも扱いやすいです。
✅ ポイント：プロンプトを工夫するだけで、同じAIでもまるで別人のような振る舞いになります。
4. ステップ3：アプリケーションコード（コピペ用）
さて、いよいよアプリの形にしてみましょう。
以下のコードをそのままコピペすれば、
先ほどのプロンプトを使ったチャットアプリが完成します。
📁 app/page.tsx
"use client";
import React, { useState } from "react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
export default function Home() {
const [message, setMessage] = useState("");
const [response, setResponse] = useState("");
const sendMessage = async () => {
const res = await fetch("/api/chat", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ message }),
});
const data = await res.json();
setResponse(data.reply);
};
return (
<div className="max-w-md mx-auto p-6 space-y-4">
<h1 className="text-2xl font-bold">AI旅行プランナー</h1>
<Input
placeholder="質問を入力..."
value={message}
onChange={(e) => setMessage(e.target.value)}
/>
<Button onClick={sendMessage}>送信</Button>
{response && (
<div className="p-4 mt-4 bg-gray-100 rounded-lg whitespace-pre-wrap">
{response}
</div>
)}
</div>
);
}
📁 app/api/chat/route.ts
import { NextResponse } from "next/server";
import OpenAI from "openai";
const openai = new OpenAI({
apiKey: process.env.OPENAI_API_KEY,
});
export async function POST(req: Request) {
const { message } = await req.json();
const prompt = `
あなたは旅行プランナーです。
東京から日帰りで行ける観光スポットを3つ紹介してください。
それぞれのスポットについて、「場所名」「おすすめポイント」「所要時間」を表形式で答えてください。
ユーザーからの質問：${message}
`;
const completion = await openai.chat.completions.create({
model: "gpt-4o-mini",
messages: [{ role: "user", content: prompt }],
});
return NextResponse.json({ reply: completion.choices[0].message.content });
}
💡このコードでは、プロンプト部分だけを書き換えれば、別のテーマのAI（例：料理アドバイザー、学習コーチ、恋愛相談AI）にも簡単に変えられます。
5. まとめ：プロンプトエンジニアは最強の初学者スキル
この記事で学んだことをまとめます👇
- AIアプリの成否は「コード」ではなく「プロンプト」が9割
- 良いプロンプトは「役割」「制約」「出力形式」の3要素で構成される
- コードは“AIを呼び出す器”にすぎない。中身（プロンプト）こそが本質