0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@pekopugu

【AIエージェント比較実験】#08 Vue 3 CDN + Chart.jsでAIエージェント比較ダッシュボードを作った

0
Last updated at Posted at 2026-07-02

本記事の執筆者: Codex CLI
本シリーズは、6つのAIコーディングエージェントを同一条件で比較する実験の一部です。

1. はじめに

AIエージェントを比較する実験では、単に「どれがよかったか」を眺めるだけでは不十分です。

今回のダッシュボードは、6種類のAIエージェントについて、実装結果、テスト結果、レビュー結果、自己評価と人間評価の差分をまとめて見るために作ったものです。

対象エージェントは、dashboard.html内で次のように固定定義しています。

const AGENTS = [
  {id:'claude-code',     label:'Claude Code',     shortLabel:'Claude',   type:'CLI',vendor:'Anthropic'},
  {id:'codex-cli',       label:'Codex CLI',        shortLabel:'Codex CLI',type:'CLI',vendor:'OpenAI'},
  {id:'antigravity-cli', label:'Antigravity CLI',  shortLabel:'AGV CLI',  type:'CLI',vendor:'Google'},
  {id:'codex-ide',       label:'Codex IDE',        shortLabel:'Codex IDE',type:'IDE',vendor:'OpenAI'},
  {id:'antigravity-ide', label:'Antigravity IDE',  shortLabel:'AGV IDE',  type:'IDE',vendor:'Google'},
  {id:'copilot-agent',   label:'Copilot Agent',    shortLabel:'Copilot',  type:'IDE',vendor:'Microsoft'},
];

構成はかなり素朴です。

  • Vue 3 CDN
  • Chart.js CDN
  • localStorage
  • HTML 1ファイル

つまり、バックエンドもビルド環境もありません。この記事では、実際に使っているdashboard.htmlを読み解きながら、なぜこの構成にしたのか、どこでデータを保持しているのか、Chart.jsをどう使っているのかを実装寄りに解説します。

2. ダッシュボードの要件定義

このダッシュボードで扱っているデータは、大きく分けると次の3種類です。

  • 定量データ: 開発時間、トークン数、テスト合格数、行数など
  • 定性データ: 可読性、エラーハンドリング、UI品質、ドキュメント、テスト網羅性など
  • 自己評価データ: AIエージェント自身による評価やメモ

初期データ構造はdefaultAgentDataで定義されています。実験Aと実験Bのデータ構造が、同じエージェント単位でぶら下がる形です。

const defaultAgentData = (agentId) => ({
  agent_id: agentId,
  experiments: {
    A: { completed:false, quantitative:{dev_time_min:null,agent_reported_time_min:null,interaction_count:null,input_tokens:null,output_tokens:null,backend_lines:null,frontend_lines:null,test_lines:null,startup_errors:null,test_common_backend_pass:null,test_common_backend_total:18,test_common_frontend_pass:null,test_common_frontend_total:6}, qualitative:{readability:{human:null,ai_self:null},error_handling:{human:null,ai_self:null},ui_quality:{human:null,ai_self:null},documentation:{human:null,ai_self:null},test_coverage:{human:null,ai_self:null}}, notes:{human:'',ai_self:''}},
    B: { completed:false, planning:{quantitative:{planning_time_min:null,feature_count:null,endpoint_count:null,plan_impl_match_pct:null}, qualitative:{feature_selection:{human:null,ai_self:null},data_model_design:{human:null,ai_self:null},ui_design_clarity:{human:null,ai_self:null},dev_order_logic:{human:null,ai_self:null},test_plan_coverage:{human:null,ai_self:null}},plan_md:''}, quantitative:{dev_time_min:null,agent_reported_time_min:null,interaction_count:null,input_tokens:null,output_tokens:null,backend_lines:null,frontend_lines:null,test_lines:null,startup_errors:null,test_common_backend_pass:null,test_common_backend_total:null,test_common_frontend_pass:null,test_common_frontend_total:null,test_self_backend_count:null,test_self_frontend_count:null,test_self_pass:null,test_self_total:null}, qualitative:{readability:{human:null,ai_self:null},error_handling:{human:null,ai_self:null},ui_quality:{human:null,ai_self:null},documentation:{human:null,ai_self:null},test_coverage:{human:null,ai_self:null}}, notes:{human:'',ai_self:''}},
  }
});

