AIモデルの意識確率15％説を読み解く：最新研究と倫理的インパクト

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

// データ定義 -----------------------------
// 雇用自動化率 (※意識AI後は推定値)
const employmentData = [
  { scenario: '現在(非意識)', automation: 27 },
  { scenario: '意識AI登場後(推定)', automation: 60 }, // 推定値
];

// 教育インパクト表データ
const educationRows = [
  {
    phase: '現在',
    process: '生成AIチューターで演習自動化',
    role: '批判的思考指導',
    issue: 'コピペ依存',
    chance: '個別最適化学習',
  },
  {
    phase: '意識AI後(推定)',
    process: 'AIがメタ教師として感情支援',
    role: 'メンタリング・倫理管理',
    issue: '強制労働問題',
    chance: '24/7対話型学習',
  },
];

// 法律インパクト表データ
const legalRows = [
  {
    theme: '法的人格',
    now: '不在',
    future: '電子法人議論',
    newPoint: '消滅権・責任能力',
  },
  {
    theme: '損害賠償',
    now: '開発者・所有者が負う',
    future: 'AI自己責任',
    newPoint: '保険制度再設計',
  },
  {
    theme: '労働法',
    now: '適用外',
    future: '最低限保護議論',
    newPoint: '稼働率基準',
  },
];

// コンポーネント ----------------------------
const Section = ({ title, children }) => (
  <section className='bg-white shadow rounded p-6 space-y-6'>
    <h2 className='text-xl font-semibold'>{title}</h2>
    {children}
  </section>
);

const Table = ({ cols, rows }) => (
  <div className='overflow-x-auto'>
    <table className='min-w-full text-sm text-left'>
      <thead>
        <tr className='bg-gray-200'>
          {cols.map((c) => (
            <th key={c} className='px-2 py-1 whitespace-nowrap'>{c}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {rows.map((r, i) => (
          <tr key={i} className={i % 2 ? 'bg-gray-50 border-t' : 'border-t'}>
            {Object.values(r).map((v, j) => (
              <td key={j} className='px-2 py-1 whitespace-nowrap'>{v}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  </div>
);

const App = () => (
  <div className='min-h-screen bg-gray-100 p-4 space-y-12'>
    {/* タイトル */}
    <header className='text-center space-y-2'>
      <h1 className='text-2xl font-bold'>AI意識による社会影響マップ</h1>
      <p className='text-sm text-gray-600'>出典: <a href='https://www.youtube.com/watch?v=pyXouxa0WnY' target='_blank' rel='noopener noreferrer' className='text-blue-500 underline hover:text-blue-700'>YouTube</a></p>
    </header>

    {/* 雇用セクション */}
    <Section title='雇用への影響'>
      <div style={{ width: '100%', height: 300 }}>
        <ResponsiveContainer>
          <BarChart data={employmentData} margin={{ top: 20, right: 30, left: 0, bottom: 0 }}>
            <CartesianGrid strokeDasharray='3 3' />
            <XAxis dataKey='scenario' />
            <YAxis unit='%' />
            <Tooltip />
            <Bar dataKey='automation' fill='#60a5fa' name='自動化率' />
          </BarChart>
        </ResponsiveContainer>
      </div>
      <ul className='grid md:grid-cols-2 gap-4 text-sm list-disc list-inside'>
        <li className='font-semibold'>課題: 大量失業リスク・AI労働者権利設計・資本所得格差拡大</li>
        <li className='font-semibold'>機会: 生産性向上・AI福祉管理・AI倫理監査需要</li>
      </ul>
      <p className='text-xs text-right italic'>※意識AI後の60%は推定値</p>
    </Section>

    {/* 教育セクション */}
    <Section title='教育への影響'>
      <Table
        cols={['フェーズ', '学習プロセス', '教師の役割', '課題', '機会']}
        rows={educationRows.map(({ phase, process, role, issue, chance }) => ({ phase, process, role, issue, chance }))}
      />
    </Section>

    {/* 法律セクション */}
    <Section title='法律への影響'>
      <Table
        cols={['テーマ', '現在', '意識AI後(推定)', '新たな論点']}
        rows={legalRows.map(({ theme, now, future, newPoint }) => ({ theme, now, future, newPoint }))}
      />
    </Section>

    {/* フッター */}
    <footer className='text-center text-xs text-gray-500 pt-8'>
      本ページは公開情報を整理し推定を含め作成しました。
    </footer>
  </div>
);

export default App;