O hirunewani blog

Frontend Weekly 2025-04-04

Created at

Chrome 135、Safari 18.4、ESLint 9.23.0、React 19.1.0、Tailwind CSS 4.1.0、Rsdoctor 1.0、Bun 1.2.7、Biomeの型推論機能強化、zx 8.5.0、GitHub Issuesのダッシュボード更新、GitHub Actionsの破壊的変更通知など

Table of Contents
  1. # Chrome 135リリース
  2. # CSSカルーセルのサポート
  3. # Invoker Commands API
  4. # Observable API
  5. # setIntervalの1ms以上へのクランプ削除
  6. # clip-pathでのshape関数のサポート
  7. # Safari 18.4リリース
  8. # Declarative Web Pushのサポート
  9. # スクリプト間にスペースを追加するtext-autospace
  10. # details要素のカスタマイズ
  11. # clip-pathでのshape関数のサポート
  12. # number inputのホイールイベントを削除
  13. # color inputの不透明度のサポート
  14. # Iterator Helpersのサポート
  15. # New to the web platform in March
  16. # Intl.DurationFormatのデモ
  17. # ESLint 9.23.0リリース
  18. # React 19.1.0リリース
  19. # Tailwind CSS 4.1.0リリース
  20. # Rsdoctor 1.0リリース
  21. # Bun 1.2.7リリース
  22. # Biome、Vercelの支援を受け型情報を使ったlintの実現を目指す
  23. # zx 8.5.0リリース、コア機能のみの軽量バージョンzx@liteを提供
  24. # GitHub Issues: Dashboard updates
  25. # Notification of upcoming breaking changes in GitHub Actions

Chrome 135リリース

日付：2025年4月1日

Chrome 135がリリース。非常に多くの機能追加や変更が行われている。以降ではいくつかピックアップして紹介する。

出展：https://developer.chrome.com/release-notes/135?hl=ja

CSSカルーセルのサポート

CSSのみでカルーセルを実装するための機能が非常に多く実装された。現在はChrome 135以降でのみのサポート。

関連：CSSカルーセルを試す

Invoker Commands API

HTMLによる宣言的な記述により指定された要素に指定されたコマンドを実行できる機能。現在はChrome 135以降およびEdge 135以降でのサポートのみ。

ポップオーバーやダイアログの開閉を行う組み込みコマンドが用意されており、JavaScriptを用いずにポップオーバーやダイアログ要素とボタン要素の紐づけが行える。

<button commandfor="mydialog" command="show-modal">Show modal dialog</button>
<dialog id="mydialog">
  <button commandfor="mydialog" command="close">Close</button>
  Dialog Content
</dialog>

また、JavaScriptを利用する必要があるが、独自のコマンドを渡して処理することも可能。その場合、次のようにcommandイベントでコマンドを受け取り処理を行う。

element.addEventListener("command", (event) => {
  if (event.command == "--rotate-left") {
    element.style.rotate = "-90deg";
  } else if (event.command == "--rotate-right") {
    element.style.rotate = "90deg";
  }
});

参考：https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API

Observable API

Observable APIは、非同期イベントストリームを処理するためのAPi。現在はChrome 135以降でのサポートのみ。

命令型のaddEventListenerなどの記述に対して、宣言的な記述によるイベントハンドリングを可能。

要素がクリックされたログを出力する例：

element.when("click").subscribe({
  next: () => {
    console.log("clicked");
  }
})

追加で他の操作が完了するのを待つ例：

element.when('mousemove')
  .takeUntil(document.when('mouseup'))
  .subscribe({next: e => {
    console.log("mousemoved", e);
  } });

イベントから数値を計算する例：

const maxY = await element
	.when('mousemove')
	.takeUntil(element.when('mouseup'))
	.map((e) => e.clientY)
	.reduce((soFar, y) => Math.max(soFar, y), 0);

whenメソッドはObservableオブジェクトを返し、これに対してsubscribeメソッドを呼び出すことでイベントを購読する、takeUntilメソッドを呼び出すことで他の操作が完了するのを待つ、filterやreduceなどで処理を行うといったことが出来る。

参考：

setIntervalの1ms以上へのクランプ削除

Chrome 135以降では、1ms未満のsetIntervalの呼び出しが1msに強制されない。

