Frontend Weekly 2025-04-18

2025年4月18日

Astro 5.7のSessions API安定化、SVG Components、Experimental Fonts API、Config Imports、h1要素のデフォルトスタイル変更、RspackとNext.jsの統合、Cloudflare WorkersへのNext.jsデプロイ、Googleの国別ドメイン統合について。

Table of Contents

# Astro 5.7リリース
# Sessions API
# SVG Components
# Experimental Fonts API
# Config Imports
# h1要素のデフォルトスタイル変更
# 各ブラウザの対応予定
# Lighthouse警告の修正方法
# RspackとNext.jsの統合についてRspackによる記事
# Cloudflare WorkersへのNext.jsのデプロイ
# Googleの国別ドメイン統合
# GitHub ActionsでmacOS 15とWindows 2025イメージの一般提供開始

Astro 5.7リリース

日付：2025年4月15日

Astro 5.7がリリースされた。Sessions APIが安定化され、SVG Components、Experimental Fonts API、Config Importsなどの新機能が追加された。

出展：Astro 5.7

Sessions API

Sessions APIが安定化され、本番環境での使用が可能になった。サーバーサイドでユーザー固有のデータを安全に保存可能。クライアントサイドのJavaScriptなしで動作する。

// src/components/CartButton.astro
const cart = await Astro.session.get('cart');
export const prerender = false;

<a href="/checkout">🛒 {cart?.length ?? 0} items</a>

TypeScriptの型安全性もサポート。

// src/env.d.ts
declare namespace App {
  interface SessionData {
    user: {
      id: string;
      name: string;
    };
    cart: string[];
  }
}

出展：Astro 5.7#sessions-api

SVG Components

ローカルのSVGファイルをコンポーネントとして使用可能になった。SVGコンポーネントは自動的にHTMLに<svg>タグとしてインライン化される。

// src/components/MyAstroComponent.astro
import Logo from './path/to/svg/file.svg';

<Logo width={64} height={64} fill="currentColor" />

出展：Astro 5.7#svg-components

Experimental Fonts API

Experimental Fonts APIが追加された。ファイルシステムやGoogle、Fontsource、Bunnyなどのプロバイダーからフォントを統一的に使用可能。パフォーマンス最適化とフォールバックフォントの自動生成を含む。

// astro.config.mjs
import { defineConfig, fontProviders } from "astro/config";

export default defineConfig({
    experimental: {
        fonts: [{
            provider: fontProviders.google(),
            name: "Roboto",
            cssVariable: "--font-roboto"
        }]
    }
});

出展：Astro 5.7#experimental-fonts-api

Config Imports

astro:config仮想モジュールが安定化された。Astroの設定を型安全にインポート可能。

// src/utils.js
import { trailingSlash, base } from 'astro:config/client';

function addForwardSlashAndBase(path) {
    let finalPath;
    if (trailingSlash === 'always') {
      finalPath = path.endsWith('/') ? path : path + '/';
    } else {
      finalPath = path;
    }
    if (base !== "/") {
        return base + finalPath
    }
    return finalPath
}

出展：Astro 5.7#config-imports

h1要素のデフォルトスタイル変更

日付：2025年4月11日

ブラウザベンダーが<section>、<article>、<nav>、<aside>内の<h1>要素に対するUAスタイルシートのデフォルトスタイルを廃止する動きを開始した。これらの変更により、入れ子になったセクション見出しのスタイリングが変わる。

HTMLの仕様には以前、<h1>要素に暗黙的なセマンティックな見出しレベルを与えるアウトラインアルゴリズムが定義されていた。このアルゴリズムでは、<h1>がいくつのセクショニング要素の中にネストされているかに基づいてレベルが決まっていた。例えば：

<body>
  <h1>Level 1</h1>
  <section>
    <h1>Level 2</h1>
    <section>
      <h1>Level 3</h1>
    </section>
  </section>
</body>

現在のブラウザレンダリングでは、section > h1は<h2>と同じフォントサイズとマージンを持ち、section > section > h1は<h3>として表示される。これはUAスタイルシートで実装されていたが、アクセシビリティツリー（スクリーンリーダーが使用するもの）での見出しレベルは反映されていなかった。

このアウトラインアルゴリズムは2022年にHTML仕様から削除されたが、UAスタイルシートのルールは残っていた。現在、ブラウザベンダーはこれらのUAスタイルシートルールの削除を開始している。

出展：h1 element styles

各ブラウザの対応予定

Firefox

Firefox Beta 138（2025年3月31日〜）で段階的に展開開始
Firefox 140ですべてのプラットフォームに完全展開予定
Firefox 136以降はコンソール警告を表示中
テスト方法：about:configでlayout.css.h1-in-section-ua-styles.enabledをfalseに設定

Chrome

バージョン136以降、Chromeはデフォルトの小さいフォントサイズを使用している4つの要素内の<h1>に対して非推奨警告を表示。
Chromiumで非推奨としてマークすると、「ベストプラクティス」のLighthouseスコアが下がる。

Safari

Safariでのこれらの変更を追跡する実装バグはまだないが、WebKitも同様の更新に追随すると予想される。

Lighthouse警告の修正方法

Lighthouseには、<section>、<article>、<nav>、<aside>内の<h1>要素にfont-sizeを指定していないサイトに対するチェックが追加された。新しいルールはH1UserAgentFontSizeInSectionと呼ばれ、3月以降に非推奨警告の追加に伴い表示されるようになった。

推奨されるスタイルは以下の通り：

h1 {
  margin-block: 0.67em;
  font-size: 2em;
}

または、詳細度が常に0になる:where()を使用して：

:where(h1) {
  margin-block: 0.67em;
  font-size: 2em;
}

RspackとNext.jsの統合についてRspackによる記事

日付：2025年4月10日

RspackがNext.jsエコシステムに統合された。next-rspackプラグインにより、webpackベースのプロジェクトでRspackを使用可能になった。

Page Routerユーザー向けのパフォーマンスは以下の通り：

開発モード：webpackの2倍高速
本番モード：webpackの1.5倍高速

App Routerの実装は現在、Turbopackやwebpackよりも遅いが、JavaScriptプラグインのRustへの移植により改善が期待される。

出展：Rspack joins the Next.js ecosystem

Cloudflare WorkersへのNext.jsのデプロイ

日付：2025年4月8日

Cloudflareが@opennextjs/cloudflareの1.0.0-betaをリリースした。Next.jsアプリをCloudflare Workersにデプロイするための公式アダプター。

主な機能：

App RouterとPages Routerの両方をサポート
キャッシュ、PPR、ミドルウェア、画像最適化に対応
開発環境ではnpm run devでNext.jsの開発サーバーを使用可能

出展：Deploy your Next.js app to Cloudflare Workers

Googleの国別ドメイン統合

日付：2025年4月

Googleが国別トップレベルドメイン（ccTLD）の統合を開始した。google.co.jpやgoogle.com.brなどの国別ドメインからのトラフィックをgoogle.comにリダイレクトするようになる。2017年からローカル検索結果はgoogle.comでも提供されており、国別ドメインは不要になったため。

SEOへの影響はほぼないと思われるが、国や言語別の分析には影響が出る可能性がある。

出展：Country code top-level domains

GitHub ActionsでmacOS 15とWindows 2025イメージの一般提供開始

日付：2025年4月10日

GitHub ActionsでmacOS 15とWindows 2025のイメージが一般提供開始された。

出展：GitHub Actions: macOS 15 and Windows 2025 images are now generally available