Astro v3.0以降から最新バージョンのv4.5までの変遷

はじめに

こんにちは、ねむです。3月後半になってくると、例年通り春らしい気温になってくる・・・かと思いきや、関東でも10度未満になることも多々あり、まだまだコートが手放せない今日この頃。皆さんも風邪など引かないよう、体調管理に気をつけてお過ごしください。

前回、昨年9月にAstro v3.0における更新内容について別の記事で紹介させていただきました。

Astro v3の新機能紹介とv2からのアップグレード手順について この記事では、Astro v3で追加された新機能や、v2からのアップグレード手順や注意点などをまとめて紹介します。番外編もあるのでお楽しみに！

あれから約半年が経過しましたが、Astroの最新バージョンはv4.5となり、様々な機能追加や開発体験の改善など、興味深いアップデートが次々と繰り返されてきましたので、今回は前回からの続きで、最新バージョンのv4.5までの変遷について紹介していきたいと思います。

v3.2: よりスムーズな画面遷移と強化されたインテグレーション機能

v3.2では、画面遷移 (View Transitions) の機能強化が行われ、さらに使いやすくなりました。

開発者にとって画面遷移の制御やインテグレーション機能の拡張を行いやすくし、ユーザーにとってはよりスムーズで快適なウェブ体験を提供します。

ブラウザの履歴操作を自由に

リンクをクリックした際、ブラウザの履歴には新しいページ情報が追加されます。

v3.2 では、リンクに data-astro-history="replace" 属性を追加することで、この履歴追加を抑制できるようになりました。

ノート

不要な「戻る」ボタンのクリックを防げたり、フォーム送信後の確認画面など、戻る必要のないページ遷移での履歴蓄積を回避できます。

JavaScriptでページ遷移を可能に

これまでは、ユーザーがアンカーリンクをクリックした時のみ画面遷移が起きていました。

v3.2の新機能 navigate() API を用いることで、JavaScriptからページ遷移をトリガーできるようになりました。

ノート

ユーザーはドロップダウンメニューで選択された項目に応じて自動的にページ遷移させる、といったことが可能になります。

スクリーンリーダーへの配慮

Astroの画面遷移は、従来のMPA (Multi-Page Application) と異なり、ページ読み込み完了後に自動的にページタイトルを読み上げません。

そのため、スクリーンリーダーを利用するユーザーにとって、現在のページが何かが分かりにくくなってしまいます。

v3.2 では、ページ遷移後に <title> タグの内容を読み上げるルートアナウンサーが搭載されました。

ノート

もし <title> タグがない場合は、最初の <h1> タグの内容、もしくはパス名を読み上げます。

アクセシビリティを向上させるためにも、常に各ページに <title> タグを設定することをおすすめします。

より柔軟なインテグレーション機能

インテグレーション機能自体が、セットアップ中に他の統合機能を動的に追加・設定できるようになりました。

ノート

インテグレーション機能の開発者が、用途に合わせてより柔軟に機能を組み合わせられるようになります。

v3.3: 強化された画像管理機能と開発者エクスペリエンス向上

v3.3では、画像管理機能の強化と開発者エクスペリエンス向上の施策が複数含まれています。

新機能: <Picture /> コンポーネントによる最適化された画像配信

以前のAstroでも専用の画像コンポーネントが存在していました。しかし、より高度な機能を開発するために一時的に廃止されていました。

今回導入された <Picture /> コンポーネントは、ユーザーのデバイスやネットワーク環境に合わせて最適な画像を配信する機能を提供します。

ノート

ページの読み込み速度向上とデータ通信量の削減が期待できます。

<Picture /> コンポーネントは、ブラウザが選択できるように複数の画像フォーマットを指定することができます。

例えば、次のようなコードでは、 avif や webp といった最新のフォーマットの画像も合わせて用意することで、ブラウザが最適なフォーマットを選択できます。

import { Picture } from 'astro:assets';
import myImage from './my-image.jpg';

<Picture src={myImage} formats={['avif', 'webp']} alt="My super image in multiple formats!" />

その他の強化された画像管理機能

<Picture /> コンポーネントの導入以外にも、既存の画像管理機能が強化されています。

ピクセル数や端末の画面サイズに基づいて最適な画像を配信する機能などが追加されています。

開発者エクスペリエンスの向上

今回のアップデートでは、開発者エクスペリエンスの向上が図られています。

コードハイライト機能の改善や、パッケージのセキュリティ強化など、開発効率と安全性を高める機能が複数含まれています。

v3.4: パーツ別レンダリングと開発者向け機能の強化

