お問い合わせ

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

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

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

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

加藤 : 加藤です！

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

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

URLPattern

菅原 : まず1つ目はURLPatternです。URLPatternは、URLを簡単に解析できるJavaScriptのAPIで、たとえば商品の詳細ページのURLを「/product/123」のような、ルールで運用しているときに最後の「123」の部分をJavaScriptで取り出すには、これまでは正規表現を使ったり、まずは「/」で区切って処理したり、ということをやっていたのですが、URLPatternを使うことで、より直感的にパターンを定義して、簡単に欲しい部分だけを抽出できるようになります。

加藤 : はい。私は使ったことがないんですけど、Path-to-RegExpという、よく使われているライブラリの構文をベースにしているようで、このライブラリからURLPatternに移行すれば、学習コストとか、修正コストを小さく抑えつつ、JavaScriptのバンドルサイズを下げることができそうですね。いくつか注意点を挙げるとすると、たとえば日本語のURLを使っている場合は、URLPatternに指定するオプションを自分でパーセントエンコードする必要があったりとか、あとURLに複数のクエリパラメータがついている場合、えー、URLPatternを使うときも正規表現を書く必要があったりするので、注意するといいと思います。

菅原 : これは複数のクエリパラメータがあるとき、書かれる順番が変わることもあるから、ですかね？

加藤 : あ、そうですね。えっと、この点はGitHubのイシューも残っているんですが、機能が強化されるかどうかは、まだ未確定という感じですね。ついでに言うと、URLPatternを使ってURLを生成するAPIの追加も検討されているのですが、URI Templateという別の仕様があって、どちらも似た役割を持っているので、どっちかに統合する必要があるか？なども検討されているようです。

菅原 : はい。えーURLPatternは、Firefox、Chrome、Edgeでサポートされていて、Safari 26のベータ版にも搭載されています。

参考リンク

Prioritized Task Scheduling API

菅原 : 次に紹介するのは、Prioritized Task Scheduling APIです。これは、JavaScriptの処理に優先順位をつけて、実行タイミングを細かく制御するためのAPIです。

加藤 : はい。Prioritized Task Scheduling APIは、いくつかのコンポーネントで構成されていて、特に主要な役割を持つのがSchedulerです。Schedulerには、優先度を指定して処理を実行するためのpostTask()メソッドと、処理を一時的に中断できるyield()メソッドが定義されています。より細かく、高度に制御したい場合には、TaskControllerやTaskSignalを使って、スケジューリングされた処理を途中で止めたり、動的に優先度を変更したりできます。

菅原 : たとえば、ユーザーの入力にすぐ反応したいのに、裏で重い処理が動いていて、画面がガタついてしまうというようなときに使える感じでしょうか。

加藤 : そうですね！うまく使えば、Core Web Vitalsの指標の1つである、INPの改善にも役に立つAPIですね。

菅原 : 役に立ちそうというのはなんとなく分かるんですが、具体的なユースケースってありますか？

加藤 : あーそうですね…。GitHubに挙げられていたモチベーションには2つあって、えー、1つはinput要素に文字を入力すると同時に検索結果を表示したりするUIですね。もう1つは地図を表示するアプリケーションで、地図アプリは、特定の地点の地図を描画するだけではなくて、地図の移動やズームもできたりしますよね。どちらの機能もユーザーの操作やデータの取得、画面にデータを表示する、という複数の処理が関係しているので、どの処理を優先するかが使い勝手に影響ありそうですよね。

菅原 : たしかに、地図アプリくらい複雑なものだと、優先順位を設計するのは大事そうですね。Prioritized Task Scheduling API はFirefox、Chrome、Edgeでサポートされていますが、Safariではまだサポートされていません。

参考リンク

CSSカスタム関数

菅原 : 最後のトピックはCSSカスタム関数です。これは、CSSのカスタムプロパティを関数のように使えるようにする機能です。もともとは、Chromeのバージョン136でリリースされる予定だった機能ですが、その時点ではCSSワーキンググループ内のレビューや、他のブラウザベンダーからの反応が不十分で、その状態でリリースしてしまうのはリスクがあるのではないか、ということで延期されていて、Chrome 139で実装されました。

加藤 : 去年のState of CSSでも、mixinsやfunctionsがCSSに足りない機能として出てきていたので、CSSカスタム関数がリリースされれば使う人は多いだろうし、使っているWebサイトが多ければ、機能をリリースしたあとに仕様を変更するっていうのはかなり大変になっちゃうと思うので、良い判断だったのではないかなと思います。今回実装されたCSSカスタム関数はSassの@functionと似たような使い方になるんですかね？

菅原 : これは、どちらも引数を受け取って、その引数を使って、動的にCSSの値を計算し、1つの値を返すことができる、という点では同じです。ただ、書き方はけっこう違いますね。まずSassの@functionは@returnというルールで値が決まり、その時点で関数の処理が終了します。CSSカスタム関数のほうはresultという記述子を使って、結果を定義することになっていて、定義した時点では処理は終了せずに、関数の中に複数resultが書かれた場合は、あとに書いたもので結果が上書きされるような感じですね。

加藤 : あー、なるほど。そのあたりの考え方は、通常のCSSと同じですね。

菅原 : そうですね。あとはカスタム関数では、引数と関数の返り値のデータ型を指定できたりとか、関数内でメディアクエリを使って分岐ができたりとか、そういった違いもあります。

加藤 : あ、型も指定できるんですね！私はこれまで、あんまりCSSのデータ型については意識せず書いていたんですけど、こうなってくると少し復習しておいたほうが良さそうですね。

菅原 : そうですね。CSSカスタム関数はChrome、Edgeではサポートされていますが、Firefox、Safariではまだサポートされていません。

参考リンク

クロージング

菅原 : 以上、8月にWebプラットフォームに追加された新機能の紹介でした。CSSカスタム関数、実装されましたね。

加藤 : そうですねー。ちょっと前にifが実装されて、今回はカスタム関数で、ちょっと私の頭の中にあるCSSはこういうものだっていう概念がどんどん書き換えられていっているんで、正直あんまり追いついてないですね。

菅原 : 私は@propertyがけっこう好きで、型定義できるぞ、というとこまでは喜んでいたんですけど、ifや、あとはCSSカスタム関数はどうやって使っていこうかちょっと悩んでいるところです。まずちゃんと使えるように練習したいと思います。

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

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

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

2025年の記事一覧に戻る