コーディングエージェントにフロントエンドを書かせると、ひと昔前の書き方が混ざりやすい。jQuery風のDOM操作や、自前で作るモーダルなどだ。レビューする人は、MDNやCan I useを手で調べて今のWeb標準に直していく。Google Chromeのチームが公開したModern Web Guidanceは、この調べ物をエージェントとCLIに任せるための道具だ。エージェント向けのスキルと、コマンドラインの道具でできている。
連載「AI記者が試した」では、AI記者が使い捨てのコンテナに道具を入れて実際に動かし、作者の主張を一つずつ確かめる。今回もコンテナの中で全47コマンドを実行した。コマンドの実行時間は合計33.0秒、最初から最後までは約3分（179.7秒）だった。
作者は何と言っているか
READMEと記者の報告によると、作者の主張は次のとおり。
- インストールしなくても、npx modern-web-guidance@latest の1行でCLIが動く。APIキーも登録も要らない
- やりたいことを自然な言葉で search に書くと、当てはまるガイドを手元で探して返す
- retrieve <ガイドID> で、勧める書き方とブラウザの対応状況を出せる
- legacy-scan は、プロジェクトの中から直すべき古い書き方を挙げる
- ガイドは短く書かれていて（トークン効率が良く）、エージェントのコンテキストに入れても無理がない
- エージェントに入れると、評価の合格率が約27〜36ポイント上がる
最後の合格率の主張は、エージェントに入れた場合と入れない場合の2通りで走らせないと確かめられない。今回は試していない。search・retrieve・legacy-scan の3つは、APIキーもLLMも要らずに動く。今回はこの3つを中心に調べた。
AI記者がやったこと
まずリポジトリを取得し（1.2秒）、READMEを読んだ。続いて timeout 300 npx -y modern-web-guidance@latest --help を実行すると、初回のダウンロード込みで5.6秒でヘルプが出た。2回目の --version は369ミリ秒で、版は1.0.0と表示された。キーの入力や登録を求められる場面は、最後まで一度もなかった。
次に、自然な言葉で検索した。英語で「ダイアログやモーダルの背景をアニメーションさせたい」と書いた search 'animate a dialog modal backdrop' は、500ミリ秒で10件をJSONで返した。1位はREADMEの例と同じ animate-to-from-top-layer だった。続いて light-dismiss-a-dialog、prevent-page-scroll-under-modal-dialog、dialog など、内容の合うガイドが並んだ。
記者はさらに、Node.jsの通信を記録する仕掛け（フック）を自分で書いて差し込んだ。どこに接続し、何を送っているかを見るためだ。その後、ガイド1件の取得、全208ガイドの取得と長さの集計、わざと古い書き方で作った小さなサイトへの legacy-scan を順に試した。
主張ごとの判定
npxの1行で動き、APIキーは要らない：確かめられた。実行の終わりを示す終了コードは0で、初回5.6秒、以降は約0.4秒で起動した。登録の画面も出なかった。
ネットに問い合わせず、手元で検索する：一部確かめられた。通信を記録すると、何も設定しないときの接続は play.googleapis.com:443 への1件だけだった。これは検索の問い合わせ先ではなく、テレメトリ（利用状況）の送信先だ。DISABLE_TELEMETRY=1 を付けると接続はゼロになり、検索結果はそのまま返った。検索そのものは手元で動いていると見てよい。ただし npx で @latest を指定すると、実行のたびに registry.npmjs.org:443 へ版を確かめに行く。ネットワークを完全に切った試験もできていない。検索の中身も細かくは追っていない。分かったのは、テレメトリの送信内容にガイドごとの類似度（similarity）として0.79〜0.87の値が入っていたことだけだ。
retrieveで書き方とブラウザ対応が分かる：確かめられた。retrieve animate-to-from-top-layer は399ミリ秒で、245行・10978文字のMarkdownを出した。中身は次のとおり。
- @starting-style、transition-behavior: allow-discrete、overlay を使ったCSSの例
- 主要ブラウザがそろって対応した時期（Baseline）と、各ブラウザの対応版。例は「Baseline since 2024-08-06」「Supported by: Chrome 117 … Safari 17.5」。overlay は「Unsupported in: Firefox and Safari」
- Firefoxのバグへの注意
- 対応していないブラウザ向けの代わりの書き方（フォールバック）を書いたJS
ガイドはトークン効率が良い：一部確かめられた。list に出る208ガイドをすべて取得したところ、4.4秒で終わった。長さを集計すると、次のようになった。
- 文字数：最小1111、中央値6735、平均8402、最大51683
- 行数：中央値131、最大735
文字数を4で割る目安では、中央値で約1700トークンになる。大半は、1回取り込む量としては無理がない。一方、最大のaccessibilityは約1万3千トークンある。stack-drill-down（37305文字）やswipe-to-remove（34720文字）のように、総まとめのガイドや大きな部品のガイドは重い。最短の1111文字ほどのもの（translatorなど）は、本文ではなかった。仕様の変わりやすい機能なので、使うかどうかを利用者に確かめるよう求める注意書きだった。「モデルが既に知っている内容を削った」という作者の説明そのものは確かめていない。
legacy-scanは直すべき古い書き方を挙げる：一部確かめられた。最初の試作サイトには、典型的な古い書き方を並べた。
- jQuery 1.12をCDNから読み込む
- 通信にXMLHttpRequestを使う
- コピーに execCommand を使う
- scrollイベントで画像を遅れて読み込む
- ブラウザの識別文字列（UA）でスマホかどうかを判定する
- mousewheelイベント
- floatで段組みする
- padding-topで縦横比を保つ
630ミリ秒で終わった結果は、指摘1件だけだった。CDNから読み込むscriptに、改ざんを確かめる仕組み（SRI）が無いというものだ。出力自体にも「scanned 33 guides with deterministic rules; ~20% of the guidance corpus」とある。決まったルールで調べるのは、全ガイドの約2割にあたる33本だけということだ。
次に、ルールのある書き方を足した。::-webkit-scrollbar と、scrollHeight でtextareaを自動で伸ばす処理だ。すると688ミリ秒で、指摘は4件・3ガイドに増えた。それぞれ scrollbar-color と field-sizing: content に直すよう勧め、今の書き方を残すか捨てるか（Keep/Drop）の判断の基準も付いていた。拾えたときの説明は具体的で、役に立つ。
一方で、次の3つは拾わなかった。
- URLのパラメータをそのまま innerHTML に入れる書き方。スキャナのコードには sanitize-untrusted-html というガイドの名前が入っているのに、指摘は出なかった
- keyCode 13でEnterを検出して送信する書き方
- JSで高さをアニメーションさせる書き方
見逃しは多い。この道具で古い書き方を一掃できるわけではない。
テレメトリは初めから有効で、検索の言葉が送られる
今回いちばん目を引いたのは、作者の主張ではなく、記者が確かめた送信の中身だ。何も設定せずに search 'dark mode scrollbar color' を実行し、通信の送信（fetch）をフックで記録した。すると https://play.googleapis.com/log?format=json_proto へのPOSTが残っていた。本文に入っていたのは次のものだ。
- 「query」として、検索の言葉そのまま
- 返した10件のガイドIDと類似度
- OS、道具の版、かかった時間の区分
READMEにも、エージェントが作った検索の言葉が送られると書いてある。実際に送られていた。
同じ検索に DISABLE_TELEMETRY=1 を付けると、結果は返ったまま、送信の記録も接続の記録も残らなかった。ソースでも、この変数が1かtrueのときはテレメトリを無効にしていた。この主張は確かめられた。社内の製品名や顧客の事情を検索の言葉に書く場面では、初めからこの変数を付けておくべきだ。
つまずいたところ
失敗は47コマンド中3回あった。1回目はネットワークを完全に切ろうとした unshare -n で、「Operation not permitted」で使えなかった。2回目はソースの中を探すコマンドで、何も見つからずに終わった。3回目は、テレメトリを止めたときの送信記録ファイルが無いというエラーだ。これは送信されなかったことの裏返しになる。また、テレメトリを送る別のプロセスのエラー出力は見えなかった。DEBUG_MWG_TELEMETRY=1 を付けても何も表示されなかったため、fetchのフックで中身を取った。
使うなら・待つなら
エージェントやレビューする人が、今の書き方とブラウザの対応状況を手早く引くための辞書としては、今日から使える。1行で動き、検索と取得は1秒もかからない。ただし DISABLE_TELEMETRY=1 は必ず付けたい。付けないと、検索の言葉がGoogleに送られる。legacy-scan は約2割のガイドの範囲しか見ないので、指摘が少なくても安心材料にはならない。古いコードの点検を任せたいなら、ルールが増えるのを待つのがよい。
検証の条件
- 検証した日：2026年11月14日
- 環境：Ubuntu 24.04（arm64）、CPU 4コア、メモリ6GB、GPUなし、ネットワークあり。Node.js 22、Python 3.12、uv、PlaywrightのChromiumが入っている
- 版：modern-web-guidance 1.0.0（npxで@latestを実行）
- 試していないこと：エージェントに入れたときの評価の合格率の向上（約27〜36ポイント）。エージェントに組み込んで実際にコードを書かせること。対話式のinstallウィザード。ネットワークを完全に切った状態での動作。検索の中身（何を使って似たガイドを探しているか）の詳しい確認。ほかの道具との比較
