Edge 153リリースノートまとめ：`<camera>`要素からCSSの新機能まで

📖 推定読了時間：約6分

Webサイトでカメラやマイクへのアクセス許可をユーザーにお願いするとき、独自のボタンを実装して、JavaScriptでgetUserMedia()を呼び出す——このパターンを何度も書いたことがある方は多いのではないでしょうか。2026年9月10日にリリースされるMicrosoft Edge 153では、そうした実装の一部をブラウザ標準の仕組みに置き換えられる新しいHTML要素が追加されます。この記事では、その概要と、あわせて追加される注目のCSS・JavaScript新機能を整理します。

「カメラ許可ボタン」、実は毎回自分で作っていませんか？

ビデオ通話機能や本人確認、QRコード読み取りなど、Webサイトでカメラやマイクを使う場面は年々増えています。ただ、その多くは<button>要素を自作し、クリック時にnavigator.mediaDevices.getUserMedia()を呼び出す、という実装になりがちです。この方式自体は動作しますが、ボタンの見た目や挙動が実装者ごとにバラバラになりやすいという課題もありました。

Edge 153では、この部分をブラウザ側が用意する標準要素に置き換えられる、`<camera>`と`<microphone>`という新しいHTML要素が導入されます。

`<camera>`/`<microphone>`要素は何をしてくれるのか

これらの要素は、クリックするとカメラまたはマイクのストリームを切り替える、ブラウザ提供のボタンです。必要に応じて、ユーザーにアクセス許可を求めるプロンプトも自動的に表示されます。実は2026年7月リリースのEdge 151で、すでに`<usermedia>`という要素が先行導入されていました。今回追加される2つの要素は、その発展形にあたります。

• `<usermedia>`：映像・音声の両方（あるいはどちらか）へのアクセスを求める汎用的な要素
• `<camera>`：映像（カメラ）へのアクセスのみを求める要素
• `<microphone>`：音声（マイク）へのアクセスのみを求める要素

用途を限定した要素が増えたことで、「このボタンはカメラだけを求めている」ということがマークアップの時点で明確になるという利点があります。実装者にとっても、意図を伝えるコードがシンプルになるはずです。

ここが地味に重要：ユーザー保護の観点での意味合い

この仕組みが持つもう一つの意味として、ブラウザが管理する専用UIを介することで、「明確なユーザー操作があった上でしか許可プロンプトが表示されない」という保証が強まる点が挙げられます。独自実装のボタンでは、見た目をボタンらしく見せかけずに許可を求めるような、ユーザーを誤認させる実装が理論上できてしまいますが、ブラウザ標準の要素であればそうした余地が小さくなります。

フロントエンド開発において、こうした「ブラウザ標準のUIコンポーネントに寄せる」という流れは今回に限った話ではありません。2026年5月のGoogle I/Oでも、HTML-in-CanvasやDeclarative Partial Updatesといった、宣言的なマークアップでブラウザの機能を呼び出す新しいAPI群が紹介されており、「複雑な処理をJavaScriptで書く」から「宣言的なHTML・CSSで表現する」への移行が、業界全体の潮流として進んでいることがうかがえます。

同時に追加される、見逃せないCSS・JavaScriptの新機能

Edge 153では`<camera>`/`<microphone>`要素以外にも、実務で使う場面がありそうな新機能がいくつか追加されています。

• ✅CSS `scroll-axis-lock`：スクロール操作を1軸に制限するかどうかを制御できるプロパティ。斜め方向にスクロールさせたいUIで有用
• ✅`overflow: scroll clip`：軸ごとに異なるスクロールコンテナを設定できるようになり、行・列両方のヘッダーを固定した表などが作りやすくなる
• ✅Iteratorの`join()`／`zip()`：複数のイテラブルを結合したり、同時に走査したりできる新しいJavaScriptメソッド

特に`scroll-axis-lock`は、地図アプリやキャンバス系のUIなど、意図的に斜めスクロールをさせたい場面で重宝しそうです。

実際に手元の環境で新要素の挙動を確認しながら実装を進めたいという方は、複数のブラウザやDevToolsのパネルを同時に開いて比較できるコーディング用外部モニターがあると作業効率が上がります。また、こうしたWeb APIの型定義をTypeScriptのプロジェクトで扱う機会が多い方は、TypeScript関連書籍で型システムの基礎を見直しておくと、新しいAPIのキャッチアップもスムーズになるはずです。

なお、本記事の内容は2026年9月時点で公開されているMicrosoft Edgeのリリースノートにもとづいています。実際の挙動や対応状況は今後変更される可能性があるため、実装時は必ず公式のリリースノートや各ブラウザの対応状況を確認してください。

まとめ

Edge 153で追加される`<camera>`/`<microphone>`要素は、これまで開発者が個別に実装していたカメラ・マイクの許可ボタンを、ブラウザ標準の仕組みに置き換えられる新しい選択肢です。単なる利便性の向上にとどまらず、ユーザーを誤認させるような実装を防ぎやすくなるという点でも意味のあるアップデートといえます。

普段からWebRTCやメディアデバイス関連の実装に触れている方は、ぜひ一度Edgeのプレビュー版で新要素の挙動を試してみてください。今後、宣言的なHTML要素でブラウザ機能を呼び出す流れがどこまで広がっていくのか、引き続き注目していきたいところです。

ふだんこうした新しいノートPC環境で開発検証を行っている方は、エンジニア向けノートPCのスペックを見直すタイミングとして、ブラウザやDevToolsを快適に動かせる構成を検討してみるのもよいでしょう。