公開日: 2026 年 7 月 28 日
Chrome 151 がリリースされました。この投稿では、このリリースにおける主な機能の一部を紹介します。Chrome 151 のリリースノート全文をご覧ください。
このリリースのハイライト:
- 機能要素
<usermedia>は、カメラとマイクのストリームに対して、ユーザーが有効にする宣言型のコントロールを提供します。 - 宣言型 Shadow DOM スロット割り当てにより、ウェブ コンポーネントは命令型 JavaScript を使用せずに手動でスロットを割り当てることができます。
- ソフト ナビゲーションとインタラクション パフォーマンス指標は、シングルページ アプリケーションにおけるインタラクション駆動型のレイテンシとルート変更を追跡します。
機能要素: <usermedia> MVP
<usermedia> 要素は、<geolocation> に続いて、機能要素スイートでリリースされた最新の要素です。PEPC イニシアチブの一環である元の <permission> 提案からの移行により、ブラウザはさまざまなハードウェア機能の固有の複雑さと動作をより効果的に処理できるようになります。初期の提案では、許可と拒否などの権限状態の管理に重点が置かれていましたが、機能要素はデータ メディエーターとして機能します。
<geolocation> 要素はサイトに位置情報オブジェクトを提供し、<usermedia> はカメラとマイクへのアクセス フロー全体を管理します。ユーザーの意図を把握し、ブラウザのプロンプトを管理して、MediaStream オブジェクトをアプリケーションに配信します。この変更により、個別の getUserMedia() 呼び出しが不要になり、実装が簡素化され、ブラウザがユーザーの意図の信頼できるシグナルを取得できるようになります。
詳しくは、HTML 要素の概要<usermedia>をご覧ください。
宣言型 Shadow DOM: shadowrootslotassignment 属性
Chrome 151 では、shadowrootslotassignment 属性の <template> 要素のサポートが追加されました。これにより、HTML で手動スロット割り当てを使用する宣言型シャドウ ルートを構築できます。
これまで、手動スロット割り当ては命令型でのみ使用できました。このアップデートにより、シャドウ ルート テンプレートで shadowrootslotassignment="manual" を指定できます。
この属性は named（デフォルトの動作）と manual を受け入れ、HTMLTemplateElement の shadowRootSlotAssignment プロパティに反映されます。詳しくは、MDN の HTMLTemplateElement.shadowRootSlotAssignment のドキュメントをご覧ください。
この属性は Firefox と Safari 27 ベータ版ですでに利用可能であるため、まもなく Baseline Newly available になります。
ソフト ナビゲーションとインタラクション パフォーマンス指標
Chrome 151 では、soft-navigation と interaction-contentful-paint の 2 つの新しい PerformanceEntry タイプが導入され、ウェブ パフォーマンス タイムラインが拡張されました。これらのエントリは、Largest Contentful Paint（LCP）や Interaction to Next Paint（INP）などの確立された Core Web Vitals 指標に基づいて、シングルページ アプリケーション（SPA）におけるインタラクション駆動型のパフォーマンスとレイテンシを追跡するのに役立ちます。
SPA では、JavaScript 駆動型のルート遷移は従来のブラウザのページ読み込みをトリガーしません。soft-navigation エントリは、ユーザー インタラクションによって開始された、同じドキュメントの履歴状態の変更をキャプチャします。ソフト ナビゲーションが発生すると、ブラウザは新しいタイムオリジンを確立します。これにより、後続のパフォーマンス データを、最初のドキュメント URL ではなくアクティブな SPA ルートに正確に帰属させることができます。
interaction-contentful-paint エントリは、ユーザー インタラクションによって変更された DOM リージョン内の新しいコンテンツフル ペイントを測定します。これにより、コンテンツの更新が fetch() リクエストなどの非同期オペレーションに依存している場合でも、インタラクションの読み込みレイテンシを把握できます。
PerformanceObserver を使用して、アプリケーションでこれらの新しいエントリを観察できます。次のコード スニペットは、バッファ オプションを使用して、このページの以前のソフト ナビゲーションを含むソフト ナビゲーション エントリをコンソールに記録します。
const observer = new PerformanceObserver(console.log);
observer.observe({ type: "soft-navigation", buffered: true });
SPA ナビゲーションの実装と測定について詳しくは、Chrome for Developers のソフト ナビゲーションのドキュメントをご覧ください。
関連情報
ここでは、主なハイライトの一部のみを紹介します。Chrome 151 のその他の変更については、次のリンクをご覧ください。
- Chrome 151 のリリースノート。
- Chrome 151 の ChromeStatus.com の更新情報。
- Chrome のリリース カレンダー。
登録
最新情報を入手するには、Chrome Developers YouTube チャンネルに登録してください。新しい動画が公開されるたびに メール通知が届きます。または、X や LinkedIn で Google をフォローして、新しい記事やブログ投稿を入手してください。
Chrome 152 がリリースされたら、Chrome の新機能をお知らせします。