2025年最新：MetaとAnthropicのAI活用によるコーディング効率革命

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

const data = [
  { name: 'Meta', Investment: 30000000000, AI_Models: 3, AI_Code_Percentage: 50 },
  { name: 'Anthropic', Annual_Revenue: 3000000000, AI_Models: 1, AI_Code_Percentage: null },
  { name: 'Amazon', AI_Assistant_Users: 10000, AI_Models: 1, AI_Code_Percentage: null },
  { name: 'Microsoft', AI_Models: 2, AI_Code_Percentage: null },
  { name: 'Google', AI_Models: 2, AI_Code_Percentage: null }
];

const sections = [
  {
    title: 'MetaのAI投資とAI活用状況',
    items: [
      'AIへの投資額：約300億ドル（推定）',
      '社内AIアシスタント：Devmate（複数モデル使用）、Metamate（単一モデル）',
      '2026年までにコードの約50%をAIが作成予定（ザッカーバーグCEO発言）'
    ]
  },
  {
    title: 'Anthropicの成長とAIモデル',
    items: [
      '年商約30億ドル（推定）',
      'AIモデルClaudeは複雑な多段階推論に強み',
      '多くの企業がClaudeを採用'
    ]
  },
  {
    title: '他社のAIコーディング支援の動向',
    items: [
      'AmazonはCursorを社内導入',
      'MicrosoftやGoogleもAIコーディングを推進',
      'AIコーディングアシスタントの需要急増'
    ]
  }
];

const App = () => {
  return (
    <div className="p-6 font-sans max-w-4xl mx-auto">
      <h1 className="text-2xl font-bold mb-4">MetaとAnthropicのAI活用によるコーディング効率化の概要</h1>
      {sections.map((section, idx) => (
        <section key={idx} className="mb-6">
          <h2 className="text-xl font-semibold mb-2">■ {section.title}</h2>
          <ul className="list-disc list-inside mb-2">
            {section.items.map((item, i) => (
              <li key={i}>{item}</li>
            ))}
          </ul>
        </section>
      ))}

      <h2 className="text-xl font-semibold mb-2">■ AI関連数値比較チャート（推定値含む）</h2>
      <ResponsiveContainer width="100%" height={300}>
        <BarChart data={data} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="name" />
          <YAxis />
          <Tooltip formatter={(value) => new Intl.NumberFormat().format(value)} />
          <Legend />
          <Bar dataKey="Investment" fill="#8884d8" name="投資額（ドル）" />
          <Bar dataKey="Annual_Revenue" fill="#82ca9d" name="年間収益（ドル）" />
          <Bar dataKey="AI_Code_Percentage" fill="#ffc658" name="AIによるコード割合（%）" />
        </BarChart>
      </ResponsiveContainer>

      <p className="mt-4 text-sm text-gray-600">
        出典: <a href="https://www.businessinsider.com/meta-anthropic-ai-llama-coding-efficiency-2025-6" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">Business Insiderの記事</a>（推定値含む）
      </p>
    </div>
  );
};

export default App;