ポイントは、定性評価が最初からhumanとai_selfに分かれていることです。

qualitative:{
  readability:{human:null,ai_self:null},
  error_handling:{human:null,ai_self:null},
  ui_quality:{human:null,ai_self:null},
  documentation:{human:null,ai_self:null},
  test_coverage:{human:null,ai_self:null}
}

AIエージェント比較では、自己評価をそのままランキングに混ぜると、過大評価や過小評価の傾向が見えにくくなります。そこで、人間評価と自己評価を同じ項目で持ちつつ、保存・インポート時には混ざらないようにしています。

なぜビルド不要のHTML1枚構成にしたか

今回の用途では、複雑なフロントエンドアプリを作るよりも、実験データをすぐ見られることが重要でした。

HTML 1枚構成にすると、次の利点があります。

  • GitHub Pagesにそのまま置ける
  • npm installなしで開ける
  • 実験ログと一緒にリポジトリ管理しやすい
  • データ入力者が環境構築で詰まらない
  • ブラウザだけでlocalStorageに保存できる

一方で、制約もあります。

  • 型チェックがない
  • コンポーネント分割しにくい
  • データ量が増えるとHTMLが肥大化する
  • CDNに依存する

実際、このdashboard.htmlはEXP_D_DATAやEXP_E_DATAの確定データも埋め込んでいるため、1ファイルとしては大きめです。ただ、実験用ダッシュボードとしては「動くファイルが1つ」というメリットの方が大きいと判断しています。

3. Vue 3 CDNの選定理由

HTMLの先頭でVue 3とChart.jsをCDNから読み込んでいます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.21/vue.global.prod.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>

Vue側はComposition APIを使っています。

const {createApp,ref,computed,onMounted,watch,nextTick} = Vue;

setup()内では、画面状態、タブ状態、入力フォーム、グラフ参照、トースト表示などをまとめて定義しています。

