評価・デモ・AI知識ギャップ

コード生成の先：Modern Web Guidanceで学び続ける

元の資料：Beyond code generation: Using Modern Web Guidance for continuous developer learning
2026年11月11日（Chrome for Developers ブログ、Tara Agyemang）

このページには実際に動く作例があります。

エージェントに書かせる時代に、自分の理解をどう伸ばすか。Modern Web Guidanceを「速く書く道具」ではなく「学ぶ道具」として使う方法をまとめた記事です。

前提

モーダルのフォーカス管理、カスタムなセレクト、入退場のアニメーション、画面外の描画省略など、かつて重いJavaScriptや壊れやすい工夫が要ったことが、今はブラウザ標準でできます。ただモデルの学習データでは、過去10年分の古いコードが直近1年分を量で上回ります。ガイドなしのエージェントは古い習慣に寄り、公開評価の約1,000回の実行では、現代的なWebのチェック合格率は約60%でした。ガイドがあると80〜90%に上がります。

記事の主張は、エージェントがガイドに基づいて新しい書き方を選んだとき、それがそのまま学習の機会になる、というものです。1.0では、エージェントは使ったガイドを黙って使わず、何を選んでなぜそうしたかを説明するよう設計されています。

学び方1：返答の末尾の「Modern Web Guidance」欄を読む

1.0のスキルは、ガイドを使った返答の末尾に欄を付けます。内容は、適用したガイドID（適用がなければ確認した話題）、使ったAPIやCSSやフォールバックと、それが防ぐ問題、判断の元になったガイドの規則の引用です。

例として、モーダルな <dialog> やポップオーバーの出入りでは、ガイドなしの実行は6回中5回が現代的な入退場のCSSを使えず、6回とも prefers-reduced-motion を落としました。ガイドありでは、ボタンのInvoker Commandsで宣言的に開く、背景のスクロールは body を固定せず overscroll-behavior: contain で止める、入場は @starting-style、退場は transition-behavior: allow-discrete で待つ、という選択と理由が返答に残ります。

学び方2：AGENTS.mdに「教える」指示を足す

プロジェクトの AGENTS.md に、使った機能について小テストを出す、作業しながら選択を説明する、といった指示を足せます。「何を書くつもりだったか、何を見落として、ガイドで何を変えたか」を言わせる形が例に挙げられています。

学び方3：Baselineで段階的な強化（プログレッシブ・エンハンスメント）を学ぶ

各ガイドにはBaselineの対応状況と、具体的なフォールバックの方法が一緒に書かれています。例はカスタムな <select> です。ガイドなしのモデルはこの課題で44%でした（<div> で作り直してラベルや名前を落とし、キーボード操作とフォーム送信を壊したため）。ガイドありでは92%で、appearance: base-select と ::picker(select)、<selectedcontent> で標準のセレクトを装飾する書き方になります。未対応のブラウザでは中のボタン等が無視され、標準のセレクトとしてそのまま動くため、段階的な強化として安全だという理由までガイドに書かれています。

学び方4：既存コードの監査を頼む

変える前に、部品やプルリクエストの監査だけを頼むのも学び方です。記事のプロンプト例をそのまま使えます。

Use Modern Web Guidance to audit our collapsible FAQ component (ProductFAQ.tsx). Don't edit yet. What native HTML and CSS could replace our accordion JavaScript and keep collapsed answers searchable?

この監査で出てくる典型が、閉じた中身をページ内検索にヒットさせる方法（<details> の name 共有、または hidden="until-found" と beforematch）と、高さ auto へのアニメーションをJavaScriptの計測ではなく interpolate-size: allow-keywords や calc-size() で行う方法です。前者はこのサイトのMetaMaskの事例でも実際に直されています。

学び方5：ターミナルでカタログを直接読む

# これから作るものに合うガイドを探す
npx modern-web-guidance@latest search "animate a dialog modal backdrop"

# ガイドの一覧
npx modern-web-guidance@latest list

# 特定のガイドを読む
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"

ガイドは背景の説明を省いた作りで、読むと、その課題の現代的なAPI、境界条件、フォールバックに絞った一覧が得られます。このサイトにも、検索の感触を試せる簡易な作例を置きました。

学び方6：リリースノートを追う

GitHubリポジトリのリリースを見ると、どの機能がBaselineに達したか、どの書き方が専門家の確認で更新されたかが分かります。新しいガイドと更新されたガイドが版ごとに並びます。