海外児童発達支援スタートアップの最新資金調達動向と注目事例

import React from 'react';
import { BarChart, Bar, PieChart, Pie, Cell, LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';

const App = () => {
  // 資金調達データ
  const fundingData = [
    { name: 'Woli (ギリシャ)', amount: 100, year: 2023, description: '子供向けネオバンク', investor: 'Eleven Ventures', url: 'https://seedblink.com/press-room/2023-04-05-woli-%CF%83%CF%84%CE%BF%CF%87%CE%B5%CF%8D%CE%B5%CE%B9-%CF%83%CE%B5-%CF%87%CF%81%CE%B7%CE%BC%CE%B1%CF%84%CE%BF%CE%B4%CF%8C%CF%84%CE%B7%CF%83%CE%B7-1-%CE%B5%CE%BA%CE%B1%CF%84-%CE%B5%CF%85%CF%81%CF%8E-%CE%BC%CE%AD%CF%83%CF%89-%CF%84%CE%B7%CF%82-seedblink' },
    { name: 'Lost My Name (イギリス)', amount: 900, year: 2015, description: 'パーソナライズ絵本', investor: 'Google Ventures', url: 'https://www.theguardian.com/technology/2015/jun/25/lost-my-name-funding-google-ventures' },
    { name: 'Peds3 (日本)', amount: 110, year: 2024, description: '発達障害治療アプリ', investor: 'みやこキャピタル', url: 'https://www.nikkei.com/nkd/industry/article/?DisplayType=1&n_m_code=144&ng=DGXZQOUC1725K0X11C24A0000000' },
    { name: 'Wonderschool (米国)', amount: 210, year: 2018, description: '家庭内保育ネットワーク', investor: 'Omidyar Network', url: 'https://techcrunch.com/2018/01/08/wonderschool-gets-2-1m-to-bring-its-early-childhood-programs-to-new-york-city/' },
    { name: 'Gotoschool (日本)', amount: 56, year: 2022, description: '障害児療育事業', investor: 'ユナイテッド', url: 'https://sogyotecho.jp/news/20221020gotoschool/' },
  ];

  // 地域別資金調達額
  const regionData = [
    { name: '北米', value: 210 },
    { name: '欧州', value: 1000 },
    { name: 'アジア', value: 166 },
  ];

  // 年代別資金調達推移データ
  const yearlyTrendData = [
    { year: '2015', amount: 900 },
    { year: '2016-2017', amount: 0 },
    { year: '2018', amount: 210 },
    { year: '2019-2021', amount: 0 },
    { year: '2022', amount: 56 },
    { year: '2023', amount: 100 },
    { year: '2024', amount: 110 },
  ];

  // 投資分野データ
  const investmentAreaData = [
    { name: 'デジタル療育', value: 110 },
    { name: '金融教育', value: 100 },
    { name: '教育コンテンツ', value: 900 },
    { name: '保育サービス', value: 210 },
    { name: '運動療育', value: 56 },
  ];

  // 色の設定
  const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884d8'];

  return (
    <div className="min-h-screen bg-gray-50 py-8">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center">
          <h1 className="text-3xl font-extrabold text-gray-900 sm:text-4xl">
            海外の児童発達支援スタートアップの資金調達状況
          </h1>
          <p className="mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4">
            2015年〜2024年の主要な資金調達事例の分析
          </p>
        </div>

        {/* 主要スタートアップの資金調達額 */}
        <div className="mt-12 bg-white rounded-lg shadow overflow-hidden">
          <div className="px-4 py-5 sm:p-6">
            <h2 className="text-lg font-medium text-gray-900">主要児童発達支援スタートアップの資金調達額（万ドル）</h2>
            <p className="text-sm text-gray-500">出典: 各社の資金調達ニュース</p>
            <div className="mt-4 h-80">
              <ResponsiveContainer width="100%" height="100%">
                <BarChart
                  data={fundingData}
                  margin={{ top: 20, right: 30, left: 20, bottom: 60 }}
                >
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="name" angle={-45} textAnchor="end" height={60} />
                  <YAxis />
                  <Tooltip 
                    formatter={(value) => [`${value}万ドル`, '調達額']}
                    labelFormatter={(name) => `${name}`}
                  />
                  <Legend />
                  <Bar dataKey="amount" name="調達額（万ドル）" fill="#8884d8" />
                </BarChart>
              </ResponsiveContainer>
            </div>
          </div>
        </div>

        {/* 地域別と投資分野の分布 */}
        <div className="mt-8 grid grid-cols-1 gap-8 md:grid-cols-2">
          {/* 地域別資金調達分布 */}
          <div className="bg-white rounded-lg shadow overflow-hidden">
            <div className="px-4 py-5 sm:p-6">
              <h2 className="text-lg font-medium text-gray-900">地域別資金調達分布</h2>
              <p className="text-sm text-gray-500">出典: 調査データに基づく集計</p>
              <div className="mt-4 h-80">
                <ResponsiveContainer width="100%" height="100%">
                  <PieChart>
                    <Pie
                      data={regionData}
                      cx="50%"
                      cy="50%"
                      labelLine={true}
                      outerRadius={80}
                      fill="#8884d8"
                      dataKey="value"
                      nameKey="name"
                      label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
                    >
                      {regionData.map((entry, index) => (
                        <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                      ))}
                    </Pie>
                    <Tooltip formatter={(value) => `${value}万ドル`} />
                    <Legend />
                  </PieChart>
                </ResponsiveContainer>
              </div>
            </div>
          </div>

          {/* 投資分野別分布 */}
          <div className="bg-white rounded-lg shadow overflow-hidden">
            <div className="px-4 py-5 sm:p-6">
              <h2 className="text-lg font-medium text-gray-900">投資分野別分布</h2>
              <p className="text-sm text-gray-500">出典: 調査データに基づく集計</p>
              <div className="mt-4 h-80">
                <ResponsiveContainer width="100%" height="100%">
                  <PieChart>
                    <Pie
                      data={investmentAreaData}
                      cx="50%"
                      cy="50%"
                      labelLine={true}
                      outerRadius={80}
                      fill="#8884d8"
                      dataKey="value"
                      nameKey="name"
                      label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
                    >
                      {investmentAreaData.map((entry, index) => (
                        <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                      ))}
                    </Pie>
                    <Tooltip formatter={(value) => `${value}万ドル`} />
                    <Legend />
                  </PieChart>
                </ResponsiveContainer>
              </div>
            </div>
          </div>
        </div>

        {/* 年代別資金調達推移 */}
        <div className="mt-8 bg-white rounded-lg shadow overflow-hidden">
          <div className="px-4 py-5 sm:p-6">
            <h2 className="text-lg font-medium text-gray-900">年代別資金調達推移</h2>
            <p className="text-sm text-gray-500">出典: 調査データに基づく集計</p>
            <div className="mt-4 h-80">
              <ResponsiveContainer width="100%" height="100%">
                <LineChart
                  data={yearlyTrendData}
                  margin={{ top: 20, right: 30, left: 20, bottom: 10 }}
                >
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="year" />
                  <YAxis />
                  <Tooltip formatter={(value) => `${value}万ドル`} />
                  <Legend />
                  <Line type="monotone" dataKey="amount" name="調達額（万ドル）" stroke="#8884d8" activeDot={{ r: 8 }} />
                </LineChart>
              </ResponsiveContainer>
            </div>
          </div>
        </div>

        {/* 主要スタートアップの詳細情報 */}
        <div className="mt-8 bg-white rounded-lg shadow overflow-hidden">
          <div className="px-4 py-5 sm:p-6">
            <h2 className="text-lg font-medium text-gray-900">主要児童発達支援スタートアップの詳細</h2>
            <div className="mt-4 overflow-x-auto">
              <table className="min-w-full divide-y divide-gray-200">
                <thead className="bg-gray-50">
                  <tr>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">企業名</th>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">国</th>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">調達額</th>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">年</th>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">事業内容</th>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">主要投資家</th>
                  </tr>
                </thead>
                <tbody className="bg-white divide-y divide-gray-200">
                  {fundingData.map((company, index) => (
                    <tr key={index}>
                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                        <a href={company.url} target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:text-blue-700">
                          {company.name.split(' ')[0]}
                        </a>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{company.name.match(/\(([^)]+)\)/)[1]}</td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{company.amount}万ドル</td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{company.year}</td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{company.description}</td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{company.investor}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>

        {/* 市場動向と投資家の視点 */}
        <div className="mt-8 bg-white rounded-lg shadow overflow-hidden">
          <div className="px-4 py-5 sm:p-6">
            <h2 className="text-lg font-medium text-gray-900">児童発達支援市場の動向と投資家の視点</h2>
            <div className="mt-4 space-y-4">
              <div className="bg-gray-50 p-4 rounded-lg">
                <h3 className="font-medium text-gray-900">市場の特徴</h3>
                <ul className="mt-2 list-disc pl-5 text-sm text-gray-600 space-y-1">
                  <li>市場の断片化: PE支援のチェーンが市場の約10%しか占めていない <a href="https://tytonpartners.com/investing-early-childhood-trends-and-investments-in-the-ece-space/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">出典</a></li>
                  <li>2019年の米国の育児関連支出は450億ドルに達し、2024年まで年率4.1%の成長が見込まれている <a href="https://www.edsurge.com/news/2021-03-11-what-investors-see-in-a-highly-fragmented-and-under-teched-early-childhood-education-market" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">出典</a></li>
                  <li>2016年以降、幼児プログラムへの政府支出は17％増加し、民間資本は12％増加 <a href="https://www.edsurge.com/news/2019-03-06-investment-in-early-learners-is-on-the-rise" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">出典</a></li>
                </ul>
              </div>
              
              <div className="bg-gray-50 p-4 rounded-lg">
                <h3 className="font-medium text-gray-900">投資家が注目する分野</h3>
                <ul className="mt-2 list-disc pl-5 text-sm text-gray-600 space-y-1">
                  <li>デジタル療育: 発達障害向け治療アプリ（例: Peds3）</li>
                  <li>教育コンテンツ: パーソナライズされた絵本（例: Lost My Name）</li>
                  <li>保育サービス: 家庭内保育ネットワーク（例: Wonderschool）</li>
                  <li>金融教育: 子供向けネオバンク（例: Woli）</li>
                  <li>運動療育: 発達障害児向け運動プログラム（例: Gotoschool）</li>
                </ul>
              </div>
              
              <div className="bg-gray-50 p-4 rounded-lg">
                <h3 className="font-medium text-gray-900">投資家の視点</h3>
                <ul className="mt-2 list-disc pl-5 text-sm text-gray-600 space-y-1">
                  <li>早期教育市場が細分化され、技術導入が遅れているため、イノベーションと投資の余地が大きい <a href="https://www.edsurge.com/news/2021-03-11-what-investors-see-in-a-highly-fragmented-and-under-teched-early-childhood-education-market" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">出典</a></li>
                  <li>州レベルでの肯定的な規制環境が、ECEへの関心と公的資金を増加させている <a href="https://tytonpartners.com/investing-early-childhood-trends-and-investments-in-the-ece-space/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">出典</a></li>
                  <li>パンデミック後、早期教育プログラムやサービスへの需要が高まると予測されている <a href="https://www.edsurge.com/news/2021-03-11-what-investors-see-in-a-highly-fragmented-and-under-teched-early-childhood-education-market" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">出典</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default App;