v3.4では、ページの一部を再利用可能なパーツとして扱う機能や、開発効率を高める実験的な機能が追加されています。

Page Partials（ページの部分利用）機能の導入

v3.4では、ページの一部を他のページに組み込むためのパーツとして扱うことができます。

ノート

この機能は、ページ全体の構造を定義するラッパーのようなコンポーネントと、具体的なコンテンツを記述するパーツを分離させたい場合に便利です。

パーツとして扱うページは、通常のHTMLファイルだけでなく、.astro ファイルでも利用できます。パーツとしてマークするには、コンポーネントのフロントマターに partial: true を設定します。

例えば、次のようなコードは、単一のリストアイテムをパーツとして定義しています。

---
 export const partial = true;
---
<li>This is a single list item.</li>

このコードは、以下のHTMLを生成します。

<li>This is a single list item.</li>

ノート

パーツは、外部のライブラリと組み合わせることで威力を発揮します。例えば、htmx や Stimulus といった、HTML断片の取得をベースとしたライブラリと連携させることで、動的なコンテンツの更新を実現できます。

画像処理の高速化

静的サイトのビルドにおいて、Astroは画像の最適化処理を並列実行するようになりました。また、同じ画像に対して複数のバリエーションが存在する場合でも、Astroは効率的にメモリを再利用するようになりました。

ノート

画像が大量に含まれるサイトのビルド時間が短縮され、リモート画像を含むサイトのパフォーマンス向上が期待できます。

開発者向けオーバーレイ（実験機能）

v3.4には、実験的な開発者向けオーバーレイ機能（Dev Overlay）が追加されました。

ノート

この機能を利用すると、ページの各パーツを調べたり、パフォーマンスやアクセシビリティに関する監査結果を確認したりできます。

さらに、オーバーレイ機能を拡張するためのプラグインAPIが用意されており、独自の機能を追加したり、サードパーティ製のインテグレーション機能を利用したりすることが可能です。

なお、開発者向けオーバーレイ機能とAPIを有効にするには、Astroの設定ファイルに以下のフラグを追加します。

export default {
  experimental: {
    devOverlay: true
  }
};

v3.5: 国際化対応（i18n）・高速化・開発者向け拡張機能の充実

v3.5の目玉機能は、複数言語対応（i18n）、プレフェッチ、コンテンツコレクションのビルドキャッシュなど、Astroの歴史上、マイナーバージョンとしては最大級のアップデートが満載です。

国際化ルーティングで多言語サイトを容易に構築可能に

Astroの国際化ルーティングAPI（実験機能）を利用すれば、複数の言語に対応したコンテンツを簡単に構築できます。

ノート

既定言語の設定、相対的なページURLの計算、訪問者のブラウザから送られる言語設定の受け入れなどを行うことができます。

さらに、訪問者が常に既存のコンテンツにアクセスできるように、言語ごとのフォールバック言語も指定できます。

国際化ルーティングを有効にするには、Astroの設定ファイルに i18n オブジェクトを追加し、既定のロケールとサポートするすべての言語のリストを指定します。

import {defineConfig} from "astro/config";

export default defineConfig({
  experimental: {
    i18n: {
      defaultLocale: "ja",
      locales: ["ja", "en"]
    }
  }
})

コンテンツの高速表示を実現するプリフェッチ

プリフェッチは、ブラウザが事前にページを読み込んでおく機能で、ユーザーがページ遷移する前にコンテンツの一部をロードしておくことができます。

ノート

特に、複数ページで構成されるアプリケーションにおいて、プリフェッチはサイトの高速化に欠かせない機能です。

従来、Astroでは公式インテグレーション機能である @astrojs/prefetch を用いてプリフェッチを利用できましたが、今回のバージョンアップでAstroの標準機能として追加されました。

コンテンツコレクションのビルドキャッシュでビルド高速化

コンテンツコレクションを大量に使用する大規模な静的サイトでは、新しい実験的なビルドキャッシュ機能を試すことができます。

ノート

この機能は、Astroのビルド処理を複数回にわたって見直し、コンテンツコレクションの処理を最適化することで、多くのコレクションを持つユーザーのパフォーマンスを向上させるものです。

フォームも View Transitions でアニメーション付き遷移

<View Transitions /> ルーターは、フォーム送信時にも <a> リンクの場合と同様に、アニメーション付きの遷移と状態を維持したUIを実現できます。

画像最適化のさらなる向上

Astroの最適化機能は継続的に改善されており、v3.5では以下の機能が追加されています。

