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