🧠

🧠「コードより大事なのは言葉」：プロンプトで作るあなたの初めてのAIアプリ

に公開
初心者
プロンプトエンジニアリング
生成 AI
zennfes2025ai
aiアプリ開発
tech

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キーを用意しよう

  1. OpenAI公式サイトでアカウントを作成
  2. 「API Keys」ページでキーを発行
  3. .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を呼び出す器”にすぎない。中身（プロンプト）こそが本質

Discussion