• 最適化パイプラインの外で使用されないオリジナル画像は、最終的なビルドから削除されます。大量のサムネイル画像などがある場合、ストレージ容量とデプロイ時間を削減できます。

• getImage()、<Image />、<Picture /> の結果ファイルをハッシュ化する際に使用する propertiesToHash プロパティが新しく追加されました。

• <Picture /> コンポーネントは、オリジナル画像が jpg または jpeg 形式の場合に、それぞれ jpg 形式と jpeg 形式をフォールバック形式として使用するようになりました。

インテグレーション機能でミドルウェアを追加可能に

従来、Astroではサードパーティがミドルウェアを提供する場合、ユーザー自身が src/middleware.ts ファイルを作成する必要がありました。

ノート

今回のバージョンアップにより、インテグレーション機能がユーザーに代わってミドルウェアを追加することが可能になりました。

コードテーマの切り替え（実験機能）

Astroでは、構文強調のために最近 shikiji ライブラリにアップグレードしましたが、今回新たに markdown.shikiConfig.experimentalThemes オプションを追加し、複数のテーマをサポートする機能が搭載されました。

ノート

コードブロックに対して、ライトモードとダークモードのテーマを簡単に定義できるようになります。

Qwikとの統合

Astroで Qwik を利用するためのインテグレーション機能が公開されました。

v4.0: 高速ビルド、新機能、洗練されたドキュメントなど盛り沢山

v4.0では、新機能の追加、高速ビルドの実現、ドキュメントのリデザイン、そして開発体験を向上させるユニークなツールが追加されています。

Astro Dev Toolbar

v4.0では、開発体験を向上させる新しいツール、Astro Dev Toolbar が導入されました。

ノート

このツールバーは、ローカルブラウザ開発環境を拡張し、カスタマイズするための強力な手段を提供します。

ページの検査機能

ページ上のインタラクティブな UI コンポーネントアイランドをハイライト表示します。このツールバーアプリは、Astro独自のアイランドアーキテクチャを活用するように設計されています。

ノート

ページ上のアイランドをハイライトすることで、どの要素がインタラクティブで、どの要素が軽量な静的HTMLであるかを理解しやすくなります。

さらに、プロパティを表示したり、コードエディタでコンポーネントを直接開いたりすることができます。

ページの監査機能

ページをテストして、一般的なアクセシビリティの問題を検出します。

ノート

代替テキストのない画像や、誤った設定のaria属性などを、ブラウザを離れることなく容易に検出できます。

Sentryとの提携

Sentryと提携して本ツールバーの最初のバージョンを開発しました。

ノート

Sentryは Webアプリケーション向けのリーディングアプリモニタリングプラットフォームであり、Astroの新しいスタンドアロンデバッグツール開発に協力しています。

Storyblokとの提携

公式CMSパートナーであるStoryblokも、公式Astroインテグレーション機能の一環としてツールバーアプリを提供しています。

v4.0では、すべてのStoryblokユーザーはツールバーに新しいアプリが表示されました。

ノート

Storyblok + Astro に関するドキュメント、チュートリアル、コミュニティリソースにすばやくアクセスできます。

サードパーティ製アプリ

Astroのサイト開発者やサードパーティ製インテグレーション機能の開発者は、新しいDev Toolbar API を使用して、開発用の独自埋め込みJavaScriptアプリケーションを構築することができます。

ノート

開発ツール構築のためのまったく新しいプリミティブが提供され、次のような機能が実現します。

• ブラウザ内で直接テストを実行して文法エラーを表示する
• localtunnel を使用して開発環境をインターネットに公開する
• Squoosh 画像オプティマイザーなどの外部ツールに簡単にアクセスする
• 開発中にユーザーアカウントを切り替えるなど、共通タスクを管理ツールから自動化できる

国際化 (i18n) ルーティング

v4.0では、新しい国際化ルーティング機能が導入されました。この機能により、複雑さを軽減し、グローバルにアクセス可能なウェブサイトを構築することができます。

ノート

この機能により、次のような設定をカスタマイズすることができます。

• 特定のロケールでコンテンツが利用できない場合のフォールバック
• URL にロケール名を追加するプレフィックス動作
• 共通のロケールと言語コードのエイリアス

設定例は以下のとおりです。

import { defineConfig } from "astro/config"

export default defineConfig({
  i18n: {
    defaultLocale: "en",
    locales: ["en", "es", "pt-br"]
  }
})

サーバーサイドレンダリング (SSR) を使用した server ビルドの場合、Astroはユーザーの優先言語を自動的に検出するため、コンテンツをさらに調整したり、リダイレクトを追加したり、ルート処理をさらにカスタマイズしたりすることができます。

