Frontend Weekly 2025-10-31

#Frontend weekly #Storybook #Chrome #CSS #Vercel #Bun #ESLint #GitHub #Design Tokens

#Storybook 10リリース

日付：2025年10月28日

Storybook 10がリリースされた。唯一の破壊的変更としてESM-onlyとなり、CommonJSを削除したことでインストールサイズが29%削減された。Storybook 9からさらに軽量化し、合計でStorybook 8と比較して約79%の削減を実現。

主な新機能として、sb.mockによるmodule automocking、Typesafe CSF Factories（React向けPreview）、UI editing and sharing最適化（QRコード共有、エディタで開く機能）、tag filtering exclusionが追加された。Svelte async components、Next 16、Vitest 4にも対応。

ESM-onlyにはNode.js 20.16+、22.19+、または24+が必要。CSF Factoriesは自動アップグレード用のcodemodが提供されるが、既存のCSFバージョンも引き続きサポートされる。

出展：Storybook 10

#Chrome 142リリース

日付：2025年10月28日

Chrome 142がリリースされた。主な新機能として、スクロールマーカー用の:target-beforeと:target-after疑似クラス、スタイルコンテナクエリとif() CSS関数での範囲構文サポート、interestfor属性が追加された。

出展：Chrome 142 の新機能

#:target-beforeと:target-after疑似クラス

スクロールマーカーを制御するための新しい疑似クラスが追加された。これらの疑似クラスは、同じスクロールマーカーグループ内でアクティブマーカー（:target-currentに一致）の前後のスクロールマーカーに一致する。フラットツリーの順序で決定され、スクロールナビゲーションの視覚的フィードバックを提供する。

.carousel {
  /**... */
  scroll-marker-group: after;
  counter-reset: count;
  &::scroll-marker-group {
     /**... */
     margin-block-end: 80px;
  }
  > .carousel-item {
      /**... */
     counter-increment: count;
     &::scroll-marker {
        /**... */
      content: counter(count);
      &::scroll-marker:target-before {
          background-color: gray;
      }
      &::scroll-marker:target-current {
          background-color: coral;
      }
      &::scroll-marker:target-after {
          background-color: lightgray;
      }
    }
  }
}
100
101
102
103
104
105

#スタイルコンテナクエリとif()関数での範囲構文

スタイルクエリが完全一致を超えて拡張され、比較演算子を使用した範囲構文がサポートされた。カスタムプロパティ、リテラル値、置換関数の値を比較できる。

/* カスタムプロパティをリテラル長と比較 */
@container style(--inner-padding > 1em) {
  .card {
    border: 2px solid;
  }
}


/* 2つのリテラル値を比較 */
@container style(1em < 20px) {
  /* ... */
}

if()関数でスタイル範囲を使用する例：

.item-grid {
  background-color: if(
    style(attr(data-columns, type<number>) > 2):
      lightblue;
    else:
      white
  );
}

比較は数値型（<length>、<number>、<percentage>、<angle>、<time>、<frequency>、<resolution>）に限定され、両側が同じデータ型に解決される必要がある。

#interestfor属性

<button>要素と<a>要素にinterestfor属性が追加された。ユーザーが要素に関心を示したときに、ターゲット要素でアクションをトリガーする。

<style>
[popover] {
  position-area: bottom;
  margin: initial;
}
</style>
<button interestfor="popover1">サンプル</button>
<div id="popover1" popover>ポップオーバーコンテンツ</div>
ポップオーバーコンテンツ

ユーザーエージェントは、ホバー、キーボード操作、長押しなどで要素への関心を検出する。関心が示されたり失われたりすると、ターゲットでInterestEventが発生する。ポップオーバーの表示や非表示など、ポップオーバーのデフォルトアクションに使用可能。

#Vercel FunctionsにBunランタイムが追加

日付：2025年10月31日

Vercel FunctionsのランタイムオプションとしてBunが追加された。Node.jsとBunのどちらかをプロジェクトごとに選択可能。内部テストでは、CPU負荷の高いNext.jsのレンダリング作業において、BunはNode.jsと比較して平均レイテンシーを28%削減。

Bunを有効にするにはvercel.jsonにbunVersion: "1.x"を追加する。Next.js、Express、Hono、Nitroでサポート。TypeScriptをゼロコンフィグレーションでサポート。パブリックベータ版として提供。

出展：Bun Runtime on Vercel Functions

#ESLint v9.39.0リリース

日付：2025年10月31日

ESLint v9.39.0がリリースされた。特定のルール違反（complexity、for-direction、no-dupe-args、no-dupe-class-members）のハイライト位置をより正確にした。

TIMING環境変数を設定し--concurrencyオプションでマルチスレッドモードで実行した場合、複数のスレッドからのタイミングデータを集約した単一のパフォーマンスレポートを出力するように変更。

出展：ESLint v9.39.0 released

#Search ConsoleにQuery groupsが追加

日付：2025年10月27日

Search Console InsightsにQuery groups機能が追加された。類似の検索クエリをAIでグループ化し、ユーザーの意図を把握しやすくする。

「Queries leading to your site」カードで、グループ全体のクリック数、グループに属するクエリリスト、ドリルダウン機能を提供。Top、Trending up、Trending downの3つのバリエーションでグループを表示。大量のクエリを持つプロパティにのみ利用可能。段階的にロールアウト中。

出展：Introducing Query groups in Search Console Insights

#GitHubでImmutable releasesが一般提供開始

日付：2025年10月28日

