Frontend Weekly 2025-04-18
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 なしで動作する。
const cart = await Astro.session.get("cart");export const prerender = false;
<a href="/checkout">🛒 {cart?.length ?? 0} items</a>;TypeScript の型安全性もサポート。
declare namespace App { interface SessionData { user: { id: string; name: string; }; cart: string[]; }}SVG Components
ローカルの SVG ファイルをコンポーネントとして使用可能になった。SVG コンポーネントは自動的に HTML に<svg>タグとしてインライン化される。
import Logo from './path/to/svg/file.svg';
<Logo width={64} height={64} fill="currentColor" />Experimental Fonts API
Experimental Fonts API が追加された。ファイルシステムや Google、Fontsource、Bunny などのプロバイダーからフォントを統一的に使用可能。パフォーマンス最適化とフォールバックフォントの自動生成を含む。
import { defineConfig, fontProviders } from "astro/config";
export default defineConfig({ experimental: { fonts: [ { provider: fontProviders.google(), name: "Roboto", cssVariable: "--font-roboto", }, ], },});Config Imports
astro:config仮想モジュールが安定化された。Astro の設定を型安全にインポート可能。
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;}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 スタイルシートルールの削除を開始している。
各ブラウザの対応予定
Firefox
- Firefox Beta 138（2025 年 3 月 31 日〜）で段階的に展開開始
- Firefox 140 ですべてのプラットフォームに完全展開予定
- Firefox 136 以降はコンソール警告を表示中
- テスト方法：about
で 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 への移植により改善が期待される。
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 の開発サーバーを使用可能
Google の国別ドメイン統合
日付：2025 年 4 月
Google が国別トップレベルドメイン（ccTLD）の統合を開始した。google.co.jpやgoogle.com.brなどの国別ドメインからのトラフィックをgoogle.comにリダイレクトするようになる。2017 年からローカル検索結果はgoogle.comでも提供されており、国別ドメインは不要になったため。
SEO への影響はほぼないと思われるが、国や言語別の分析には影響が出る可能性がある。
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