ノート

国際化ルーティングのサポートは、v3.5で実験的な機能として初めて導入されましたが、v4.0で安定版リリースとなりました。

インクリメンタルコンテンツキャッシュ（実験機能）

v4.0では、大規模なWebサイトのビルドパフォーマンスを大幅に向上させるために、インクリメンタルコンテンツキャッシュという実験的な新機能が導入されました。

インクリメンタルコンテンツキャッシュを追加することで、astro build コマンド内での不要な重複作業を削減することができます。

ノート

実際に、Astroドキュメント🔗のコードでコンテンツキャッシュを有効にすると、関連するステップの astro build の実行時間は2分13.20秒から10.46秒に短縮され、約92%高速になりました。ビルド全体の時間は4分58秒から60秒強に短縮され、ビルド全体の時間は 80% 高速になりました。

インクリメンタルコンテンツキャッシュは、Content Collections API にフックされており、Astroはコレクションコンテンツへのアクセスと管理のためのAPIがあるため、内部ビルドマニフェストを使用してコレクション内の変更を安全に追跡することができます。

Astroは毎回のビルドでキャッシュをチェックし、変更されていないコンテンツエントリを再利用することができます。

ノート

インクリメンタルコンテンツキャッシュの試験的なサポートは、v3.5で初めて「Content Collections Build Cache」という名前で導入されましたが継続して試験中のため、v4.0でも実験的な機能として提供されています。

experimental.contentCollectionCache を有効にすることで、ビルド速度を向上させることができます。

新しいView Transition API

v3.0で View Transition という新しいAPIが導入されました。今回のv4.0では、View Transition をさらに一歩進め、より多くの設定が可能なAPIと新しく魅力的なユースケースが提供されます。

フォーム

View Transition は、静的HTMLフォームと動的クライアントサイドフォームコンポーネントと対話できるようになり、リンクナビゲーションではなくフォーム送信時にトランジションをトリガーできます。

プリフェッチ

リンクは、ホバー、タップ、またはページ上で表示されたときにプリフェッチされるように指定できます。個々のリンクのプリフェッチを有効または無効にすることもできます。

ルートアナウンサー

支援技術向けの組み込み機能です。

navigate() JavaScript API

手動でナビゲーションをトリガーするために使用できる低レベルAPIです。

完全なライフサイクルイベントシステム

組み込まれた要素スワッピングアルゴリズムを独自のアルゴリズムに置き換えることができます。

リデザインされたロギング

Astro CLI は、v4.0で刷新されたロギングエクスペリエンスを提供します。主な変更点は以下の通りです。

不要なロギングの削除

以前は、一般的なシナリオで二重ログやその他の不要なログが出力されることがありました。

より簡潔なエラー

エラー文言がターミナルで占める行数が少なくなり、何か問題が発生した場合でも、小さなターミナルでのスクロールが減ります。

洗練されたスタックトレース

デフォルト状態では、不要なViteランタイム内部情報が含まれなくなり、Astroのdevコマンドとbuildコマンドは、v4.0でさらに読みやすく、解析しやすく、デバッグしやすくなりました。

リデザインされたドキュメント

Starlight は、Astroの公式ドキュメントテンプレートです。これは、過去2年間にAstroドキュメントサイトを構築し、管理してきた中で収集したベストプラクティスとパターンをすべて含んでいます。

Astroドキュメントサイト🔗は Starlight によって提供されるようになりました。

Starlight に切り替えたことで、Astroドキュメントサイト🔗に施した改善点が Starlight にフィードバックされ、誰もが恩恵を受けることができるようになりました。

ノート

Astroドキュメントサイト🔗のおかげで、Starlight は Expressive Code や新しい Algolia プラグインなどの機能が追加されました。

v4.1: アクセシビリティ向上と便利な新機能が追加

v4.1では、バグフィックスと改善がメインのため機能追加は控えめでした。

新しいアクセシビリティ監査ルールの追加

開発者ツールバーに2つの新しい監査ルールが追加されました。

ノート

以下の問題について警告を受け取ることができます。

• サポートされていないaria属性
• ariaロールに必要な属性がない

これらのルールにより、ページの要素が正しく有効なariaロールを持つように開発をアシストしてくれます。

client:visible ディレクティブの拡張

client:visible ディレクティブに rootMargin オプションが追加されました。

ノート

可視性を計算するためのViewport周辺のmarginを指定できます。

この機能を活用すると、コンポーネントが完全に可視になるのを待たずに、Viewportの近くにきた時点でハイドレーションを行うことが可能になります。

