hrdtbs' blog
Search contents

Frontend Weekly 2025-10-31

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