Agentic Code中に注意すべきフロントエンドの勘所

Agentic Coding勉強会 ~クラシルでの実践編~

Transcript

1. Agentic Code中に注意すべき
 フロントエンドの勘所（小ネタ）
 2025/10/27 クラシル株式会社 橘井 貴輝
2. 自己紹介
 橘井 貴輝（きつい たかき）
 クラシル株式会社 フロントエンドエンジニア
 • 2015年〜 営業、SESなどを従事
 • 2024年9月〜 クラシルへ入社
 • Vue, React, TypeScript…
 

3. アジェンダ
 1. フロントエンド実装の際の注意点概要
 2. アクセシビリティ対応
 3. ARIAロールの誤用
 4. useEffect の誤用
 5. まとめ
 

4. フロントエンドは意外と複雑
 主な例
 • 考慮すべき端末や環境の多さ
 • セマンティックHTML
 • 無駄な JavaScript のコントロール
 ◦ Server Component
 ◦ Zero Runtime CSS in JS 
 • 楽観的UI
 • 画像最適化
 • etc…

5. アクセシビリティ対応
 Webアクセシビリティとは 
 • ありとあらゆる人がWebサービスを利 用できる状態
 • キーボード操作、色の識別、読み上げ 対応 etc…
 
 主な例
 ナビゲーションスキップ、セマンティック HTML etc…

6. WAI-ARIAの誤用

7. useEffect の誤用
 React = UIライブラリ、 useEffect = 避難ハッチ 
 • React でコード生成をした場合に誤った出力がされがち
 • そもそも useEffect が難しいので仕方がない
 • React はあくまでもUIライブラリであり、 useEffect は React 外のブラウザDOMとの 架け橋となってくれる機能
 ◦ 本当に useEffect を使うべき? 🤔
 ◦ 可読性・パフォーマンス悪化に繋がりかねない 

8. 「フロントをさくっとAI出力」も割と怪しい 
 • 最低限のアクセシビリティが担保できているか
 • 全ての仕様を網羅することは不可能なので lint で縛る
 ◦ Markuplint
 ◦ Biome or ESLint
 • さくっとAI出力ができるからこそ興味関心も広がる
 まとめ

9. End