カスタムCookiesのエンコード/デコードが可能に

Cookiesの設定と取得を行う際に、新しい encode と decode 関数を使って、エンコード/デコード処理をカスタマイズできるようになりました。

v4.2: コミュニティ主導の機能追加と改善多数

v4.2では、実験的な新機能の追加、アクセシビリティルールの改善、Markdown内の画像最適化をカスタマイズするRemarkプラグインのサポートなど、多くの改善とバグ修正が施されています。

Speculation Rules API を使用したページのプリレンダリングのサポート追加（実験機能）

prefetch 機能において、現在Chromium限定の Speculation Rules API を用いた実験的なページプリレンダリングをサポートするようになりました。

ノート

このAPIを利用すると、クライアント側でページをプリレンダリングし、さらにはユーザーが次に訪れる可能性の高いページでクライアントサイドJavaScriptを実行できるようになるため、ブラウジング体験の高速化が実現します。

この機能を有効にするには、astro.config.mjs ファイルに以下を追加します。

import { defineConfig } from 'astro/config';

export default defineConfig({
  prefetch: true,
  experimental: {
    clientPrerender: true,
  },
});

既存の prefetch 設定は引き継がれますが、 data-astro-prefetch 属性を持つすべてのリンクに対して、サーバではなくクライアント側でプリレンダリングが行われるようになります。

ノート

Speculation Rules API に対応していないブラウザ向けには、代替処理が用意されています。

さらに、 <script> タグ内で document.prerendering プロパティを使用して、ページがプリレンダリングされているかどうかを確認することができます。

<script>
  if (document.prerendering) {
    // プリレンダリングが有効
  }
</script>

インジェクションルートのルーティング優先順位の改善（実験機能）

以前は、 injectRoute() API を使って注入されたルートは、他のどのルートよりも優先順位が高く、最初にマッチングされるようになっていました。

一見理にかなっているように思えたこの仕様でしたが、残念ながら予期しないルートマッチングが発生するなど、デバッグしにくい問題が頻発していました。

そこで、v4.2では実験的なフラグが導入されました。

ノート

このフラグを有効にすると、 injectRoute() APIを使って注入されたルートとリダイレクトは、ファイルシステムからのルートと同じ優先順位で処理されるようになります。

プロジェクト内の全てのルートに対して、より安定した一貫性のある優先順位付けが実現します。

また、2つのルートが同じURLを生成しようとしている場合に、ルートの衝突を知らせるログが出力されるようにも改善されました。

experimental.globalRoutePriority オプションを追加することで有効化できます。

import { defineConfig } from 'astro/config';

export default defineConfig({
  experimental: {
    globalRoutePriority: true,
  },
});

デフォルトロケールへの自動リダイレクトオプションの追加

v4.0で国際化サポートが導入されて以来、よく寄せられていた要望の一つとして、 prefixDefaultLocale: true が設定されている場合に、ルートURL（/）のデフォルトロケールへの自動リダイレクトを無効にする機能が挙げられます。

今回、待望の redirectToDefaultLocale オプションが追加されました。

ノート

デフォルトロケールへのリダイレクトを無効化し、ユーザーを現在のロケールに留めることができるようになりました。

redirectToDefaultLocale を false に設定すれば、リダイレクトを無効にして、ユーザーを現在のロケールに留めることができます。

import { defineConfig } from 'astro/config';

export default defineConfig({
  i18n:{
    defaultLocale: "ja",
    locales: ["ja", "en"],
    routing: {
      prefixDefaultLocale: true,
      redirectToDefaultLocale: false,
    }
  }
});

アクセシビリティルールの改善

Astro Dev Toolbar にv4.0で追加されたアクセシビリティルールは、より正確な判定を行うように改善されました。

Markdown内の画像最適化をカスタマイズするRemarkプラグイン

Remarkプラグインを使ってMarkdown（.mdのみ）内の画像最適化をカスタマイズできるようになりました。

ノート

従来、Markdownでネイティブ構文（alt: src）を使って挿入された画像は、Astroのデフォルト画像最適化設定が適用されていましたが、v4.2ではRemarkプラグインを使って image ノードにプロパティを追加し、画像最適化の挙動をカスタマイズできるようになりました。

v4.3: 国際化の新機能、ビルド出力の改善など盛り沢山

v4.3では、国際化の実験的な新機能の追加、ビルド出力のよりきめ細かい制御、コンポーネントの型定義、Markdown内の画像パス指定子の改善など、様々な機能向上と改善が盛り込まれています。

国際化ドメインサポート（実験機能）