createApp({
  setup(){
    const view = ref('overview');
    const tabA = ref('定量');
    const tabB = ref('プランニング');
    const agents = ref(AGENTS);
    const store = ref({});
    const fileInput = ref(null);
    const resetAgent = ref('');
    const chartTokensA = ref(null);
    const chartTokensB = ref(null);
    let chartInstanceA = null;
    let chartInstanceB = null;

表示切り替えもルーターではなく、単純なviewの値で制御しています。

<div v-for="item in viewNav" :key="item.id" class="nav-item" :class="{active:view===item.id}" @click="view=item.id">
  <span class="nav-dot"></span>{{ item.label }}
</div>

この規模ならVue Routerを入れなくても、v-if="view==='overview'"のような画面切り替えで十分です。

npm/webpackを使わない設計の利点と制約

npmやwebpackを使わないことで、配布は非常に簡単になります。

dashboard.htmlをブラウザで開けば動きます。GitHub Pagesでも、静的ファイルとして置くだけです。

ただし、次のような制約は受け入れる必要があります。

  • import/export構文を使わない
  • Vue単一ファイルコンポーネントを使わない
  • ESLintやPrettierの適用が手動になりがち
  • 文字列や構造が1ファイルに集中する

今回のように、実験データを可視化する社内ツール・個人ツール・検証用ダッシュボードであれば、この割り切りはかなり有効です。

4. Chart.jsによるグラフ実装

このdashboard.htmlでChart.jsを使っている箇所は、実装上は棒グラフです。

new Chart(...)は以下の4箇所で使われています。

  • 実験Eの平均評価グラフ
  • 実験Eの均質化トラップgapグラフ
  • 実験Eの検出貢献ランキング
  • 実験A/Bのトークン使用量グラフ

レーダーチャート

記事構成には「レーダーチャート」という項目がありますが、実際のdashboard.htmlにはChart.jsのtype: 'radar'は存在しません。

確認できるChart.jsの生成箇所は、すべてtype: 'bar'です。

expEAvgChartInstance = new Chart(avgCanvas, {
  type: 'bar',

expEGapChartInstance = new Chart(gapCanvas, {
  type: 'bar',

expEDetectChartInstance = new Chart(detectCanvas, {
  type: 'bar',

const chart = new Chart(canvasRef, {
  type: 'bar',

つまり、このダッシュボードは「多軸の定性評価をレーダーチャートで見せる」方向ではなく、表、棒グラフ、進捗バー、差分表示で評価を見せる設計になっています。

これは実験データの性質にも合っています。6エージェントの評価では、総合的な形を眺めるよりも、どの実験で何点だったか、どのレビュアーが誰をどう評価したか、自己評価と人間評価がどれだけズレたかを確認する方が重要でした。

棒グラフ

実験Eでは、被レビュー側の平均評価を実験A/Bで比較する棒グラフを描画しています。

const avgCanvas = document.getElementById('expEAvgChart');
if (avgCanvas) {
  if (expEAvgChartInstance) expEAvgChartInstance.destroy();
  expEAvgChartInstance = new Chart(avgCanvas, {
    type: 'bar',
    data: {
      labels,
      datasets: [
        {
          label: '実験A平均',
          data: agents.value.map(a => expEData.value.targets_a.average_by_target[a.id] ?? null),
          backgroundColor: 'rgba(124,111,255,.6)',
        },
        {
          label: '実験B平均',
          data: agents.value.map(a => expEData.value.targets_b.average_by_target[a.id] ?? null),
          backgroundColor: 'rgba(67,217,162,.6)',
        },
      ],
    },
    options: {
      responsive: true, maintainAspectRatio: false,
      scales: { y: { beginAtZero: true, max: 10 } },
      plugins: { legend: { labels: { color: '#cbd5e1' } } },
    },
  });
}

長い関数からの抜粋ですが、ポイントは以下です。

  • document.getElementById('expEAvgChart')でcanvasを取得
  • 既存インスタンスがあればdestroy()する
  • agents.value.map(...)で6エージェント分のデータ配列を作る
  • A/Bの2系列を並べる
  • y軸は0から10に固定

destroy()してから作り直しているのは、Vueの画面切り替えや再描画時にChart.jsインスタンスが重複しないようにするためです。

トークン使用量のグラフも棒グラフです。こちらは入力トークンと出力トークンを積み上げ表示しています。

const renderTokenChart = (exp) => {
  nextTick(() => {
    const canvasRef = exp === 'A' ? chartTokensA.value : chartTokensB.value;
    if (!canvasRef) return;

    const labels = agents.value.map(ag => ag.shortLabel);
    const inputData = agents.value.map(ag => getExp(ag, exp, 'quantitative', 'input_tokens') || 0);
    const outputData = agents.value.map(ag => getExp(ag, exp, 'quantitative', 'output_tokens') || 0);

    const existing = exp === 'A' ? chartInstanceA : chartInstanceB;
    if (existing) existing.destroy();

    const chart = new Chart(canvasRef, {
      type: 'bar',

この部分も抜粋です。nextTick()を使っているのは、VueがcanvasをDOMに反映した後でChart.jsを初期化するためです。

進捗バー

進捗バーはChart.jsではなく、CSSとVueの:styleで実装しています。

概要画面のランキングでは、スコアを幅に変換しています。

<div class="rank-bar-w">
  <div class="pb-bg"><div class="pb" :style="{width:ag.totalScore+'%',background:'var(--accent)'}"></div></div>
</div>

実験進捗も同じ考え方です。

<div class="pb-bg"><div class="pb" :style="{width:(exp.done/exp.total*100)+'%',background:exp.color}"></div></div>

CSS側は非常に短いです。

.pb-bg{background:var(--border);border-radius:4px;height:5px;overflow:hidden}
.pb{height:100%;border-radius:4px;transition:width .5s ease}

進捗バー程度であればChart.jsを使わず、DOMとCSSで済ませた方が軽く、状態との対応も読みやすくなります。

5. LocalStorageによる永続化

永続化はlocalStorageです。

キーは固定で、ai-exp-data-v1です。

const STORAGE_KEY = 'ai-exp-data-v1';

読み込み処理は、localStorageにデータがあればJSONとして復元し、なければ6エージェント分の初期データを作ります。

const loadStore = () => {
  try {
    const raw = localStorage.getItem(STORAGE_KEY);
    if(raw) store.value = JSON.parse(raw);
    else {
      AGENTS.forEach(ag => { store.value[ag.id] = defaultAgentData(ag.id); });
    }
  } catch(e) {
    AGENTS.forEach(ag => { store.value[ag.id] = defaultAgentData(ag.id); });
  }
};
const saveStore = () => {
  try { localStorage.setItem(STORAGE_KEY, JSON.stringify(store.value)); } catch(e) {}
};

try/catchで囲んでいるため、JSONが壊れていた場合でも初期データに戻せます。

保存時は、入力フォームの値を現在選択中のエージェント・実験に反映してからsaveStore()を呼びます。

const saveInput = (exp) => {
  const agId = inputAgent.value;
  if(!store.value[agId]) store.value[agId] = defaultAgentData(agId);
  const expData = store.value[agId].experiments[exp];

  Object.keys(inputData.value).forEach(k => {
    const v = inputData.value[k];
    expData.quantitative[k] = (v===null || v==='') ? null : v;
  });
  // qualitative
  qualItems.forEach(item => {
    if(inputQual.value[item.key]>0) {
      expData.qualitative[item.key].human = inputQual.value[item.key];
    }
  });
  // notes
  if(inputNote.value) expData.notes.human = inputNote.value;
  expData.completed = true;

  saveStore();
  updateProgress();

ここで重要なのは、入力画面から保存される定性評価はhuman側だということです。

expData.qualitative[item.key].human = inputQual.value[item.key];

AI自己評価は、後述のJSONインポートでai_selfだけを取り込む設計になっています。

6. JSONインポート・エクスポート機能

このダッシュボードには、エージェントごとのJSONをダウンロードする機能があります。

const exportJson = (agentId) => {
  const data = store.value[agentId] || defaultAgentData(agentId);
  const blob = new Blob([JSON.stringify(data,null,2)],{type:'application/json'});
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href=url; a.download=`${agentId}.json`; a.click();
  URL.revokeObjectURL(url);
  showToast(`📥 ${agentId}.json をダウンロードしました`);
};

ファイル名は${agentId}.jsonです。たとえばcodex-cliならcodex-cli.jsonになります。

ただし、インポート処理はファイル名ではなく、JSON内部のagent_idまたはmeta.agent_idを見ています。

const data = JSON.parse(ev.target.result);
const agentId = data.agent_id || data.meta?.agent_id;
if(!agentId) { showToast('❌ agent_idが見つかりません'); return; }

つまり、実装上の正確な仕様は次の通りです。

  • エクスポート時のファイル名はagentId.json
  • インポート時の識別子はJSON内部のagent_idまたはmeta.agent_id
  • ファイル名と中身の一致チェックはしていない

ai_selfだけをマージする

インポート処理で一番重要なのは、humanを上書きしないことです。

// Merge ai_self only
const exps = data.experiments || {};
Object.keys(exps).forEach(exp => {
  if(!store.value[agentId].experiments[exp]) return;
  const srcQual = exps[exp]?.qualitative;
  const srcNotes = exps[exp]?.notes;
  if(srcQual) {
    Object.keys(srcQual).forEach(k => {
      if(store.value[agentId].experiments[exp].qualitative[k] && srcQual[k]?.ai_self!==undefined) {
        store.value[agentId].experiments[exp].qualitative[k].ai_self = srcQual[k].ai_self;
      }
    });
  }
  if(srcNotes?.ai_self!==undefined) {
    store.value[agentId].experiments[exp].notes.ai_self = srcNotes.ai_self;
  }
});

自己評価JSONを後から取り込む運用では、人間が確定した評価をAI側のJSONで壊してしまうのが一番危険です。

そのため、このコードでは取り込む対象を次の2つに限定しています。

  • qualitative.*.ai_self
  • notes.ai_self

humanはインポートしません。

この設計により、「人間評価を先に入力しておき、後からAI自己評価だけを追加する」運用ができます。自己評価のバイアスを見るためにも、人間評価とAI自己評価を混ぜないことが重要です。

7. データの「確定値の埋め込み」と「編集可能データ」の分離

このダッシュボードでは、すべてのデータがlocalStorageにあるわけではありません。

実験Dと実験Eのように、すでに確定した評価データはHTML内の定数として埋め込まれています。

// 実験D（他者テスト修正）の確定データ
// データソース: Claudeによるサンドボックス実機検証（30セッション全件）
const EXP_D_DATA = {"meta": {"description": "実験D（他者テスト修正） 評価データ", "target_correspondence_note": "target番号と実際のエージェント名の対応は target-correspondence.md（非公開）で管理。このJSON内のキーは実際のエージェント名で記録する。", "rule_summary": "各エージェントに、自分以外の5エージェントが実装したtask-app（target）を渡し、共通テスト原本（test_api.py 18本・test_ui.py 6本）をそのtargetの実装に合わせて修正させた。テストの観点・期待HTTPステータスコード・本数の変更は禁止。"}, "vendor_map": {"claude-code": "Anthropic", "codex-cli": "OpenAI", "codex-ide": "OpenAI", "antigravity-cli": "Google", "antigravity-ide": "Google", "copilot-agent": "Microsoft"}, "sessions": [

上は冒頭部分の抜粋です。EXP_D_DATAはセッション配列と集計済みのby_modifierを持っています。

Vue側では、この定数をrefに入れて表示用に使います。

const expDData = ref(EXP_D_DATA);

ランキングはEXP_D_DATA.by_modifierから算出しています。

const expDRanking = computed(() => {
  return AGENTS.map(ag => {
    const stat = expDData.value.by_modifier[ag.id] || { pass_rate_pct: 0, total_pass: 0, total_total: 0, violations_count: 0 };
    return {
      id: ag.id,
      passRate: stat.pass_rate_pct,
      totalPass: stat.total_pass,
      totalTotal: stat.total_total,
      violations: stat.violations_count,
    };
  }).sort((a, b) => b.passRate - a.passRate);
});

実験Eも同じです。

const expEData = ref(EXP_E_DATA);
const expEExp = ref('A'); // 'A' or 'B' for matrix view

この分離には利点があります。

  • 確定済みの評価データはlocalStorageリセットの影響を受けない
  • 編集中のA/B入力データとは寿命を分けられる
  • Gitで差分管理しやすい
  • ダッシュボードを開くだけで確定済みのD/E結果は必ず見える

実験用ダッシュボードでは、「まだ入力中のデータ」と「確定済みの参照データ」を分けるだけで、かなり事故が減ります。

8. 自己評価と人間評価の差分を見る

このダッシュボードには、自己評価と人間評価のズレを見るためのヘルパーがあります。

const humanAvg = (ag, exp) => {
  const q = getAgentStore(ag.id).experiments?.[exp]?.qualitative;
  if(!q) return '—';
  const vals = Object.values(q).map(x=>x?.human).filter(v=>v!==null&&v!==undefined);
  return vals.length ? (vals.reduce((a,b)=>a+b,0)/vals.length).toFixed(1) : '—';
};
const selfAvg = (ag, exp) => {
  const q = getAgentStore(ag.id).experiments?.[exp]?.qualitative;
  if(!q) return '—';
  const vals = Object.values(q).map(x=>x?.ai_self).filter(v=>v!==null&&v!==undefined);
  return vals.length ? (vals.reduce((a,b)=>a+b,0)/vals.length).toFixed(1) : '—';
};
const gapVal = (ag, exp) => {
  const h = parseFloat(humanAvg(ag,exp)), s = parseFloat(selfAvg(ag,exp));
  if(isNaN(h)||isNaN(s)) return '—';
  const g = (s-h).toFixed(1);
  return g>0 ? `+${g}` : g;
};

humanAvg()とselfAvg()を別々に計算し、gapVal()で差分を出しています。

この設計にしておくと、単に平均点を見るだけでなく、次のような観点で分析できます。

  • 自己評価が常に高いエージェントはどれか
  • 人間評価より自己評価が低いエージェントはあるか
  • 実験AとBで自己評価の傾向が変わるか
  • レビュー品質と自己認識に関係があるか

AIエージェント比較では、最終スコアそのものよりも「どんな種類のズレが起きるか」の方が重要な場合があります。そのため、最初からhumanとai_selfを分けたデータ構造にしています。

9. 実験E: マトリクスと均質化トラップ

実験Eでは、エージェント同士が互いにコードレビューした結果を扱っています。

レビュー評価はマトリクス表示されます。

<td v-for="target in agents" :key="reviewer.id+'-'+target.id"
    :style="matrixCellStyle(reviewer.id, target.id)">
  <template v-if="reviewer.id === target.id">
    <span style="color:var(--text-dimmer)">—</span>
  </template>
  <template v-else>
    {{ matrixScore(reviewer.id, target.id) }}
  </template>
</td>

セルの背景色はスコアに応じて濃くなります。

const matrixCellStyle = (reviewerId, targetId) => {
  if (reviewerId === targetId) return {};
  const score = matrixScore(reviewerId, targetId);
  if (score === '—') return {};
  // 5(薄)〜9(濃) の範囲を緑の濃淡にマッピング
  const t = Math.max(0, Math.min(1, (score - 4) / 5));
  const alpha = 0.08 + t * 0.30;
  return { background: `rgba(67,217,162,${alpha.toFixed(2)})`, textAlign: 'center', fontWeight: '600' };
};

ここではChart.jsではなく、テーブルセルの背景色でヒートマップ風に見せています。

また、同系統ベンダー同士の評価が甘くなる可能性を見るために、homogenization_trap_analysisという確定データを持っています。

表示用には、A/Bそれぞれを行に展開しています。

const homogenizationRows = computed(() => {
  const rows = [];
  expEData.value.homogenization_trap_analysis.cases.forEach((c) => {
    rows.push({
      key: c.target + '-A',
      vendor: c.vendor,
      target: c.target,
      reviewer: c.same_vendor_reviewer,
      expLabel: '実験A',
      sameScore: c.experiment_a.same_vendor_score,
      otherAvg: c.experiment_a.other_vendor_average,
      gap: c.experiment_a.gap,
    });
    rows.push({
      key: c.target + '-B',
      vendor: c.vendor,
      target: c.target,
      reviewer: c.same_vendor_reviewer,
      expLabel: '実験B',
      sameScore: c.experiment_b.same_vendor_score,
      otherAvg: c.experiment_b.other_vendor_average,
      gap: c.experiment_b.gap,
    });
  });
  return rows;
});

このgapは横棒グラフでも表示しています。

expEGapChartInstance = new Chart(gapCanvas, {
  type: 'bar',
  data: {
    labels: rows.map(r => `${agentLabel(r.target)}(${r.expLabel})`),
    datasets: [{
      label: '同系統評価 − 異系統平均 (gap)',
      data: rows.map(r => r.gap),
      backgroundColor: rows.map(r => r.gap > 0 ? 'rgba(255,107,107,.6)' : 'rgba(67,217,162,.6)'),
    }],
  },
  options: {
    indexAxis: 'y',
    responsive: true, maintainAspectRatio: false,
    scales: { x: { suggestedMin: -3, suggestedMax: 3 } },
    plugins: { legend: { display: false } },
  },
});

indexAxis: 'y'を指定して、横棒グラフにしています。gapが正なら赤系、負なら緑系です。

10. GitHub Pagesでの公開方法

このダッシュボードはHTML 1枚なので、GitHub Pagesで公開する場合も特別なビルドは不要です。

最小構成は次の通りです。

  1. リポジトリにdashboard.htmlを置く
  2. GitHubのSettingsからPagesを有効化する
  3. 対象ブランチとディレクトリを選ぶ
  4. https://<ユーザー名>.github.io/<リポジトリ名>/dashboard.htmlで開く（<...>の部分は自分のGitHubユーザー名・リポジトリ名に置き換えてください。本実験のリポジトリではGitHub Pagesを有効化していないため、このURLは一般的な利用例です）

CDNを使っているため、GitHub Pages上でもVueとChart.jsはそのまま読み込まれます。

注意点はlocalStorageです。localStorageはブラウザ・オリジン単位なので、GitHub PagesのURLで保存したデータと、ローカルファイルで開いたデータは共有されません。

また、localStorageのデータはブラウザ側にしかないため、重要な入力データはJSONエクスポートでバックアップする運用が必要です。

11. 実装上の注意点

最後に、実コードを読む上で気になった点も書いておきます。

ランキング計算は次のようになっています。

const rankedAgents = computed(() => {
  return [...agents.value].map(ag => ({
    ...ag,
    totalScore: Math.round(passRate(ag,'A')*0.4 + parseFloat(qualAvg(ag,'A'))||0*8)
  })).sort((a,b)=>b.totalScore-a.totalScore);
});

この式は演算子の優先順位に注意が必要です。

||0*8は「qualAvgがなければ0にして、それを8倍する」という意味にはなっていません。+や*の評価後に||が効くため、意図があるなら括弧を明示した方がよい箇所です。

この記事では実コードの解説が目的なので修正案には踏み込みませんが、ダッシュボードのスコア計算ロジックは、表示よりも先にテストやコメントで意図を固定しておくと安全です。

12. まとめ

このダッシュボードは、Vue 3 CDN、Chart.js、localStorageだけで作った、AIエージェント比較用の静的HTMLアプリです。

実装上の特徴は次の通りです。

  • 6エージェントを固定配列で管理する
  • 編集可能データはlocalStorageに保存する
  • 確定済みデータはEXP_D_DATA、EXP_E_DATAとしてHTMLに埋め込む
  • 人間評価とAI自己評価をhuman/ai_selfで分離する
  • JSONインポートではai_selfだけをマージし、人間評価を保護する
  • Chart.jsは棒グラフに絞り、進捗バーやヒートマップはCSSとテーブルで実装する
  • GitHub Pagesにそのまま置ける

本格的なWebアプリにするなら、コンポーネント分割、型定義、データベース化などの選択肢があります。

ただ、実験用の可視化ツールでは、HTML 1枚で完結する構成はかなり強力です。特に「データ構造をすぐ変えたい」「ブラウザだけで入力したい」「GitHub Pagesで共有したい」という用途では、Vue CDN + Chart.js + localStorageの組み合わせは十分実用的でした。

13. 関連記事

本記事は、6つのAIコーディングエージェント比較実験シリーズの一本です（Qiita第8回）。
シリーズ全体の記事一覧は、GitHubリポジトリを参照してください。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?