法人向けAI研修の重要性と企業の取り組み

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

const data = [
  { name: 'SAMURAI ENGINEER Biz', participants: 35000, url: 'https://www.sejuku.net/biz/' },
  { name: 'AVILEN', participants: 1000, url: 'https://avilen.co.jp/training/' },
  { name: 'スキルアップAI', participants: 50, url: 'https://www.skillupai.com/private-training/' },
  { name: 'トレノケート', participants: 53000, url: 'https://www.trainocate.co.jp/' },
  { name: '富士通ラーニングメディア', participants: 255000, url: 'https://www.knowledgewing.com/' },
  { name: '株式会社インソース', participants: 550000, url: 'https://www.insource.co.jp/index.html' },
  { name: 'NECマネジメントパートナー', participants: 14444, url: 'https://www.neclearning.jp/' },
  { name: '株式会社リスキル', participants: 1000, url: 'https://www.recurrent.jp/' },
  { name: '株式会社STANDARD', participants: 1000, url: 'https://standard-dx.com/' },
  { name: '株式会社キカガク', participants: 50000, url: 'https://www.kikagaku.co.jp/' }
];

const formatNumber = (num) => {
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};

const CustomTooltip = ({ active, payload, label }) => {
  if (active && payload && payload.length) {
    const company = data.find(item => item.name === label);
    return (
      <div className="bg-white p-4 border rounded shadow">
        <p className="font-bold">{label}</p>
        <p>参加者数: {formatNumber(payload[0].value)}名</p>
        <a href={company.url} target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">
          公式サイトへ
        </a>
      </div>
    );
  }
  return null;
};

const App = () => {
  return (
    <div className="p-4 max-w-4xl mx-auto">
      <h1 className="text-3xl font-bold mb-6 text-center">法人向けAI研修企業の参加者数比較（2024年推定）</h1>
      <p className="mb-6 text-gray-600">
        以下は、法人向けにAI研修を行っている企業10社の推定参加者数を示した棒グラフです。
        データは各社の公開情報や業界動向から推測した値を含みます。
      </p>
      <ResponsiveContainer width="100%" height={500}>
        <BarChart data={data} layout="vertical" margin={{ top: 5, right: 30, left: 100, bottom: 5 }}>
          <XAxis type="number" tickFormatter={formatNumber} />
          <YAxis dataKey="name" type="category" width={100} />
          <Tooltip content={<CustomTooltip />} />
          <Legend />
          <Bar dataKey="participants" fill="#4C51BF" />
        </BarChart>
      </ResponsiveContainer>
      <p className="mt-6 text-sm text-gray-500">
        注: グラフ内の数値は推定値を含みます。正確な情報は各企業の公式サイトでご確認ください。
      </p>
    </div>
  );
};

export default App;