2176 文字
11 分

Frontend Weekly 2025-04-04

2025-04-04
Tech
Frontend weekly
/
Chrome
/
Safari
/
ESLint
/
React
/
Tailwind CSS
/
Rsdoctor
/
Bun
/
Biome
/
TypeScript
/
zx
/
GitHub
/
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/

Frontend Weekly 2025-04-04
https://blog.ohirunewani.com/series/frontend-weekly/2025-04-04/
作者
hrdtbs
公開日
2025-04-04
ライセンス
CC BY-NC-SA 4.0
CSSカルーセルを試す
AI Weekly 2025-04-03
© 2025 hrdtbs. All Rights Reserved. / RSS / Sitemap
Powered by Astro & Fuwari