例えば、setInterval(() => {}, 0)は今まで1msの遅延が発生していたが、今後は0msの遅延で実行される。

clip-pathでのshape関数のサポート

clip-pathでshape関数を利用することが可能になった。従来の方法に比べて、より柔軟な記述が可能。

.example {
  width: 100px;
  height: 100px;
  background-color: coral;
  clip-path: shape(
   from 0% 0%, 
   line to 100% 0%, 
   line to 50% 100%, 
   close
  );
}

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape/shape

Safari 18.4リリース

日付：2025年3月31日

Safari 18.4がリリース。非常に多くの機能追加や変更が行われている。以降ではいくつかピックアップして紹介する。

出展：https://webkit.org/blog/16574/webkit-features-in-safari-18-4/

Declarative Web Pushのサポート

Service Workerに依存せずにプッシュ通知を管理できる機能であるDeclarative Web Pushがサポートされた。

参考：https://webkit.org/blog/16535/meet-declarative-web-push/

スクリプト間にスペースを追加するtext-autospace

スクリプト間、例えば日本語の文章内に半角英数字などの単語が入った場合、その前後にスペースを自動的に追加するtext-autospaceがサポートされた。現在はSafari 18.4以降でのみサポート。

ただし、現在のSafariの実装は仕様通りではなく明示的に指定しない限り、従来の表示であるtext-autospace: no-autospaceが適用される。有効化するには、text-autospace: normalなどの指定が必要。

仕様では初期値がnormalになっており、将来的にはスクリプト間にスペースがデフォルトで挿入されるようになると思われる。

参考：https://www.w3.org/TR/css-text-4/#text-autospace-property

details要素のカスタマイズ

::details-content疑似要素が追加され、details要素の高度なカスタマイズが可能になった。

関連：details要素のカスタマイズ - Chrome 131 | Frontend Weekly 2024-11-15

clip-pathでのshape関数のサポート

clip-pathでshape関数を利用することが可能になった。Chrome 135でのサポートと同様。

関連：clip-pathでのshape関数のサポート - Chrome 135 | Frontend Weekly 2025-04-04

number inputのホイールイベントを削除

<input type="number">のホイールイベント（マウスなどによるホイール操作によるイベント）が削除された。

ホイールイベントによりスクロール操作によって誤って入力が変更されるということがあり、意図的に無効化されることが多くあった。

現在、ChromeやFirefoxでも削除の検討が行われている。

参考：https://github.com/whatwg/html/issues/10911

color inputの不透明度のサポート

<input type="color">のalpha属性がサポートされた。これにより不透明度をカラーピッカーで選択できるようになった。

参考：https://html.spec.whatwg.org/multipage/input.html#color-state-(type=color)

Iterator Helpersのサポート

イテレータにsomeやevery、filterなど配列相当の操作を可能にする多くのメソッドが追加された。 Safari 18.4のサポートにより、ほとんどのブラウザで利用できるようになった。

参考：https://github.com/tc39/proposal-iterator-helpers

New to the web platform in March

日付：2025年3月31日

3月のWeb Platformの新機能について、まとめた記事が公開された。

次の機能がBaselineで利用可能になった。

  • Intl.DurationFormat
    • ロケールを考慮した期間のフォーマットが出来る
  • contenteditable=plaintext-only
    • ユーザーのプレーンテキストの入力をtextarea要素以外でサポートする際に利用できる
  • writing-mode: sideways-rlとwriting-mode: sideways-lr
    • テキストを横書きで表示する
  • ClipboardItem.support()
    • クリップボードがサポートしている形式を確認できる

出展：https://web.dev/blog/web-platform-03-2025?hl=en

Intl.DurationFormatのデモ

const formatted = new Intl.DurationFormat(
   navigator.language, 
   { style: 'long' }
).format({
   years: 1,
   hours: 20,
   minutes: 15,
   seconds: 35
});

ESLint 9.23.0リリース

日付：2025年3月21日

ESLint 9.23.0がリリース。

次の機能追加などが行われている。

  • コアルールによるTypeScript構文のサポート
    • ただしパースには@typescript-eslint/parserなどの利用が必要
    • 今回追加されたルール
      • class-methods-use-this
      • default-param-last
      • no-useless-constructor
    • 今後も追加予定
  • 競合する自動修正ルールを検出する機能の追加

