Frontend Weekly 2025-09-12

Vercel Proプランが大幅変更、Viewerシート無料化と柔軟な料金モデルを導入#

日付：2025年9月9日

VercelのProプランが大幅に変更され、Viewerシートの無料化と柔軟なクレジットベース料金モデルが導入された。

Viewerシートが無料になり、デプロイしないチームメンバー（デザイナー、クライアント、非開発者など）がプロジェクトダッシュボード、デプロイメント、アナリティクスに無料でアクセスできるようになった。Developerシート（Owner, Member）は従来通り$20/月で、デプロイや本番設定の変更が可能。

料金モデルは20以上の製品毎に個別割り当てからシンプルなモデルに変更された。約7%のチームで料金が上昇するが、残り10万以上のチームでは料金が減少または変更ないと言及している。

Viewerシートの利用には新しいProプランへの切り替えが必要。

出展：A more flexible Pro plan for modern teams - Vercel Blog

CSSコンテナクエリがBaseline Widely availableに#

日付：2025年9月11日

2023年にすべての主要ブラウザエンジンに導入されたCSSコンテナクエリがBaseline Widely availableになった。コンテナクエリを利用することで、デバイスの画面サイズだけでなく要素のサイズに基づいたスタイルの変更が可能になり、よりフレキシブルでスタイルがカプセル化された実装が可能になる。

1
.sidebar {
2
  container-name: main-sidebar;
3
  container-type: inline-size;
4
}
5

6
@container main-sidebar (inline-size > 20em)  {
7
  .button-group {
8
    display: flex;
9
    padding-inline: 1.25em;
10
  }
11
}

またcolor-gamutメディアクエリと:autofill擬似クラスもBaseline Widely availableになった。

出展：August 2025 Baseline monthly digest

Learn CSSコースが大幅リフレッシュ、9つの新モジュールを追加#

日付：2025年9月8日

web.devのLearn CSSコースが4年ぶりに大幅リフレッシュされ、9つの新モジュールが追加された。

新モジュールには、CSS nesting、Container queries、Custom properties、Counters、Cursors and pointers、Anchor positioning、Popover and dialog、View transitions for SPAs、Paths, shapes, clipping, and maskingが含まれる。特にContainer queriesは2021年のコース開始時には存在しなかったが、現在はBaseline Widely availableに到達している。

Baseline機能に焦点を当てた実用的な内容で、Interop 2025に含まれるAnchor positioningとView transitions for SPAsも含まれている。業界専門家チームによる執筆・編集で、月間数千人の学習者に対応している。

出展：A refresh of Learn CSS with nine new modules - web.dev

Wrangler CLIで設定ファイルなしの静的サイトデプロイが可能に#

日付：2025年9月9日

Cloudflare Wrangler CLIで設定ファイルなしで静的サイトをデプロイできるようになった。wrangler deploy [directory]またはwrangler deploy --assets [directory]を実行すると、インタラクティブなプロンプトでデプロイメントプロセスをガイドする。

設定ファイルが存在しない場合、Wranglerが静的アセットのディレクトリを検出し、デプロイメントタイプの確認、プロジェクト名の入力、互換性日付の自動設定を行う。設定はwrangler.jsoncファイルとして自動生成され、今後のデプロイで再利用される。

Before:

1
wrangler deploy --assets ./dist --compatibility-date 2025-09-09 --name my-project

After:

1
wrangler deploy dist
2
# インタラクティブプロンプトで設定完了

Wrangler 4.24.4以降が必要。

出展：Deploy static sites to Workers without a configuration file - Cloudflare Changelog

Built with Cloudflareボタン#

日付：2025年9月10日

Cloudflareの「Built with Cloudflare」ボタンが更新され、Cloudflare上で構築していることを簡単に共有できるようになった。プロジェクトのREADME、ブログ投稿、その他の場所に埋め込んで利用可能。

1
[![Built with Cloudflare](https://workers.cloudflare.com/built-with-cloudflare.svg)](https://cloudflare.com)

出展：Built with Cloudflare button - Cloudflare Changelog

pnpm 10.16、minimumReleaseAgeとfinder functions#

日付：2025年9月12日

pnpm 10.16でminimumReleaseAge設定とfinder functionsが追加された。minimumReleaseAgeにより、パッケージ公開から指定時間経過後のインストールを遅延させ、悪意のあるバージョンのインストールリスクを低減できる。

pnpm listとpnpm whyコマンドでfinder functionsを利用し、依存関係を名前以外のプロパティで検索可能。.pnpmfile.cjs内でカスタム検索関数を定義し、--find-by=<関数名>フラグで使用する。

出展：pnpm 10.16 release notes

Deno 2.5、設定ファイル内権限設定とテストAPI拡張#

日付：2025年9月10日

Deno 2.5でdeno.json設定ファイル内でのパーミッションセット定義とテストAPIの拡張が実装された。パーミッションセットにより、異なるコマンドやコンテキストに応じた適切なパーミッション管理が可能。

1
{
2
  "permissions": {
3
     "default": {
4
      "read": ["./deno.json"],
5
      "env": true,
6
      "run": {
7
        "allow": ["git"]
8
      }
9
    },
10
    "process-data": {
11
      "read": ["./data"],
12
      "write": ["./data"]
13
    }
14
    // ...more permissions can be defined here by name...
15
  },
16
  "tasks": {
17
    // permissions.defaultの権限で実行
18
    "dev": "deno run -P main.ts",
19
    // permissions.process-dataの権限で実行
20
    "dev:process": "deno run -P=process-data main.ts"
21
  },
22
  // `deno test -P`で利用可能
23
  "test": {
24
    "permissions": {
25
      "read": ["./data"]
26
    }
27
  }
28
}

Deno.testにbeforeAll、beforeEach、afterAll、afterEachのAPIが追加され、テストケースの前後に特定の処理を実行できる。deno bundleコマンドでHTMLエントリーポイントをサポートし、deno runで全タスクとスクリプトの一覧表示が可能。

Deno.ChildProcessの標準入出力が簡素化され、より一貫性のある動作を提供する。

出展：Deno 2.5 release notes