【2025年最新】3大AIコンテキスト長を徹底比較！100万トークンが拓くAIの新たな可能性

import React from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, LabelList } from 'recharts';

const Section = ({ title, children }) => (
  <div className="bg-white p-6 rounded-lg shadow-md mb-8">
    <h2 className="text-2xl font-bold mb-4 text-gray-800 border-b-2 pb-2">{title}</h2>
    <div className="text-gray-700">{children}</div>
  </div>
);

const App = () => {
  const data = [
    { name: 'OpenAI GPT-4o', value: 128000, url: 'https://swimm.io/learn/large-language-models/llm-context-windows-basics-examples-and-prompting-best-practices' },
    { name: 'Anthropic Claude 3.5 Sonnet', value: 200000, url: 'https://www.artfish.ai/p/long-context-llms' },
    { name: 'Google Gemini 1.5 Pro', value: 1000000, url: 'https://www.appen.com/blog/understanding-large-language-models-context-windows' },
  ];

  const formatNumber = (num) => new Intl.NumberFormat('ja-JP').format(num);

  return (
    <div className="bg-gray-50 min-h-screen p-4 sm:p-6 md:p-8">
      <div className="max-w-4xl mx-auto">
        <h1 className="text-3xl sm:text-4xl font-extrabold text-center mb-8 text-gray-900">主要AIモデルのコンテキスト長と「コンテキスト」の定義</h1>

        <Section title="そもそも「コンテキスト」とは？">
          <p className="mb-4">
            AI、特に大規模言語モデル（LLM）における「コンテキスト」または「コンテキストウィンドウ」とは、<strong className="text-indigo-600">モデルが一度に処理し、記憶できる情報の量</strong>を指します。これは人間の「ワーキングメモリ（作業記憶）」に似た概念です。
            <a href="https://www.ibm.com/think/topics/context-window" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[16]</a>
            <a href="https://medium.com/@tahirbalarabe2/understanding-llm-context-windows-tokens-attention-and-challenges-c98e140f174d" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[22]</a>
          </p>
          <ul className="list-disc list-inside space-y-2">
            <li><strong className="font-semibold">単位:</strong> 情報量は「トークン」という単位で測定されます。トークンはテキストをAIが処理できる最小単位に分割したものです。<a href="https://swimm.io/learn/large-language-models/llm-context-windows-basics-examples-and-prompting-best-practices" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[23]</a></li>
            <li><strong className="font-semibold">重要性:</strong> コンテキストが長いほど、AIはより多くの背景情報を保持でき、長文の読解や要約、一貫性のある対話、複雑なコーディング支援など、高度なタスクを実行できます。<a href="https://www.zdnet.com/article/what-is-a-context-window-and-why-does-it-matter-for-ai/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[2]</a></li>
          </ul>
        </Section>

        <Section title="主要AIモデルの最大コンテキスト長比較 (2024年6月時点)">
          <p className="text-sm text-gray-600 mb-4">出典: 各モデルのバーに記載</p>
          <div style={{ width: '100%', height: 300 }}>
            <ResponsiveContainer>
              <BarChart data={data} layout="vertical" margin={{ top: 5, right: 30, left: 100, bottom: 5 }}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis type="number" tickFormatter={formatNumber} />
                <YAxis type="category" dataKey="name" width={150} tick={{ fontSize: 12 }} />
                <Tooltip formatter={(value) => [`${formatNumber(value)} トークン`, 'コンテキスト長']} />
                <Legend />
                <Bar dataKey="value" name="最大コンテキスト長 (トークン)" fill="#8884d8">
                  <LabelList dataKey="value" position="right" formatter={(value) => formatNumber(value)} />
                </Bar>
              </BarChart>
            </ResponsiveContainer>
          </div>
        </Section>

        <Section title="コンテキスト長拡大の利点と課題">
          <div className="grid md:grid-cols-2 gap-6">
            <div className="bg-green-50 p-4 rounded-lg">
              <h3 className="text-xl font-semibold mb-2 text-green-800">利点</h3>
              <ul className="list-disc list-inside space-y-2">
                <li><strong className="font-semibold">大量情報の処理:</strong> 長大な論文や書籍全体を一度に読み込み、分析・要約が可能。<a href="https://www.artfish.ai/p/long-context-llms" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[5]</a></li>
                <li><strong className="font-semibold">深い文脈理解:</strong> 長時間の会話履歴を記憶し、ニュアンスを汲み取った一貫性のある対話が可能。<a href="https://medium.com/the-llmops-brief/introduction-to-large-language-models-9ac028d34732" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[2]</a></li>
                <li><strong className="font-semibold">複雑なタスク実行:</strong> 複数の資料を横断的に分析するような複雑なタスクの精度が向上する。</li>
              </ul>
            </div>
            <div className="bg-red-50 p-4 rounded-lg">
              <h3 className="text-xl font-semibold mb-2 text-red-800">課題</h3>
              <ul className="list-disc list-inside space-y-2">
                <li><strong className="font-semibold">「干し草の山から針を探す」問題:</strong> コンテキストが長すぎると、重要な情報を見つけ出す精度が低下することがある。<a href="https://blog.google/technology/ai/google-gemini-next-generation-model-february-2024/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[3]</a></li>
                <li><strong className="font-semibold">計算コスト増大:</strong> 処理情報量が増えるため、応答速度が遅くなったり、利用料金が高くなったりする傾向がある。<a href="https://www.appen.com/blog/understanding-large-language-models-context-windows" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[1]</a></li>
                <li><strong className="font-semibold">エネルギー消費:</strong> 大量データの処理は、より多くの計算能力を必要とし、エネルギー消費も増加する。<a href="https://swimm.io/learn/large-language-models/llm-context-windows-basics-examples-and-prompting-best-practices" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">[3]</a></li>
              </ul>
            </div>
          </div>
        </Section>

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

export default App;