v4.3では、実験的な domains 国際化設定が追加されました。

ノート

サポートするロケールごとに、異なるドメインまたはサブドメインを指定できるようになります。

例えば、英語版サイトに example.com、中国語版サイトに zh-cn.example.com を割り当てることができます。

実験的なフラグ i18nDomains を有効にして、 astro.config.mjs ファイルの i18n.domains を設定することで、ロケールをドメインにマッピングできます。

import {defineConfig} from "astro/config"

export default defineConfig({
  site: "https://example.com",
  output: "server",
  adapter: node({
    mode: 'standalone',
  }),
  i18n: {
      defaultLocale: 'ja',
      locales: ['ja', 'en', 'zh_CN'],
      domains: {
          en: "https://en.example.com",
          zh_CN: "https://zh-cn.example.com",
      },
      routing: {
        prefixDefaultLocale: true,
      }
  },
  experimental: {
      i18nDomains: true
  },
})

この機能は、完全にサーバーレンダリングされたサイトで、プレレンダリングされたページを持たない場合にのみ使用できます。@astrojs/node と @astrojs/vercel アダプターのみサポートされています。

HTMLファイル出力のきめ細かな制御

v4.3では、ビルドオプション build.format に新しい preserve オプションが追加されました。これにより、本番環境での生成されるHTMLファイルをより細かく制御できます。

既存の file と directory オプションでは、すべてのHTMLページをルート名に一致したファイル /about.html としてビルドするか、すべてのファイルをネストされたディレクトリ構造内の index.html としてビルドするか、のどちらかしか選択できませんでした。

そのため、個別のインデックスページ /about/index.html を作成することができませんでした。

そこで、 preserve オプションが導入されることで、ファイルシステムの構造を維持し、本番環境でも同じ構造になるように保証されるため、見た目がそのまま出力されるようになります。

Astro ファイル	生成される HTML ファイル
about.astro	about.html
about/index.astro	about/index.html

ノート

この機能は、ファイル構造に関する厳しい要件を持つ特定のウェブサーバーとの互換性を向上させます。

ComponentProps型ユーティリティの追加

Astro では、Astro コンポーネントの型を取得するための新しい ComponentProps 型エクスポートが astro/types から利用可能になりました。これは、React の React.ComponentProps や Svelte の ComponentProps に似ています。

ノート

この型エクスポートを使用すると、別のコンポーネントが受け取る Props を参照することができ、そのコンポーネントが Props 型を直接エクスポートしていなくても参照できます。

Markdownでの相対指定子なしの画像使用の改善

以前は、Markdown ファイルで相対指定子 ./ や ../ を使用せずに画像を使用すると、Astro でエラーが発生していました。

v4.3では、同じフォルダにある画像については、標準的な ![](img.png) 構文を使用できるようになりました。

ノート

相対指定子は不要となりますが、従来どおり指定されていても正常に動作します。

v4.4: パフォーマンス改善、自動画像サイズ推定など盛り沢山

v4.4では、開発者ツールのパフォーマンス監査、ストリーミングパフォーマンスの向上、リモート画像のサイズ自動推定機能など、様々なパフォーマンス改善と新機能が追加されています。

パフォーマンス監査

開発者ツールにパフォーマンス監査機能が追加されました。

ノート

既存のアクセシビリティ監査と同様に、パフォーマンス監査はAstroサイトのパフォーマンス上の問題を特定し、修正するのに役立ちます。

例えば、遅延読み込みの画像がファーストビュー内に表示されている場合、代わりに Eager Loading を使用してパフォーマンスを向上させるように開発者ツールが提案してくれるようになります。

監査リスト

開発者ツールの監査アプリには、検出された問題のリストを表示するUIが追加されました。

ノート

このリストは修正すべき問題をすばやく確認し、修正箇所にジャンプするのに便利です。

ストリーミングパフォーマンスの向上

v4.4ではストリーミングのパフォーマンスが向上しました。最近、Node.js 上で ReadableStreams が予想よりも遅かったことが判明したため、Node.js で実行している場合に Astro を AsyncIterable を使用するように移行しました。

ノート

注目すべきは、サイドバーが大きい Starlight サイトのビルド時間が 最大47% 短縮されたケースもあるという点です。

特別な設定は必要なく、より高速なビルド時間と向上した実行時パフォーマンスを得ることができます。

リモート画像の自動サイズ推定

v4.4ではリモート画像のサイズを推定できるようになりました。新しい inferSize 属性は、これまで必須だったリモート画像の width と height 属性の代替として使用できます。

ノート

