機能がどんどん追加！ Astro 4.3までのアップデートを振り返る
Astroのバージョンアップデート頻度は非常に多く、2023年を通してバグフィックスや安定化はもちろん、いくつかの破壊的修正を含む機能追加が数多くリリースされました。
★現時点では過去回でご説明した内容には影響ありませんが、：この項の説明を早い段階でするために、統合させていただきました。★AstroでどういうWebコンテンツを制作できるかを具体的にイメージできるように、最新バージョンであるv4.3までのアップデートで追加された、いくつかの特徴的な機能をご紹介します。
以下のコマンドで、Astro、および依存関係にあるライブラリをまとめてアップグレードすることができます（アップグレードによって正常に動かなくなるものもあるためご注意ください）。
npx @astrojs/upgrade
View Transitions
Astro v2.10で追加された「View Transitions」では、わずかなコードを追加するだけで、ページ遷移にシームレスなアニメーションを実装することができるようになりました。
これは、一部ブラウザが実装しているView Transitions APIという、異なる HTML要素間のアニメーション遷移を簡単に作成する仕組みを用いることで実現しています。
Astroの「View Transitions」を用いることで、以下のサンプルのような、サムネイル画像をクリックすると、サムネイル画像が拡大アニメーションしつつ、記事ページにスムーズに遷移させる、という表現も手軽に作ることができます。
通常、このような動きを実装しようと思ったら、ReactなどのSPAフレームワークを用いて、Webページの変更箇所のみを書き換えるという処理を行うことが多いですが、そのためには複雑なコードを記述する必要があり、管理も大変になる傾向があります。
Astroの「View Transitions」を使用するには、シームレスな画面遷移を使用したいすべてのページに<ViewTransitions />コンポーネントをインポートし、<head>内に追加します。
---
// ViewTransitionsをインポート
import { ViewTransitions } from 'astro:transitions';
---
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<meta name="viewport" content="width=device-width">
<meta name="description" content="Homeページです。">
<title>Home</title>
<!-- ViewTransitionsコンポーネントを追加 -->
<ViewTransitions />
</head>
<body>
<h1>Home</h1>
<p>Homeページです。</p>
</body>
</html>
基本的にはこれだけの記述で、AstroをSPAモードとして、画面遷移時に自動的にトランジション効果を持たせることができます。
また、Astroは、トランジション効果としていくつかの組み込みアニメーションを持っており、古いコンテンツと新しいコンテンツを書き換える際に、以下のような特定の効果を付与することができます。
- fade（デフォルト）：古いコンテンツがフェードアウトし、新しいコンテンツがフェードインします。
- initial：ブラウザのデフォルトのスタイルを使用します。
- slide：古いコンテンツが左にスライドアウトし、新しいコンテンツが右からスライドインします。
- none：ブラウザのデフォルトのアニメーションを無効にします。
たとえば、各ページのbodyにtransition:animate="slide"の記述を追加することで、
---
// ViewTransitionsをインポート
import { ViewTransitions } from 'astro:transitions';
---
<!DOCTYPE html>
<html lang="ja">
<head>
（...略）
<!-- ViewTransitionsコンポーネントを追加 -->
<ViewTransitions />
</head>
<body transition:animate="slide">
<h1>Home</h1>
<ul>
<li><a href="/page1">Page 1</a></li>
<li><a href="/page2">Page 2</a></li>
<li><a href="/page3">Page 3</a></li>
</ul>
</body>
</html>
以下のように、画面遷移にスライドアニメーションの効果を付与することができます。
さらに、以下のような動画再生用の<MyVideo />コンポーネントを作成し、画面遷移のアニメーションを付与した各ページにインポートします。
<video controls transition:animate="none" transition:persist> <source src="/dog.mp4" type="video/mp4"> </video>
---
// ViewTransitionsをインポート
import { ViewTransitions } from 'astro:transitions';
// 動画再生用コンポーネントをインポート
import MyVideo from "../components/myVideo.astro";
---
<!DOCTYPE html>
<html lang="ja">
<head>
（...略）
<!-- ViewTransitionsコンポーネントを追加 -->
<ViewTransitions />
</head>
<body transition:animate="slide">
<h1>Home</h1>
<!-- 動画再生用コンポーネントを追加 -->
<MyVideo />
<ul>
<li><a href="/page1">Page 1</a></li>
<li><a href="/page2">Page 2</a></li>
<li><a href="/page3">Page 3</a></li>
</ul>
</body>
</html>
ここでポイントとして、<MyVideo />コンポーネントの中のvideoタグに対して、親である<body>に付与されているスライドアニメーションtransition:animate="slide"に含まれないように、transition:animate="none"の記述と、画面遷移間でHTML要素を保持するためのtransition:persistの記述を追加しています。
こうすることで、以下のように、各ページに配置した動画の再生位置を保持したまま、スムーズにスライドアニメーション効果で画面遷移させることができます。
また、以下のように、サムネイル画像をクリックすると遷移先ページのアイキャッチ画像にスムーズに拡大する、というアニメーションの場合は、
画面遷移の発生するページ間で、トランジションさせる要素（この場合はサムネイル画像とアイキャッチ画像）をペアにするために、transition:name="photo1"のようにトランジションに名前を付与することができます。
---
// ViewTransitionsをインポート
import { ViewTransitions } from 'astro:transitions';
---
<!DOCTYPE html>
<html lang="ja">
<head>
（...略）
<ViewTransitions />
</head>
<body>
<h1>Home</h1>
<ul>
<li><a href="/page1"><img src="/images/dog1.jpg" alt="photo1" width="80" height="60" transition:name="photo1">Page 1</a></li>
（...略）
</ul>
</body>
</html>
---
// ViewTransitionsをインポート
import { ViewTransitions } from 'astro:transitions';
---
<!DOCTYPE html>
<html lang="ja">
<head>
（...略）
<ViewTransitions />
</head>
<body>
<h1>Page 1</h1>
<img src="/images/dog1.jpg" alt="photo1" width="600" height="450" transition:name="photo1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam architecto cumque dolor ducimus eius eos error incidunt iste iure iusto nesciunt, optio soluta ullam. Accusantium alias animi consectetur consequatur culpa cum eius eligendi esse et harum impedit inventore ipsum, itaque maxime minima non odit quae quis, similique veniam! Animi, blanditiis culpa dolorem eum facilis illo ipsa laboriosam neque optio sit! Deserunt distinctio explicabo magni maiores minima necessitatibus reprehenderit sunt tenetur?</p>
</body>
</html>
このように、Astroの「View Transitions」を使うことで、静的サイトに対して、SPAのようにアニメーションを用いた画面遷移の表現を追加することもできます。
この機能は、（現状は）一部ブラウザのみで表示できる機能になりますが、対応していないブラウザではフォールバックとして通常の画面遷移として表示されるので、JavaScriptの実行タイミングと、過度なアニメーション演出に注意しつつ、用途を絞った上で試験的に導入してみるのも良いかもしれません。
画像の最適化
Astro v3.0で、ローカル、もしくはリモートから画像をインポートし、自動的に最適化してレンダリングする仕組みが刷新されました（それ以前のバージョンでも画像の最適化は存在しましたが、仕様が大きく変わっているので、過去バージョンをお使いの方はご注意ください）。
画像の最適化は、以下のように、Astroの<Image />コンポーネントと、srcディレクトリ内に配置した画像の相対パスをインポートして使用します。
---
import { Image } from 'astro:assets';
import myImage from "../assets/my_image.png"; // src内画像の相対パス
---
<!DOCTYPE html>
<html lang="ja">
（...略）
<body>
<Image src={myImage} alt="A description of my image." />
</body>
</html>
上記ファイルは、ビルドすると以下のようなHTMLに変換されます。
<html lang="ja">
（...略）
<body>
<img
src="/_astro/my_image.hash.webp"
alt="A description of my image."
width="1600"
height="900"
decoding="async"
loading="lazy"
/>
</body>
</html>
このように、必須の入力値となるsrcとaltを<Image />コンポーネントに渡すことで、レイアウトシフト用のwidthとheight、およびloading、decoding属性が自動的に付与され、最適化された（デフォルトではwebp形式）画像として書き出されます。
<Image />コンポーネントに指定できる主なプロパティは以下になります。
- src（必須）：画像のパス。srcディレクトリ内なら相対パスにてインポート。
- alt（必須）：代替テキスト。
- width、height：元画像サイズから自動的に付与されるためオプション扱いですが、任意のサイズを指定することも可能。また、publicディレクトリ内の画像、および外部URLの画像を使用する場合は必須になります。
-
densities：ピクセル密度。たとえば、
width={80} densities={[2]}のように指定すると、アスペクト比を保った幅160pxの画像を書き出しつつ、幅80pxの指定でレンダリングされます。 -
format：画像の出力形式を指定。デフォルトは
.webp。 - quality：画像の圧縮品質。（low、mid、high、max）、もしくは0から100までの数値で指定します。
さらに詳しいプロパティは、ドキュメントをご確認ください。
また、classなど、HTMLの<img>タグに設定可能なすべてのプロパティを指定することも可能です。
---
import { Image } from 'astro:assets';
import myImage from "../assets/my_image.png"; // src内画像の相対パス
---
<Image src={myImage} alt="A description of my image." class="min-w-full" />
<img src="/_astro/my_image.hash.webp" alt="A description of my image." class="min-w-full" width="1600" height="900" decoding="async" loading="lazy" />
Astroの画像最適化を使用することで、デザインデータからの画像書き出しに多少のばらつきがあっても、効率的に画像品質を統一することもできます。
