公式発表・概要
Modern Web Guidance 1.0 が正式リリースされた
コーディングエージェントに、Webの専門知識とブラウザ互換データを直接覚えさせる仕組み「Modern Web Guidance」の安定版1.0が出た、という公式発表です。5月のGoogle I/Oで先行公開されたものの正式版になります。
何が新しいのか
- モダナイズ(今風への書き換え)の流れが新しく入りました。既存のコードを走査して、古い書き方を安全に新しい書き方へ移す候補をエージェントに見つけさせる仕組みです。
- ガイドの数が増えました。AIが間違えやすいと確認された知識の穴を対象に、専門家が確認したガイドが数百件規模で用意されています(v1.0では203ガイド、250のWeb機能が対象)。
- 人の専門家による確認が厚くなりました。全ガイドに分野の技術リーダーの承認が入り、利用者向けガイドにはアクセシビリティの専門確認も入っています。
- 評価(eval)が全ガイドに行き渡りました。ガイドあり/なしの差を測る公開ダッシュボードで、改善が数値で見られます。
- ブラウザ横断の取り組みになりました。FirefoxとEdgeが加わり、Chromeだけの話ではなくなりました。土台は各ブラウザの対応状況をそろえて示すBaselineです。
なぜ要るのか
今の有力なモデルでも、動くコードは書けます。ただ専門家が見ると、速くできる、アクセシブルにできる、安全にできる余地がほぼ毎回残ります。学習データに古い書き方が多いためです。Modern Web Guidanceは、その不足分をエージェントの作業中に補います。
モデルが落としやすい分野として、発表では次が挙げられています。アクセシビリティ(キーボードのフォーカス、動きを減らす設定への対応、フォーム検証)、使い心地(スワイプ、ダイアログやポップオーバーの遷移、ライト/ダークテーマ)、性能(メインスレッドのタスク分割、画面外の描画の省略、レイアウトのずれ防止)、セキュリティ(HTMLの無害化、厳しいContent Security Policy、パスキーの資格情報管理)です。
もう一つの考え方は「その仕事に一番合うWeb機能を使う」ことです。JavaScriptで作り込んでいたものを、HTMLやCSSの標準機能で済ませると、コードが減り、ブラウザ側で処理されるため速く、アクセシビリティも付いてくることが多い、としています。例として、ポップオーバーとダイアログのアニメーション、スクロールやスワイプの操作、ページ遷移、パスキーとWebAuthn、自動入力(autofill)が挙げられています。
入れるには
npx modern-web-guidance@latest install
以前の版が入っている場合は更新します。
npx modern-web-guidance@latest update
既存コードのモダナイズは、エージェントにこう頼む形でも起動します。
/modern-web-guidance Modernize the code in this directory
DevTools for agentsとの組み合わせ
発表は、Chrome DevTools for agentsと併せる使い方を勧めています。役割分担は明確です。Modern Web Guidanceは「書く前に必要な知識」を与え、DevTools for agentsは「書いたものを実際のブラウザで確かめる目」を与えます。性能目標まで直す、動き(アニメーション)を録画して確かめる、画面をメモリに保持する作りでメモリ漏れがないか見る、といった使い方が例に挙げられています。詳しくは動画の解説ページを見てください。
発表に載っている成果の数字
各社の詳しい話は、このサイトのケーススタディのページに分けてあります。
原文を読む:Modern Web Guidance 1.0: The web platform expertise your coding agent is missing
短縮URL(投稿の記載):https://goo.gle/4Cgnnfc / 解決先:https://developer.chrome.com/blog/modern-web-guidance-v1