こんにちは。LayerX バクラク事業部 SWEの@toshi1127と申します。 AI-UX プロダクト開発グループで、AIを活用したプロダクト機能の開発を担当しています。
今回は、LayerX Web Frontend Night #3の主催者として、9月24日に開催した「LayerX Web Frontend Night #3 - AI-Ready Frontend Quality」を振り返ります。
まずは、平日の夜にもかかわらず、オフライン・オンライン合わせて多くの方にご参加いただき、良い感想をいただけたことがとても嬉しかったです。ありがとうございました。 そして、登壇者の皆様、運営を支えてくださった方々、ありがとうございました。
このブログでは、なぜこのテーマを選んだのか、勉強会で得られた学びをお伝えしたいと思います。
LayerX Web Frontend Night の歩み
LayerXでは、フロントエンド技術の知見共有とコミュニティ形成を目的として、定期的に「LayerX Web Frontend Night」を開催しています。
このイベントを始めた背景には、以下のような想いがありました：
- LayerXのWeb Frontendに関する"実践的な"活用事例を共有するだけでなく、社外の方からの知見も積極的に取り入れる場が欲しい
- LayerXの行動指針"徳"の観点から、このイベントを継続的に開催することでWeb Frontendの裾野を広げていきたい
これまでの開催実績は以下の通りです：
- #1 Unleash Next.js：「Next.jsの力を解き放て！」をテーマに、Next.jsを活用したプロダクトをお客様に届ける上での工夫や、TurbopackやAI SDKなどの最新技術について
- #2 Exploring State：「Webフロントエンドにおける状態管理」をテーマに、ツールやテクニックの話にとどまらない、実際に取り組んできた状態設計の課題と解決策について
そして今回のAI-Ready Frontend Qualityでは、AI時代の到来により大きく変化するであろう「AI時代の品質保証」をテーマにすることにしました。
なぜ「AI時代の品質保証」をテーマにしたのか
2023年以降、ChatGPTをはじめとする生成AIの普及により、コーディングの速度は飛躍的に向上しました。しかし、この変化は単純に「開発が速くなった」という話ではありません。
AIが短時間で大量のコードを生成するため、コードレビューやテストの負荷が増加しています。
さらに、AIによるコーディングの品質を高く保つためには、要件をより詳細に定義し、設計を事前にしっかりと定めるなど、内部品質・外部品質を向上させるための工夫が必要になります。
このような変化により、品質保証プロセスや開発フローそのものが大きく変わる可能性があります。AIが生成するコードの品質をどう担保するか、人間とAIがどのように協業すべきか、そして従来の品質保証の手法がAI時代にどう適応すべきかという、課題が各社で生じているのではないかと考え、現場で実際に取り組んでいる方々の知見から学びたいと思い、今回のイベントを企画しました。
各セッションを通して見えたこと
Junさん「AI時代のフロントエンド開発には、仕様書に載らない情報の言語化が重要ではないだろうか」
主なポイント
- 問題意識: Structured Communication がボトルネック
- AIがコード生成を担うようになるにつれ、課題は「開発プロセス全体をどう整理・構造化するか」に移る。
- 特に「人間のコミュニケーションを整理して記録する」ことが重要になる。
- 取り組みと気づき: 仕様書・テストの自動生成を試した結果
- mastraで仕様書、Shortestで自然言語テスト、Playwright自動生成を試した。
- しかし網羅性や安定性の課題に直面し、「仕様書＋テストだけでは足りない」と実感。
- margin/paddingやアクセシビリティ、デザイン変更理由など「仕様書に載らない情報」が多く存在する。
- 具体策: 言語化とドキュメント化の工夫
- Jestスナップショットやa11yツリー出力でUIやアクセシビリティを記録。
- リポジトリ内に開発過程のメモを残す。
- 将来的にはClaude Codeやレビューツールで自動的に扱える仕組みを検討。
- 結論: フロントエンド開発では特に「仕様書に載らない情報の言語化」が重要
- 曖昧で属人的になりがちな知識をコードの近くに残す工夫が、AI時代の品質保証につながる。
これまでの開発では、特に少人数で新規プロダクトを立ち上げる際など、「チーム内で共有できていればよい」と“暗黙知を許容する”場面も多かったと思います。
しかし、Coding Agentが生成するコードの精度を高めたり、チーム内の認識齟齬を防ぐためには、「人間同士のコミュニケーションをいかに整理し、記録するか」がこれまで以上に重要になると感じました。
そのための一つの工夫として、煩雑なドキュメントでも良いとハードルを下げて、開発過程で議論や気になったことを、リポジトリ内にコミットして残しておくことは、試しやすくひとつの選択肢としていいかもと思いました。
akfm_satoさん「あなたは高い技術力を持ったテックリードです。AI Agentを使いこなして高速な実装と高い品質を両立させて下さい。」
主なポイント
- 品質とは「誰かにとっての価値」
- 外部品質（ユーザーにとっての価値: 安定性、UX、セキュリティ等）と内部品質（エンジニアにとっての価値: 変更容易性、可読性、拡張性等）の両面がある。
- 品質保証の3要素
- 検査（テスト）・予防（内部品質）・サポート（問題対応）の3つで成り立つ。
- AIと人間の棲み分け
- AIが担えること: テストケース作成、原因特定の補助、設計の壁打ちなど。
- AIが担えないこと: 要求の言語化やリリース可否判断、内部品質の評価、主体性や信頼関係。
- 👉 AIに求めるべきは品質保証の「能力」ではなく「労力」
- 「丁寧な指示」と「AIが担う労力 >>> 指示労力」を意識することが重要
- コーディングはAIが担えるが、重要になるのは「指示の質」。
- 「AIが担う労力 >>> 指示労力」でなければ生産性は高まらない。
「AIは品質保証の“能力”を代替するのではなく、“労力”を肩代わりする存在」という視点がとても印象に残りました。 要求の言語化やリリース可否判断、内部品質の評価、主体性や信頼関係など、本質的な部分はやはり人間の専門性に依存します。だからこそ、AIが担えない領域でどう価値を発揮するか、そして専門性を持ち続け、自らの心構えを問い直すことが欠かせないのだと、改めて気づかされた登壇内容でした。
teyamaguさん「フロントエンドの品質保証はAIに任せられるか？」
主なポイント
- 品質は氷山の一角
- バグやUIなど「見える品質」だけでなく、メンテナンス性・パフォーマンス・UX・セキュリティなど「見えにくい品質」が存在する。
- AIがもたらす品質の不可視化
- AI生成コードは表面的な品質要件を満たしても、「意図」や「設計思想」が失われやすい。
- 大量コードを隅々までレビューすることは、人間にとって現実的ではなく、従来の前提が崩れる。
- 変わるのはHOW、人間の役割
- 品質保証活動の本質（WHY）は変わらないが、AIが介入することで手法（HOW）や人間の関わり方が変わる。
- AI時代の3つの思考軸
- 品質はバグの有無だけではない。より広い視点から内部品質、外部品質を再定義するべき。
- 品質保証は多面的な活動で構成されるものであり、最終的には人間が決めること。テストは、品質保証活動の一部であり、それだけでは不十分。
- AIを「作業のショートカット」としてではなく、「意思決定を支援する羅針盤」として使いこなすことが重要。
- リーダーシップと組織文化の重要性
- 新しい技術に挑戦できる心理的安全性。
- AIに依存しすぎない、常に「なぜ？」を問い続ける文化。
「AIがもたらす品質の不可視化」という言葉がとても印象的で、AIは表面的なバグやUIといった“見える品質”を満たしてくれる一方で、設計思想や意図といった“見えにくい品質”を見落としやすいのは過去の開発経験からも強く共感できるものでした。 その不可視化に対抗するためには、思考停止を避け、品質に責任を持ち「なぜ？」を問い続ける文化やAIが見えにくい品質の部分までできるだけ汲み取ってくれるように上手に協業することが不可欠だと改めて感じました。
Takepepeさん「どの様にAIエージェントと協業すべきだったのか？」
主なポイント
- AIエージェント利用への期待と落差
- 最初は「察してくれる」「爆速でコードを書く」など期待が大きいが、徐々にバグ再発や認識齟齬、低品質コードへの苛立ちが積み重なり、依存のリスクを痛感する。
- 開発のフェーズごとの、Coding Agent利用の振り返り
- 生成期 (0→1)： 圧倒的速度で土台を作れるフェーズ。AI活用のメリットが大きい。
- 構成期 (1→10)： 環境構築を爆速でこなせるが、過信が芽生えやすい。
- 実装期 (10→90)： 大量実装で速度は出るが、出力のブレやルール逸脱に悩まされ、齟齬が目立つ。
- 成熟期 (90→99)： バグ修正やパフォーマンス改善ではAIが限界を露呈し、人間による職人芸や感覚が必要になる。
- 完成期 (99→100)： 細部の品質やガイドライン遵守はAI任せにできず、人間が監査・判断を担う必要がある。
- AIの品質を問う前に、自分の心構えを問うこと
- 品質に関しては常に疑い、AIと人間の間に認識齟齬がある前提で進める。
- 品質責任は人間が持ち続け、頼り切らないこと。
- フェーズが進むほど摩擦は増えるため、早めに人間が介入して巻き取ることが大切。
開発のフェーズごとにCoding Agentの振り返りをされているのが印象的で、Coding Agentとより上手に協業するために、どのフェーズで、AIと人間がどう役割分担すべきかを振り返ることは、とても良いアプローチだと感じました。 自分の開発しているプロダクトでも、フェーズごとの整理はぜひ真似したいと思いました。
イベントを終えての学び
今回のイベントを通じて、AI時代の品質管理という大きく抽象的なテーマから、「品質とは何か？」「品質保証はどんな要素から成り立つのか？」「AIを利用した開発はどうあるべきか？」といった問いが整理され、まさにAI時代にエンジニアとしてどう活躍し、AIをどう活用していくかの解像度が格段に上がりました。
各登壇者のお話を聞いて改めて感じたのは、AIが開発の速度を上げる一方で、品質保証に対するエンジニアの向き合い方が大きく変化しているということです。特に印象的だったのは、AIは品質保証の「能力」を代替するのではなく、「労力」を肩代わりする存在である、という視点でした。要求の言語化やリリース可否の判断、内部品質の評価、主体性や信頼関係といった本質的な部分は、人間の専門性に依存するのだと強く感じました。
勉強会での学びを活かし、自分たちのチームやシステム、運用においても、「どこができていて、どこができていないのか」を言語化・整理することに取り組んでいきたいと感じました。
アーカイブ動画のご案内
今回のイベントのアーカイブ動画を公開いたしました。当日ご参加いただけなかった方や、もう一度内容を振り返りたい方は、ぜひご覧ください。
各登壇者の詳細な発表内容や、質疑応答の様子も含まれておりますので、AI時代の品質保証についてより深く学びたい方におすすめです。
おわりに
今回のLayerX Web Frontend Night #3は、平日の夜にもかかわらず多くの方にご参加いただき、無事満足度の高い形でイベントを終えることができました。アンケートでもたくさんのフィードバックをいただき、大変嬉しく思います。改めて、ご参加いただいた皆様、登壇者の皆様、運営を支えてくれた方々に心より感謝申し上げます。
AI時代の品質保証というテーマは、まだ答えのない大きな課題ですが、今回のイベントを通じて、現場で実際に取り組まれている方々の知見を共有でき、多くの学びを得ることができました。このような議論の場を継続的に作っていくことで、Webフロントエンドの裾野を広げ、コミュニティ全体の技術力向上に貢献していきたいと考えています。
もし「こんなテーマで勉強会を開催してほしい」、「合同で開催したい」といったご要望がございましたら、XからDMをいただけると大変嬉しいです。皆様のご意見を参考に、より良いイベントを作っていきたいと思います。
最後に、現在LayerXでは、フロントエンドエンジニアを募集しています！
少しでもご興味をお持ちいただけましたら、ぜひカジュアルにお話しさせてください！
Xの@LayerX_techアカウントではLayerXの様々な取り組みを発信していますので、ぜひこちらもフォローしてください。
最後までお読みいただきありがとうございました。
