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

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

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

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

JavaScriptでページ遷移を可能に

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

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

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

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

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

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

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

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

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

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

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>

画像処理の高速化

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

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

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

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

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

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

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

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

v3.5

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

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

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

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

import {defineConfig} from "astro/config";

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

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

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

従来、Astroでは公式インテグレーション機能である @astrojs/prefetch を用いてプリフェッチを利用できましたが、今回のバージョンアップで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では、新機能の追加、高速ビルドの実現、ドキュメントのリデザイン、そして開発体験を向上させるユニークなツールが追加されています。

v4.0

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

ページの検査機能

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

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

ページの監査機能

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

Sentryとの提携

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

Storyblokとの提携

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

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

サードパーティ製アプリ

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

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

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

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

import { defineConfig } from "astro/config"

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

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

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

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

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

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

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

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 にフィードバックされ、誰もが恩恵を受けることができるようになりました。

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

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

v4.1

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

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

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

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

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

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

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

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

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

v4.2

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

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

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

import { defineConfig } from 'astro/config';

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

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

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

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

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

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

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

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

また、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のみ）内の画像最適化をカスタマイズできるようになりました。

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

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

v4.3

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

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 に似ています。

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

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

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

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

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

v4.4

パフォーマンス監査

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

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

監査リスト

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

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

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

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

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

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

但し、この機能は、特に 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 です。ブラウザを離れることなく、サイトのパフォーマンスとアクセシビリティの問題を自動的に特定できます。

v4.5

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 に戻りました。

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

v4.5では、異なるファイル拡張子に対して異なる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スキーマを自動的に生成する実験的なサポートが導入されました。

この機能を有効にするには、次のコードを 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の更なる進化に目が離せません！

中国語学習の記録
全ての投稿