2025年6月9日

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

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

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

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

加藤 : 加藤です！

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

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

Temporal API

菅原 : 1つめは、 Firefox 139で追加されたTemporal APIです。Dateに変わる日付のための機能として、今年の1月にMozillaのBlogで紹介されてましたね。

加藤 : そうですね。Dateオブジェクトにはいくつか直感的ではない仕様がありまして、たとえば特定のタイムゾーンを指定したDateオブジェクトが作れないので、ローカルで見ているときと、サイトを公開したときで、結果が変わってしまうことがあったりとか、まぁあとは、月の値を指定するときに0から始まる、とかですね。で、ライブラリを使いましょうというのが、定番の解決策だったんじゃないかなと思うんですけど、Temporalを使うことでより安心して日付情報を扱えるようになります。TC39のクックブックにサンプルコード多めで使い方が載っているので、もしTemporalを使うときは参考にするとよさそうです。

菅原 : これはけっこう機能が多くて違いがわかってないものもあるので、ちょっとずつ使ってみたいと思います。Temporalは、現在TC39のStage 3で、Firefoxのバージョン139でのみ使えます。Chrome、Edge、Safariではまだサポートされていません。

参考リンク

CSS reading-flow と reading-order

菅原 : 次はChrome 137、Edge 137に追加されたreading-flowとreading-orderです。reading-flowはフレックス、グリッド、ブロックレイアウトの子要素が、スクリーンリーダーに読み上げられる順番や、Tabキーなどフォーカスされる順番を制御できます。DOMのソース順序通りに読み上げる設定や、見た目の順番通りに読み上げる設定があります。reading-flow: source-order;を親要素に指定すると、子要素に指定したreading-orderプロパティの値で個別に順番を上書きできます。

加藤 : はい。まぁreading-flowを使わずに、HTMLの順番と、見た目の順番が一致しているっていうのが、一番理想的ではありますよね。ただ、PC幅とスマホ幅でレイアウトが大きく変わったときに、どうしても見た目上の順番を変えなきゃいけないケースがたまにあるので、そういう時には使うといいのかなと思います。

菅原 : そうですね。あ、あとはGoogleのBlogに注意点として書かれていたんですけど、tabindex属性に正の値を設定していても、reading-orderの値で上書きされるそうなので、使うときは注意したいですね。

参考リンク

CSS if() 関数

菅原 : 最後はCSSのif()関数です。これはブラウザに実装される前からSNSやBlogで話題にされているのを何度か見かけました。CSSの中でif文を使うことができて、if文の条件分岐には、CSS変数を含むプロパティの値による分岐や、指定したCSS機能がサポートされているかによる分岐、あとは指定したメディアクエリにマッチするかによる分岐ができます。現時点でif()関数はChrome 137だけが対応しています。

加藤 : はい。ついに、きましたね。if()関数は今のところ賛否両論って感じなのかなと思ってます。個人的にはまだ使うのは早いかなと思っていて、まぁブラウザのサポート状況的にもそうですけど、ブラウザの開発者ツールがif()関数にどう対応していくかとか、TailwindなどのCSSフレームワークや、あとはリンター、フォーマッターといった周辺ツールがif()関数にどう対応していくのか、がなんとなく見えてきたら、使うのを検討しようかなーと思っているところです。あとはやっぱり、私たちのように複数人で開発する場合は特に、if()関数を使う場合のルールとか、メンタルモデルのようなものを組織で共有する必要があるんじゃないかなーと思いますね。

菅原 : うーん、なんだかCSSに組織力を問われているみたいです…！すべてのモダンブラウザへの実装はまだ先ですし、それまでに使い分けを考えていきたいですね。

参考リンク

クロージング

菅原 : 以上、5月にWebプラットフォームに追加された新機能の紹介でした！

加藤 : はい。菅原さん、今回気になる技術はありましたか？

菅原 : 私はTemporal APIが気になります。この仕事を始めたころからDateってなんだか使いづらいなぁ～って感じてました。動作する環境に依存しないとか、すごく助かります。加藤さんどうですか？

加藤 : そうですね。私もDateには過去に何度も振り回されてきたので、Temporalはだいぶ待ち望んでましたね…。ちなみに菅原さん、CSSのif()関数はどうなんでしょう？なんか私だけ自分の考えを挙げているので、菅原さんを道連れにしたいんですけど。

菅原 : えー私はこういう新しいものにすぐ食いついてしまうので、最初は「便利かも」と思っていたんですよね。ただ、SNSとかで反応を見ていると難色を示されているかたが意外と多くて、なんでだろうって思ってたんですよ。CSSをパッと見ただけで「ここのフォントサイズは20pxです」とわかっていたものが、少し複雑になって分かりづらくなるので、影響範囲などを、コメントにしっかりと残さないといけないな、というのがデメリットでしょうかね…？これはまだ実作業で使うのは先になるので、それまでに仕様ですとか他のかたのBlogを見たり、自分でも使用例を考えたりして、試したいと思います。

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

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

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

前の記事 #70「4月のWebプラットフォームの新機能」

2025年の記事一覧に戻る