画像のサイズがビルド時にはわからないことが多い、CMSや他の外部ソースからの画像を扱う場合に特に便利です。

但し、この機能は、特に SSR ではパフォーマンスに影響を与えるため、必要に応じてのみ使用するのが良さそうです。

リモート画像のサイズを推定可能であれば、 width と height 属性を手動で指定することが推奨されています。

この機能を有効にするには、 Image または Picture コンポーネントで inferSize プロパティを true に設定します。

import { Image, Picture } from "astro:assets";

<Image src="https://example.com/image.jpg" alt="A cool image" inferSize />
<Picture src="https://example.com/image.jpg" alt="A cool image" inferSize />

または、getImage() のパラメーターとしても使用できます。

import { getImage } from "astro:assets";

const processedImage = await getImage({ src: "https://example.com/image.jpg", inferSize: true });

v4.5: 開発体験向上、新機能多数

v4.5の目玉は、開発者体験を向上させる全く新しい Dev Audit UI です。ブラウザを離れることなく、サイトのパフォーマンスとアクセシビリティの問題を自動的に特定できます。

Dev Audit UIの導入

サイトパフォーマンスやアクセシビリティの問題の中には、ブラウザ上でのみ検出できるものがあります。これらの問題をテストするのは面倒で時間がかかり、多くの開発者がスキップしたり、そもそも忘れたりしがちです。

Astroでは Dev Audit UI によって監査結果を視覚化し、ナビゲートすることができます。カテゴリ別に問題を参照したり、クリックして詳細を確認したり、これらはすべて開発用ブラウザ内で行え、ページ上の実際の UI 要素と合わせて表示されます。

ノート

ページ上の要素に対し、問題としてフラグが立てられているのが何故なのかを理解しようとする際に特に便利です。

問題をクリックすると、その要素のあるページの部分にすぐにスクロールされます。さらに、各項目には説明と詳細なガイダンスが付属しています。

View Transitions機能の強化

View Transitions を使用する場合、transition:persist プロパティを使用して永続化されたAstroアイランドは、ページが変更されたときに新しいプロパティで更新できるようになりました。

ノート

例えば、リスト表示に対してユーザーにより設定されたフィルター指定をページ遷移時にも維持したい場合に便利です。

以前は、コンポーネントを構築してリストを手動で更新する必要がありましたが、今後は同じフィルター状態を維持しながら、ページが変更されたときに新しいプロパティで自動的に再描画できるようになりました。

この機能は設定を必要とせず、デフォルトで有効になっています。必要に応じて、transition:persist-props プロパティを使用してこの動作を無効にすることができます。

また、ユーザーの利便性向上させるため、インラインスクリプトタグに追加できる data-astro-rerun 属性が用意されました。この属性を使用すると、ページが変更されるたびにスクリプトが自動的に再実行されます。

<script data-astro-rerun is:inline>
  console.log('This script will rerun when the page changes!');
</script>

Shikiへの回帰

以前のリリースで、Astroの構文ハイライトを Shiki のフォークである Shikiji を使用するように移行しましたが、 Shikiji は最近 Shiki にマージされたため、Astroも Shiki に戻りました。

ノート

この変更による影響は特にありませんが、v4.5では構文ハイライトに関するいくつかのメリットを享受できるようになりました。

• markdown.shikiConfig.experimentalThemes オプションが markdown.shikiConfig.themes として安定化され、デュアルテーマのサポートが容易になりました。
• <Code /> コンポーネントは、内部の <pre> または <code> 要素に渡される任意の属性名を受け入れるようになりました。これにより、コードブロックのレンダリング時のスタイリングと柔軟性が向上しました。

マルチCDNアセットプレフィックスの導入

v4.5では、異なるファイル拡張子に対して異なるCDNプレフィックスを指定する機能が導入されました。

ノート

異なる種類のコンテンツを異なるCDNから取得したい場合に便利です。

この機能を使用するには、build.assetsPrefix オプションを astro.config.mjs に追加します。ファイル拡張子はキーとして、CDNプレフィックスは値として指定します。

import { defineConfig } from "astro/config"

export default defineConfig({
    build: {
        assetsPrefix: {
            'js': "https://js.cdn.example.com",
            'png': "https://images.cdn.example.com",
            'fallback': "https://generic.cdn.example.com"
        }
    }
})

データコレクション用のJSONスキーマの導入（実験機能）

v4.5では、データコレクション用のJSONスキーマを自動的に生成する実験的なサポートが導入されました。

ノート