出展：https://eslint.org/blog/2025/03/eslint-v9.23.0-released/

React 19.1.0リリース

日付：2025年3月28日

React 19.1.0がリリース。

次の改善などが行われている。

  • OwnerStackによるデバックの改善
    • OwnerStack：特定のコンポーネントのレンダリングを担当するコンポーネントを識別できる開発モード専用のスタックトレース
      • エラーに繋がるコンポーネントの階層を示すComponent Stackとは異なる
    • OwnerStackを返すcaptureOwnerStock APIの追加
  • Suspenseの機能改善
  • useIdがCSSセレクタとして有効な文字列を返すように変更
    • :r123:から«r123»に変更
  • dialog要素のbeforetoggleやtoggleイベントをサポート
  • react-server-dom-parcelパッケージの提供
    • RSCをParcelバンドラーと統合するパッケージ

出展：https://github.com/facebook/react/releases/tag/v19.1.0

Tailwind CSS 4.1.0リリース

日付：2025年4月1日

Tailwind CSS 4.1.0がリリース。

  • variantの追加
    • details-content、inverted-colors、noscript、pointer-none、pointer-coarse、pointer-fine, user-invalid、user-validなど
  • utilityの追加
    • wrap-anywhere、wrap-break-word、wrap-noraml、 text-shadow-*、mask-*、shadow-*/<alpha>、 inset-shadow-*/<alpha>、drop-shadow-*/<alpha>、text-shadow-*/<alpha>、drop-shadow-<color>など
  • @sourceがデフォルトでnode_modulesを無視するように変更
  • @source not ”…”の追加
    • クラス名をスキャンする際に、特定のパスを無視することが出来る
  • @source inline("")の追加
    • 特定のユーティリティをインライン化（Tailwindが生成するように強制）できる
  • @source not inline("")の追加
    • 特定のクラスが検出されても、そのクラスが生成されないように強制できる

出展：https://github.com/tailwindlabs/tailwindcss/releases/tag/v4.1.0

Rsdoctor 1.0リリース

日付：2025年3月19日

Rspack/Webpackと互換性のあるビルドアナライザーツールであるRsdoctorの1.0がリリース。

出展：https://rsdoctor.dev/blog/release/release-note-1_0

Rsdoctorは、Rspackと同様にByteDanceが開発しているツールであり、Rstackの一部。

Bun 1.2.7リリース

日付：2025年3月27日

Bun 1.2.7がリリース。Bun.Cookie、Bun.CookieMapの追加など。

出展：https://bun.sh/blog/bun-v1.2.7

Biome、Vercelの支援を受け型情報を使ったlintの実現を目指す

日付：2025年4月2日

Biomeが、Vercelの支援を受け、TypeScriptの型システムのサブセットをBiomeに直接統合し、型情報に基づくlintの実装を進めることを発表した。

出展：https://biomejs.dev/blog/vercel-partners-biome-type-inference/

zx 8.5.0リリース、コア機能のみの軽量バージョンzx@liteを提供

日付：2025年4月1日

zx 8.5.0がリリース。パッケージの提供フローが刷新され、様々な方法でのインストールが可能になった。 またコア機能のみの軽量バージョンzx@liteを提供するようになった。

出展：https://github.com/google/zx/releases/tag/8.5.0

GitHub Issues: Dashboard updates

日付：2025年4月2日

GitHub Issuesのダッシュボードが更新され、検索機能の強化や、New Issueボタンの追加、 自分に関連するissueを見つけやすいメニューの追加などが行われた。

出展：https://github.blog/changelog/2025-04-02-github-issues-dashboard-updates/

Notification of upcoming breaking changes in GitHub Actions

日付：2025年3月20日

古いGitHub Actionsのキャッシュサービスが、2025年4月15日に完全にオフになる。 また、2025年4月1日以降、deployment権限が変更される。 今まではdeployment: readでデプロイメントのレビュー、承認、拒否が可能だったが、 2025年4月1日以降は、deployment: writeが要求される。

出展：https://github.blog/changelog/2025-03-20-notification-of-upcoming-breaking-changes-in-github-actions/