GitHub ReleasesにImmutable releasesが追加された。Immutable releasesを有効にすると、公開後のアセットやタグが改ざんから保護される。サプライチェーンセキュリティを強化する機能。

Immutable releasesでは、公開後のアセットの追加・変更・削除ができなくなる。新しいImmutable releasesのタグは保護され、削除や移動ができない。また、Immutable releasesには署名付きattestationsが付与され、GitHub CLIやSigstore対応ツールで検証可能。リポジトリまたは組織レベルで設定可能で、設定後はすべての新規リリースがImmutableとなる。既存のリリースは再公開しない限り可変のまま。

出展：Immutable releases are now generally available

#GitHub Actionsに1 vCPU Linux runnerが追加

日付：2025年10月28日

GitHub Actionsに1 vCPU Linux runnerがパブリックプレビューで利用可能になった。軽量な操作を実行する際のコスト削減を目的としたランナー。自動化タスク、issue操作、短時間のジョブに最適化されている。

このランナーは1 vCPUと5GB RAMを搭載。専用VMではなくコンテナ内で実行されるため、コスト効率が高い。ハイパーバイザーレベル2の分離を提供し、ジョブ完了時に自動的に削除される。実行時間は15分に制限されており、それを超えるとジョブは終了して失敗する。ubuntu-slimランナータイプを指定して使用する。用途例として、issueの自動ラベリング、基本的な言語コンパイル（webpackビルドなど）、リンティングやフォーマットなどが挙げられる。

出展：1 vCPU Linux runner now available in GitHub Actions in public preview

#Adobe対抗のAffinityが無料提供開始

日付：2025年10月

昨年Canvaに買収されたAffinityが、複数のアプリの統合など刷新を行い無料提供を開始した。 利用にはCanvaのアカウントが必要。

出展：All-new Affinity

#Design Tokens仕様が初回安定版リリース

日付：2025年10月28日

Design Tokens Community GroupがDesign Tokens仕様の初回安定版（2025.10）をリリースした。デザインシステムチームとツールメーカー向けのプロダクション対応のベンダー中立フォーマットを提供。

テーマ設定とマルチブランドサポートにより、ライト/ダークモード、アクセシビリティバリアント、ブランドテーマをファイル重複なしで管理可能。Display P3、Oklch、CSS Color Module 4の全カラースペースをサポート。継承、エイリアス、コンポーネントレベル参照による豊富なトークン関係を提供。1つのトークンファイルからiOS、Android、Web、Flutter向けのプラットフォーム固有コードを生成可能。Style Dictionary、Tokens Studio、Terrazzoなどでリファレンス実装が提供され、Penpot、Figma、Sketch、Framer、Knapsack、Supernova、zeroheightなど10以上のデザインツールがサポートまたは実装中。

出展：Design Tokens specification reaches first stable version

#Node.js v24.11.0 (LTS)リリース

日付：2025年10月28日

Node.js v24.11.0がリリースされた。このリリースでNode.js 24.xがLong Term Support（LTS）に移行し、コードネーム’Krypton’が付けられた。2028年4月末まで更新が継続される。

Node.js 24.10.0からの変更は、LTSリリースであることを反映するprocess.releaseオブジェクトなどのメタデータ更新のみ。

既知の問題として、Node.js 24.xラインでBuffer.allocUnsafeが意図せずゼロフィルされたバッファを返す問題が確認されている。このAPIは未初期化メモリを返すことがドキュメント化されているが、ドキュメント通りの動作は次のNode.js 24.x LTSリリースで復元される予定。

出展：Node.js v24.11.0 (LTS)

#Node.js v22からv24への移行ガイド公開

日付：2025年10月28日

Node.js v22からv24への移行ガイドが公開された。Node.js 24.11.0のリリースにより、Node.js 24リリースラインがLong-Term Support（LTS）に入り、2028年4月末まで更新が継続される。

プラットフォームサポートの変更として、32-bit Windows（x86）はNode.js 23.0.0から、32-bit Linux on armv7はNode.js 24.0.0からプリビルドバイナリが提供されなくなった。macOSのプリビルドバイナリにはmacOS 13.5以上が必要。

破壊的変更として、OpenSSL 3.5が含まれ、デフォルトのセキュリティレベルが2に設定された。これにより、2048ビット未満のRSA、DSA、DHキーや224ビット未満のECCキー、RC4を使用する暗号スイートが禁止される。

その他の動作変更として、fetch()のより厳密な準拠、AbortSignalの検証、stream/pipeエラーのスロー、Bufferの動作変更、Windowsでのパス処理の修正、test runnerのデフォルト変更などが含まれる。

C/C++アドオンはV8 13.6に対応するために更新が必要な場合があり、C++20サポートが必要になる場合がある。可能な限りNODE-APIの使用を推奨。

ソースからビルドする場合、AIXとLinuxプラットフォームではgcc 12.2以上、macOSではXcode 16.1以上が必要。

移行を支援するcodemodが提供されている：

  • fs-access-mode-constants: fs.F_OKなどのgetterをfs.constantsから取得するように変更
  • util-log-to-console-log: util.logをconsole.logに置き換え
  • zlib-bytesRead-to-bytesWritten: zlib.bytesReadをzlib.bytesWrittenに置き換え
  • fs-truncate-to-ftruncate: fs.truncateをfs.ftruncateに置き換え
  • crypto-rsa-pss-update: RSA-PSSキーペア生成のオプション名を更新

出展：Node.js v22 to v24

Edit on GitHub