HN 日本語サマリー

← 一覧へ戻る
Web開発

Show HN: コーディングエージェントを約2019年のJavaScriptからモダンなWebプリミティブへ移行させよう

Show HN: Get your coding agent off ~2019 JavaScript, onto modern web primitives (github.com)

34 pointsby paulirish7 コメント

要約

Google Chromeチームは、コーディングエージェントが古いJavaScriptパターンに依存する傾向があることを指摘し、モダンWebのベストプラクティスを集めた「modern-web-guidance」プロジェクトのバージョン1.0をリリースしました。このプロジェクトは、Firefox、MDN、Edgeと協力して開発され、200以上のガイドとCLIツールを提供します。これにより、エージェントはCSS.highlightsや<dialog>などのネイティブ機能を利用するようになり、開発効率とコード品質の向上が期待されます。

全文翻訳

ブラウザは、かつて50行のJS(または依存関係)を必要とした多くのことをネイティブで処理します: CSS.highlights は <span> を多用せずにテキスト範囲をハイライトし、<dialog> と showModal() はバックドロップと理想的なフォーカス管理を提供し、field-sizing はユーザーが入力するにつれてテキストエリアを自動的に拡大します。(昨日のftrain投稿で触れられたこと[0])

モデルはこれらのうちいくつかを名前で認識していますが、一貫してプラットフォームネイティブのソリューションを使用せず、代わりに既存の <div>+JS ベースのパターンを優先します。Chrome では、コーディングエージェントにこの重要なドメイン知識を補完する取り組みを開始し、Firefox、MDN、Edge との協力により、バージョン1.0をリリースしました。

Webの進化に合わせて更新される、Webの専門家による厳選された手作りの実装ベストプラクティスに関する200以上のガイド(約1.7MB)です。(オープンソースなので、もちろん、あなたの意見も歓迎します ;) 読みやすいバージョンはこちら: [1]

私は過去9ヶ月間、このプロジェクトをエージェントスキル + (Agentic RAG) CLI として、コンテキストウィンドウを爆発させずに(またはMCPダイナミックツール検索にアクティベーションメカニズムを委譲せずに)出荷する方法について熱中してきました。このスキルは、関連するフロントエンドタスクでアクティベートされるように最小限に抑えられています。RAGの作業にはかなり誇りを持っています…元々500MBのネイティブスタックが、約7MBの純粋なJSパッケージにまで削減され、CPUで約10msの検索が可能です。

最近、古いパターンを特定してエージェントが近代化できるようにするための決定論的な「legacy-scan」(30kのGitHubリポジトリでトレーニング済み)を導入しました。(ホールドアウトされたリポジトリで平均92%の精度。)

コーディングエージェントの得意なこと/不得意なことについて、多くの主張がなされています。私たちは証拠を求めていたので、ヒルクライムを助けるために評価インフラ[2]に多額を投資しましたが、知識が十分に一般的になったらガイドを削減できるかどうかも特定しました。(もちろん、AIが知らないと思っていたことの中には、間違っていたものもありました :) スキルなしで200のタスクに対して codex/claude/agy を実行し、その後スキルありで実行します。合計で約1,700の playwright/AST ベースのアサーションがあります。エージェントは、ガイドなしの55%の合格率から92%に向上します。

試してみてください:

    DISABLE_TELEMETRY=1 npx modern-web-guidance@latest install
    DISABLE_TELEMETRY=1 npx modern-web-guidance@latest search "animate dialog modal"
    DISABLE_TELEMETRY=1 npx modern-web-guidance@latest legacy-scan ./src

何か間違っていることや奇妙な点を見つけたら、お知らせください!

バージョン1.0に関するより長い記事: https://developer.chrome.com/blog/modern-web-guidance-v1


0: https://news.ycombinator.com/item?id=50416456

1: https://developer.chrome.com/docs/modern-web-guidance/guides

2: https://googlechrome.github.io/modern-web-guidance-src/