AIのReact習熟度を測る

2026-06-20 ZennFes Spring オフラインイベント@日比谷

Transcript

1. AIのReact習熟度を測る 2026-06-20 ZennFes Spring オフラインイベント@日比谷
2. 発表者紹介 uhyo 株式会社カオナビ フロントエンドエキスパート TypeScriptの人と思われがちだが 最近Reactの話ばかりしている…… 2
3. 最近Zennでやっていること 3
4. 最近Zennでやっていること 4 独自のReact習熟度を測るベンチマークを作成し、 新しいモデルが出るたびに測定している。 （主にClaude Codeが対象）
5. React習熟度ベンチマーク 5 小さいReactアプリケーションをAIに実装させる。 あらかじめ決められた採点基準に基づき、 別のモデルが実装を読んで採点する。
6. React習熟度の主な採点基準 6 •Reactのベストプラクティスを運用できているか • 良いステート設計, useEffectのアンチパターン, etc •新しいReactのAPIを使いこなせるか • 主にSuspense関連 •アクセシビリティ・セマンティクス観点 • ちゃんとしたマークアップを書けるか
7. React習熟度の採点 7 •13のテストケース（スペック）がある •各スペックは6つのカテゴリで採点される （カテゴリごとに1～5点） •それぞれのカテゴリの点数に傾斜をかけて 100点満点とする • 傾斜のかけ方はスペックごとに異なる
8. 傾斜の例 0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100% Spec 001 Spec 005 Spec 009 Spec 013 Specごとのスコア割り振り 状態設計 Effect衛生 コンポーネント設計 TypeScript品質 パフォーマンス アクセシビリティ 8
9. ベンチマーク結果 9
10. 総合スコア 10 61.69 66.46 70.23 71.46 75.72 78.15 79.38 81.33 84.03 85.62 60 65 70 75 80 85 90 Haiku 4.5 Sonnet 4.6 Opus 4.6 high GPT-5.4 Opus 4.7 high Opus 4.7 max Opus 4.8 high Fable 5 high Opus 4.8 max Fable 5 max* Fable 5 maxは参考値（不完全なベンチマークのため）
11. データの見方と注意 •Opus 4.7以降のモデルはeffort=highと effort=maxで計測 •Opus 4.7以降は3回実行の平均（それ以前は1回だけ） 11
12. データから分かること Opus 4.6→Opus 4.7→Opus 4.8は着実にスコアが 伸びている。 4.7や4.8は劣化したという評判もあるが、 React習熟度に関しては確かに成長している。 12
13. データから分かること Effortをhighからmaxに上げると、 React力が上がる。 （それはそう） 13
14. データから分かること Fable 5はもちろんOpus 4.8よりさらにReact力が 高い。しかし、成長は小幅。 Opus 4.7 → Opus 4.8 のほうが飛躍していた。 Fable 5 (effort=high) とOpus 4.8 (effort=max) を 比較した場合だと、まだOpus 4.8のほうが強い。 14
15. カテゴリ別スコア Opus 4.6～Fable 5 15 0 0.5 1 1.5 2 2.5 3 3.5 4 4.5 5 State Architecture Effect Hygiene Component Design TypeScript Quality Performance Awareness Accessibility & Semantics Opus 4.6
16. カテゴリ別スコア Opus 4.6～Fable 5 16 0 0.5 1 1.5 2 2.5 3 3.5 4 4.5 5 State Architecture Effect Hygiene Component Design TypeScript Quality Performance Awareness Accessibility & Semantics Opus 4.6 Opus 4.7
17. カテゴリ別スコア Opus 4.6～Fable 5 17 0 0.5 1 1.5 2 2.5 3 3.5 4 4.5 5 State Architecture Effect Hygiene Component Design TypeScript Quality Performance Awareness Accessibility & Semantics Opus 4.6 Opus 4.7 Opus 4.8
18. カテゴリ別スコア Opus 4.6～Fable 5 18 0 0.5 1 1.5 2 2.5 3 3.5 4 4.5 5 State Architecture Effect Hygiene Component Design TypeScript Quality Performance Awareness Accessibility & Semantics Opus 4.6 Opus 4.7 Opus 4.8 Fable 5
19. カテゴリ別スコア Opus 4.8 high vs max 19 0 0.5 1 1.5 2 2.5 3 3.5 4 4.5 5 State Architecture Effect Hygiene Component Design TypeScript Quality Performance Awareness Accessibility & Semantics Opus 4.8 Opus 4.8 max
20. カテゴリ別スコアから分かること •モデルの進化とともに全体的に伸びる •しかしTypeScript Qualityはもうサチっている •Component Designはeffortを上げるのが効く。 余談: Claudeに実験レポートを書かせていたが、Opus 4.7に なってから「効く」を連発するようになってつらい…… 20
21. なぜこれをやっているのか 21
22. 自分の評価軸を持ちたい 他人が言っている評判や中身を良く知らない ベンチマークだけに頼るのではなく、 自分自身が重要視する方法でAIを評価したい。 他のベンチマークを否定したいわけではなく、 評価軸は多いほうがいい。 22
23. 自分の評価軸を持ちたい 結果: 「Opus 4.7以降が微妙だからOpus 4.6を勧める人 もいるけど、Opus 4.6はアクセシビリティ弱めだ から注意してね」 のようなことをデータに基づいて言える。 23
24. 自分の価値観を大事にしたい このAI時代でもコードの保守性・良いコードなど は重要だと思っている。 その上でAIを自分なりに活用していくために、 AIの能力を測定する必要がある。 24
25. 単純に評価手法を持ちたい このベンチマークがあれば、例えば 「プロンプトの工夫はスコアに効くのか？」 といった検証もできる。 レビュー工程を追加することでスコアが +4～+7されることを発見した方も → 25
26. 得意領域を持ちたい AIにいかに長く、複雑な仕事をさせるかといった 領域では競合がたくさんいる。 しかし、今のところAIのReact習熟度を評価する ことは人間がReactに詳しくないとできない。 実際、このベンチマークはFable 5までの進化を 捉えることに成功している。 26
27. 今後の展望 27
28. Fable 5 effort=max を評価したい 本当は今日の発表までにFable 5 effort=maxの ベンチマークを終わらせる予定だったが、 Fable 5が止まってしまった…… （ちなみにmaxではないFable 5も5時間枠を4回くらい使い切った） 28
29. 逆風: claude -p の課金方法変更 claude -pでClaude Codeを実行する場合、 サブスク枠とは別のクレジットを消費するようになる 予定。（6/15の予定だったが1度延期された） Claude Maxの場合月に$100を超えると追加課金が 必要。 Fable 5 maxのベンチマークは1回で$200くらい 飛びそう…… 29
30. さらに高度なスペックへ 最初スコア60台から始まったベンチマークが、 もうスコア80台後半までインフレしている。 これまでのところAIの進化を順調に捉えられてい たが、より難しいベンチマークにしないとこの先 は難しいかもしれない。 30
31. まとめ 31
32. まとめ •AIのReact習熟度を測るベンチマークを作成し、 Sonnet 4.6～Fable 5までの進化を数値的に捉え ることができた •ベンチマークを作ったことで、自分なりの評価軸 でAIを評価できるようになった •今後のベンチマーク代どうしよう…… 32