2025年8月21日

#74「7月のWebプラットフォームの新機能」

web.devで公開されているNew to the web platformシリーズの2025年7月の内容を日本語でお届けします！

※ オフラインのため、音声ファイルを再生できません。ネットワーク状況をご確認の上、再度アクセスしてください。

菅原 : 皆さん、こんにちは！ミツエーリンクスの菅原です！

加藤 : 加藤です！

菅原 : ミツエーテックラジオは、株式会社ミツエーリンクスのスタッフが、Webデザイン、Webフロントエンドなどの、Web技術に関するニュースやツールをシェアするポッドキャストです。今回はweb.devに公開されている7月にWebプラットフォームに追加された新機能のうち、気になった3つのトピックについてお話しします。7月にメジャーバージョンアップがあったのはFirefoxのみだったので、今回は実質Firefoxに搭載された新機能特集となっています。各機能のブラウザのサポート状況なども紹介していきますが、8月5日時点の内容ですので、ご注意ください。

ミツエーリンクスのWebサイトで公開している文字起こしページには、各機能の仕様や参考リンクなども載せていますので、そちらもぜひご覧ください！では早速まいりましょう！

WebGPU API

菅原 : まず1つ目はWebGPU APIです。WebGPUは、JavaScriptからGPUを扱うためのインターフェースを提供するAPIです。WebGLの後継とも呼ばれていて、3Dコンテンツの描画はもちろん、GPGPUといって汎用的な計算をGPUで行うことができるようになります。

加藤 : WebGLの後継といわれると、グラフィック専用のAPIなのかな？と思われるかもしれないんですが、WebGPUの大きな特徴は、いま菅原さんがいっていたGPGPUと呼ばれる技術で、コンピュートシェーダーと呼ばれる計算だけを行うシェーダーを通して、GPU上で、複雑な計算を並列実行できるっていう点ですね。もちろんグラフィックの描画にも使うことができて、WebGLの代表的なライブラリであるthree.jsも、WebGPU版のサンプルをたくさん上げています。多くの開発者は直接WebGPU APIを操作する機会は少なく、three.jsとか、他の機械学習用のライブラリを通して使うことになるんじゃないかなと思います。

菅原 : なるほど、そうなんですね。私はWebGL自体使ったことがなかったので、WebGPUを解説している記事をいくつか読んでみたんですが、聞いたことない単語が多くて、とにかく難しかったですね。

加藤 : うん、そうですよね。

菅原 : えーWebGPUはChrome、Edge、そしてWindows向けのFirefoxでサポートされていて、Safari 26のベータでもサポートされています。詳細なサポート状況は、WebGPUのGitHubにステータスがまとまっていますので、そちらをご参照ください。

参考リンク

scrollMargin

菅原 : 続いては、IntersectionObserverのscrollMarginプロパティのサポートです。同じくIntersectionObserverのプロパティであるrootMarginと同様に、要素と要素が交差したかどうかを判定するための有効範囲に対してマージンを設定できるプロパティですが、scrollMarginの場合は、ルート要素と監視対象要素のあいだにある、すべてのスクロールコンテナーに対してマージンが適用されます。

加藤 : うん。これ、説明だけ聞いてもちょっとイメージしづらいですね…！

菅原 : ですよね。正直自分でも話しながらよくわからないぞ！と思っています。

加藤 : 仕様が検討されていた当初のイシューに、画像を遅延読み込みするタイプのカルーセルが具体的な例としてあげられていたので、それを取り上げるとちょっとわかりやすいかもですね。カルーセルって最初の1枚目以外は、ページロード時に画像を読み込む必要がないじゃないですか。

菅原 : そうですよね。カルーセルが横にスクロールされて、次のコンテンツが表示されるタイミングで、画像もロードするのがいいですよね。

加藤 : ですよね。ただそこを考慮してちゃんと実装しようとすると、カルーセル自体がビューポートに入ったタイミングで、1枚目の画像をロードして、カルーセルがスクロールされて次の画像が表示されそうになったら次の画像をロードして、みたいな処理を実装することになると思うんですが、この「表示されそうになったら次の画像をロードする」っていうのが、実装するのが実は大変で、処理が複雑になりがちだったんですよね。

菅原 : なるほど。それがscrollMarginを設定することで、監視対象の画像要素と、それを囲むスクロールコンテナ要素が交差するタイミングを簡単に調整できるようになるわけですね。

加藤 : そうですね。IntersectionObserver自体がイメージするのがちょっと難しいので、ピンとこないかもしれないですが、MDNに動作サンプルが載っていたので、いろいろ試してみてもらえるとそういうことか！となると思います！

菅原 : はい。IntersectionObserverのscrollMarginはChrome、Edge、Firefoxでサポートされていて、Safari 26のベータでもサポートされたようです。

参考リンク

font-variant-emoji

菅原 : 最後はCSSのfont-variant-emojiプロパティです。これは、絵文字の表示の仕方を決められるプロパティですね。絵文字の表示には2種類あって、プロパティの値にemojiを指定すると、色がついたカラフルな見た目が表示されて、値をtextにすると、白黒の見た目で表示されます。

加藤 : ちなみにこのCSSプロパティの影響を受けるのは、Unicode emoji presentation sequenceに掲載されている絵文字のみということでした。このページにはemojiを指定したときと、textを指定したときに見た目がどう変わるのか、サンプルのグリフがまとまっているので、見てもらえるとわかりやすいかなと思います。

菅原 : はい。あと、MDNには、絵文字を使用する際のアクセシビリティに関する注意点が書かれていました。スクリーンリーダーの読み上げが問題ないか、ダークモードでもコントラストが確保できているか、あと、絵文字は文化や地域によって異なる意味を持つ場合があるので、注意が必要ということでした。

font-variant-emojiはChrome、Edge、Firefoxでサポートされていますが、Safariではまだサポートされていません。

参考リンク

クロージング

菅原 : 以上、7月にWebプラットフォームに追加された新機能の紹介でした。なにか気になる機能ってありましたか？

加藤 : そうですね。個人的にはWebGLで実装されたリッチな表現が好きなので、WebGPUには注目してます。3DコンテンツとかWebXRはもちろん、6月のWebプラットフォームの新機能の回で紹介した、翻訳とか要約などのAI系の組み込みAPIとかとも、内部的には関連しているのかなぁと、ちょっと思ってます。

菅原 : 今年のWWDCで、AppleもWebGPUの発表をしていましたし、Chrome for Developersブログでは、Chromeのアップデートと併せて、毎回WebGPUの新機能を記事にしているので、どのブラウザベンダーもWebGPU APIに力を入れてそうですね。

加藤 : そうですね。なかなか専門的な領域なので、けっこう難しいことが多いんですが、少しずつ追っていきたいと思います。

菅原 : 最後に、ミツエーリンクスではスマートなコミュニケーションをデザインしたいUIデザイナー、UI開発者を募集しています。採用サイトではオンライン説明会やオンライン面接なども行っていますのでチェックしてみてください。

また、このPodcastはApple Podcast、Amazon Music、Spotify、YouTubeで配信していますので、お好みのプラットフォームでフォローいただけると、エピソードをすぐ視聴できます！こちらもぜひご活用ください。「#ミツエーテックラジオ」でご意見、ご感想、こんなこと話してほしいというリクエストなどもお待ちしております。それでは今日はこの辺で！ありがとうございましたー！

加藤 : ありがとうございました！

前の記事 #73「25新卒に聞くミツエーリンクスの新卒研修パート1」

2025年の記事一覧に戻る