Edgeの新機能で変わるWeb開発――SPAの性能計測、デバッグ、WebMCP

Microsoft Edgeの開発者向け更新では、SPA（シングルページアプリ）の性能計測、ブラウザー上のデバッグ、AIエージェントとの連携、フォーム内テキストの操作などが取り上げられています。ポイントは、すべてが同じ段階の機能ではないこと。リリースノートやDevToolsで確認できるものがある一方、実験向けのものや、まだ計画段階のものもあります。 16333940

SPAの画面遷移後の表示を計測

SPAでは、画面を切り替えても新しいHTML文書を読み込まないことがあります。そのため、初回のページ読み込みを中心とする指標だけでは、アプリ内の画面遷移の速さを把握しにくい場合があります。

EdgeのPerformance APIには、こうした遷移や表示を調べるためのエントリーが追加されています。soft-navigationは、ユーザー操作をきっかけに起きた同一文書内の履歴変更を記録します。interaction-contentful-paintは、操作によってページの一部が変わったとき、その領域に新しいコンテンツが描画されたことを示します。 40

Edgeのリリースノートでは、SPAの性能指標を収集するためのソフトナビゲーション判定も紹介されています。これらは、画面遷移が起きた時点や、その結果が表示されたタイミングを調査する手がかりです。遅さを自動で解消する機能ではありません。 3940

JavaScriptの処理とブラウザーの仕事を見分ける

JavaScript Self-Profilingのマーカーは、JavaScriptのサンプル間にブラウザーが行った処理について、スタイル計算、レイアウト、描画、ガベージコレクションなどの情報を加えます。アプリのJavaScriptそのものにかかった時間と、ブラウザー側の処理にかかった時間を切り分ける助けになります。利用を前提にする前に、Edgeの最新ドキュメントと機能の提供状況を確認してください。 1

DevToolsでリクエストを再送・編集

NetworkツールのResendは、ページを再読み込みせずに、記録したネットワークリクエストをもう一度送信する機能です。同じリクエストを再試行したいときに使えます。 18

新しいEdit and resend as Fetchの操作では、記録したリクエストを編集し、Consoleでfetch()として試せます。リクエスト内容を調整して挙動を確かめやすくするデバッグ機能であり、ネットワーク接続そのものを速くするものではありません。新しい操作はMicrosoftの開発者向け更新で紹介され、リクエストの再送方法はEdgeのドキュメントで案内されています。 118

WebMCPでサイトの操作をエージェントに伝える

WebMCPは、サイトが構造化された操作やツールを公開し、ブラウジングエージェントが利用できるようにする新しい仕組みです。ページを見た目だけから読み取らせるのではなく、サイト側が宣言した操作を通じてやり取りすることを目指しています。Microsoftは早期の試験向け機能として紹介しているため、すべてのユーザーが利用できる機能と見なさず、実験的なものとして扱うのが適切です。 1

OpaqueRangeでフォーム内のテキスト範囲を扱う

OpaqueRangeは、テキスト入力用の<input>や<textarea>の中にある、変化に追従するテキスト範囲を表します。範囲に応じたUIの配置やハイライトなど、入力欄のテキストを活用する機能を作る際に役立ちます。内部のテキストノードを公開せずに扱える設計で、Edge 152のWebプラットフォーム更新に記載されています。 133

Web Install APIはオリジントライアルで試験

Web Install APIを使うと、サイトから非同期関数navigator.install()を呼び出し、ブラウザー組み込みのインストール画面を通じて別のWebアプリのインストールをリクエストできます。Microsoftは、Edgeのオリジントライアルを通じてサイト上で試せると発表しています。オリジントライアルは試験参加の仕組みであり、すべてのブラウザーやユーザーで使えることを意味しません。 6

ネイティブのmenu要素はまだ計画段階

Microsoftは、メニューの動作を組み込みで提供するネイティブの<menu>要素についても計画を示しています。現時点では利用可能な機能として扱わず、対応状況が確認できるまでは本番環境の挙動をこの要素に依存させないようにしましょう。 1

試す前に確認したい提供状況

DevToolsのリクエスト再送はドキュメントで案内されており、OpaqueRangeはEdge 152の更新項目に含まれています。Web Install APIにはオリジントライアルが用意されています。一方、ソフトナビゲーション関連の指標、WebMCP、JavaScriptプロファイリングのマーカーは、利用するEdgeのバージョンや試験条件を確認してから評価してください。ネイティブのmenu要素は計画段階です。 1618333940