プロンプト不要論の真偽：コンテキストエンジニアリングへの進化と2025年の実践法

import React from 'react';

const Card = ({ title, children, className }) => (
  <div className={`bg-white rounded-lg shadow-md p-6 ${className}`}>
    <h3 className="text-xl font-bold mb-3 text-gray-800">{title}</h3>
    <div className="text-gray-700 space-y-2">{children}</div>
  </div>
);

const App = () => {
  const promptEngineeringEvolution = {
    title: "プロンプトエンジニアリングの進化：単一の指示から包括的システムへ",
    stages: [
      {
        name: "フェーズ1：プロンプトエンジニアリング",
        description: "LLMから望む出力を得るために、手作業で「魔法の言葉」を工夫する段階。",
        bgColor: "bg-sky-100",
      },
      {
        name: "フェーズ2：コンテキストエンジニアリング（現在）",
        description: "AIが必要な情報・ツール・履歴へ動的にアクセスできる環境全体を設計する段階。",
        bgColor: "bg-green-100",
      },
      {
        name: "フェーズ3：自動化ワークフローアーキテクチャ（未来）",
        description: "コンテキストの生成・管理自体をコードによって自動化し、システムが自律的に動作する段階。",
        bgColor: "bg-indigo-100",
      },
    ],
    source: "https://community.openai.com/t/prompt-engineering-is-dead-and-context-engineering-is-already-obsolete-why-the-future-is-automated-workflow-architecture-with-llms/1314011"
  };

  const conflictingViews = {
    title: "複雑なプロンプトは必要か？対立する見解",
    views: [
      {
        title: "不要論：日常利用ではシンプル化が進む",
        points: [
          "モデル性能が向上し、曖昧な指示でも意図を理解。",
          "プロンプトの知識はツールやUIに内包・抽象化。",
          "システムプロンプトやファインチューニングが挙動を決定するため、個別プロンプトの重要性は相対的に低下。",
        ],
        source: "https://medium.com/data-science-in-your-pocket/prompt-engineering-is-dead-debb01e9720e"
      },
      {
        title: "重要論：製品開発では依然として不可欠",
        points: [
          "成功しているAI製品は、極めて詳細で複雑なシステムプロンプトに支えられている。",
          "大規模モデルほど、構造化された複雑なプロンプトから大きな恩恵を受ける。",
          "Chain-of-Thought等の高度なプロンプト戦略が、複雑な推論を引き出す。",
        ],
        source: "https://www.news.aakashg.com/p/prompt-engineering"
      },
    ]
  };

  const contextEngineeringData = {
    title: "現在の主流：コンテキストエンジニアリングへの移行",
    description: "現在の実践方法は、単なる「プロンプト」の工夫から、AIが機能するための「コンテキスト（文脈）」全体を設計するアプローチに移行しています。これは、プロンプトをシステムの一部として捉え、より動的で包括的な情報を提供する考え方です。",
    comparison: [
      { category: "焦点", traditional: "個々のプロンプトの言い回し", modern: "AIがタスクを成功させるための情報と環境全体の設定" },
      { category: "性質", traditional: "静的、単一のプロンプト", modern: "動的、実行時に組み立てられる複数のコンポーネント" },
      { category: "構成要素", traditional: "ユーザーの指示テキスト", modern: "システム指示、DBデータ、API応答、会話履歴など" },
      { category: "例えるなら", traditional: "魔法の呪文を唱える", modern: "AIのための舞台全体の脚本・演出" },
    ],
    source: "https://addyo.substack.com/p/context-engineering-bringing-engineering"
  };
  
  const productDevelopmentData = {
      title: "AI製品開発における実践的プロンプト術と経済性",
      companies: [
          { name: "Cluely", achievement: "ARR $6M (2ヶ月)", features: ["コードのような括弧 < > の使用", "NEVER/ALWAYSリストでの厳密な指示", "if/thenによるエッジケース処理"] },
          { name: "Bolt", achievement: "ARR $50M (5ヶ月)", features: ["Cluelyと同様の構造化", "過去のテストで発見されたエラーへの極めて詳細なハンドリング"] }
      ],
      economics: {
          title: "プロンプト戦略とコスト比較 (10万コール/日での推定)",
          strategies: [
              { name: "詳細アプローチ (Bolt風)", tokens: "2,500", cost: 3000 },
              { name: "シンプルアプローチ (Cluely風)", tokens: "212", cost: 706 }
          ]
      },
      source: "https://www.news.aakashg.com/p/prompt-engineering"
  };

  return (
    <div className="bg-gray-50 min-h-screen p-4 sm:p-6 lg:p-8 font-sans">
      <div className="max-w-7xl mx-auto">
        <header className="text-center mb-10">
          <h1 className="text-4xl font-extrabold text-gray-900">プロンプト不要論の真偽：2025年の最新動向と未来展望</h1>
          <p className="mt-2 text-lg text-gray-600">モデルの進化はプロンプトを不要にするのか？その答えは単純ではありません。</p>
        </header>

        <div className="space-y-8">
          <Card title={promptEngineeringEvolution.title}>
            <div className="relative flex justify-between items-center mt-4">
                <div className="absolute w-full h-1 bg-gray-300 top-1/2 -translate-y-1/2"></div>
                {promptEngineeringEvolution.stages.map((stage, index) => (
                    <div key={index} className="relative z-10 flex flex-col items-center w-1/3 px-2">
                        <div className={`w-16 h-16 rounded-full ${stage.bgColor} flex items-center justify-center text-center text-sm font-bold shadow-lg`}>{index + 1}</div>
                        <p className={`mt-2 font-semibold ${stage.bgColor.replace('100', '800').replace('bg-', 'text-')} text-center`}>{stage.name}</p>
                        <p className="text-xs text-gray-600 text-center mt-1">{stage.description}</p>
                    </div>
                ))}
            </div>
             <p className="text-xs text-right mt-4 text-gray-500">出典: <a href={promptEngineeringEvolution.source} target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">OpenAI Community</a></p>
          </Card>

          <Card title={conflictingViews.title}>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
              {conflictingViews.views.map((view, index) => (
                <div key={index} className="bg-gray-100 p-4 rounded-lg">
                  <h4 className="font-bold text-lg mb-2 text-gray-800">{view.title}</h4>
                  <ul className="list-disc list-inside space-y-1 text-sm">
                    {view.points.map((point, i) => <li key={i}>{point}</li>)}
                  </ul>
                  <p className="text-xs text-right mt-3 text-gray-500">出典: <a href={view.source} target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">{new URL(view.source).hostname}</a></p>
                </div>
              ))}
            </div>
          </Card>

          <Card title={contextEngineeringData.title}>
            <p className="text-sm mb-4">{contextEngineeringData.description}</p>
            <div className="overflow-x-auto">
              <table className="w-full text-sm text-left">
                <thead className="bg-gray-200">
                  <tr>
                    <th className="p-3">項目</th>
                    <th className="p-3">旧来のプロンプトエンジニアリング</th>
                    <th className="p-3">現在のコンテキストエンジニアリング</th>
                  </tr>
                </thead>
                <tbody>
                  {contextEngineeringData.comparison.map((row, index) => (
                    <tr key={index} className="border-b">
                      <td className="p-3 font-semibold bg-gray-50">{row.category}</td>
                      <td className="p-3">{row.traditional}</td>
                      <td className="p-3">{row.modern}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            <p className="text-xs text-right mt-4 text-gray-500">出典: <a href={contextEngineeringData.source} target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">addyo.substack.com</a></p>
          </Card>

           <Card title={productDevelopmentData.title}>
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-4">
                    <div className="bg-blue-50 p-4 rounded-lg">
                        <h4 className="font-bold text-lg mb-2 text-blue-800">成功事例から見るプロンプトの工夫</h4>
                        {productDevelopmentData.companies.map(company => (
                            <div key={company.name} className="mb-3">
  <p className="font-semibold text-blue-700">{company.name} ({company.achievement})</p>
  <ul className="list-disc list-inside text-sm text-blue-900">
  {company.features.map(feature => <li key={feature}>{feature}</li>)}
  </ul>
                            </div>
                        ))}
                    </div>
                    <div className="bg-green-50 p-4 rounded-lg">
                         <h4 className="font-bold text-lg mb-2 text-green-800">{productDevelopmentData.economics.title}</h4>
                         <div className="overflow-x-auto">
                            <table className="w-full text-sm">
  <thead className="text-green-800">
  <tr><th className="text-left p-2">戦略</th><th className="text-right p-2">トークン数</th><th className="text-right p-2">日次コスト</th></tr>
  </thead>
  <tbody>
  {productDevelopmentData.economics.strategies.map(s => (
  <tr key={s.name} className="border-t border-green-200">
  <td className="p-2">{s.name}</td>
  <td className="text-right p-2">{s.tokens}</td>
  <td className="text-right p-2">${s.cost.toLocaleString()}</td>
  </tr>
  ))}
  </tbody>
                            </table>
                         </div>
                    </div>
                </div>
                <p className="text-xs text-right mt-4 text-gray-500">出典: <a href={productDevelopmentData.source} target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">news.aakashg.com</a></p>
           </Card>

        </div>
      </div>
    </div>
  );
};

export default App;