JSONスキーマは、データの構造を記述するための強力な方法であり、エディタ内で直接データコレクションの検証、オートコンプリート、ドキュメントを提供するために使用できます。

この機能を有効にするには、次のコードを astro.config.mjs に追加します。

import { defineConfig } from 'astro/config';

export default defineConfig({
  experimental: {
    contentCollectionJsonSchema: true
  }
});

但し、現時点ではこれらのスキーマは、データコレクションエントリに手動でリンクする必要があるようです。

新しいスクリプト検出アルゴリズムの追加（実験機能）

v2.10.4では、未使用のスクリプトがページに含まれてしまう長年の問題を解決するために、optimizeHoistedScript という実験的なオプションが追加されました。

今回のv4.5では、すべてのケースを網羅し、より信頼性の高い新しい実験的なオプション directRenderScript に変更されました。

この新しい機能を試すには、optimizeHoistedScript オプション（設定されている場合のみ）を削除し、directRenderScript オプションを astro.config.mjs に追加します。

import { defineConfig } from 'astro/config';

export default defineConfig({
  experimental: {
    optimizeHoistedScript: true,
    directRenderScript: true
  }
});

まとめ

Astro v3.0以降からv4.5までの変遷について紹介してきました。簡単にまとめると下表のようになります。

バージョン	公開日	更新概要
v3.2🔗	2023/9/28	画面遷移の制御やインテグレーション機能の拡張が強化され、よりスムーズで快適なウェブ体験が提供されました。特に、ブラウザの履歴操作の自由度が向上し、JavaScriptからページ遷移をトリガーできるようになりました。また、スクリーンリーダーへの配慮も強化され、ページ遷移後に<title>タグの内容を読み上げるルートアナウンサーが搭載されました。
v3.3🔗	2023/10/12	画像管理機能の強化と開発者エクスペリエンスの向上が行われました。新たに導入された<Picture />コンポーネントは、ユーザーのデバイスやネットワーク環境に合わせて最適な画像を配信する機能を提供します。
v3.4🔗	2023/10/26	ページの一部を再利用可能なパーツとして扱う機能や、開発効率を高める実験的な機能が追加されました。特に、ページの一部を他のページに組み込むためのパーツとして扱うPage Partials機能が導入されました。
v3.5🔗	2023/11/8	複数言語対応（i18n）、プレフェッチ、コンテンツコレクションのビルドキャッシュなど、Astroの歴史上、マイナーバージョンとしては最大級のアップデートが行われました。特に、Astroの国際化ルーティングAPIを利用すれば、複数の言語に対応したコンテンツを簡単に構築できます。
v4.0🔗	2023/12/5	新機能、高速ビルドの実現、ドキュメントのリデザイン、そして開発体験を向上させるユニークなツールが追加されました。特に注目すべきは、開発体験を向上させる新しいツール、Astro Dev Toolbarの導入、新しい国際化ルーティング機能の導入、大規模なWebサイトのビルドパフォーマンスを大幅に向上させるために、インクリメンタルコンテンツキャッシュという実験的な新機能の導入などです。
v4.1🔗	2024/1/4	バグフィックスと改善がメインで、新しいアクセシビリティ監査ルールの追加やclient:visible ディレクティブの拡張などが行われました。
v4.2🔗	2024/1/18	実験的な新機能の追加、アクセシビリティルールの改善、Markdown内の画像最適化をカスタマイズするRemarkプラグインのサポートなど、多くの改善とバグ修正が施されました。
v4.3🔗	2024/2/1	国際化の実験的な新機能の追加、ビルド出力のよりきめ細かい制御、コンポーネントの型定義、Markdown内の画像パス指定子の改善など、様々な機能向上と改善が盛り込まれました。
v4.4🔗	2024/2/15	開発者ツールのパフォーマンス監査、ストリーミングパフォーマンスの向上、リモート画像のサイズ自動推定機能など、様々なパフォーマンス改善と新機能が追加されました。
v4.5🔗	2024/3/11	開発者体験を向上させる全く新しい Dev Audit UI です。ブラウザを離れることなく、サイトのパフォーマンスとアクセシビリティの問題を自動的に特定できます。

以上が、Astroのv3.2からv4.5までの主なアップデートの概要です。これらのアップデートにより、Astroはよりパワフルで使いやすい静的サイトジェネレータとなり、開発者の生産性とサイトのパフォーマンスを向上させることが可能となりました。今後もAstroのアップデートにご期待ください。

これらのアップデートにより、Astroはより使いやすく、効率的なフレームワークとなり、開発者の生産性がますます高められるようになりました。今後も、Astroの更なる進化に目が離せません！