ろぼいんブログ
更新：

Astro 3.0がリリース　最適化やページ変遷が強化

Astro 3.0のリリースを知らせる公式ブログのスクリーンショット
Astro 3.0のリリースについての 公式ブログ のスクリーンショット

2023年8月31日、拡張性と速度が売りの静的サイトジェネレーター「Astro」のバージョン3.0がリリースされました。最適化やページ変遷の機能が強化され、今までよりさらに高速なサイトを構築できるようになりました。

この記事では 公式ブログ を参考に、Astro 3.0の新機能や変更点の一部をまとめました。省略している項目もあるので、詳しい情報は 公式ブログ を参照してください。

(window.powerTag.Init = window.powerTag.Init || []).push(function () { window.powerAPITag.display("pw_41759"); });

View Transitionsのサポート

Astro 3.0は、 View Transitions API をサポートする最初の主要なWebフレームワークです。ブラウザーのView Transitions APIを使うと、 MPA （Multiple Page Application）で SPA （Single Page Application）のようにスムーズなページ変遷を実現できます。

View Transitions APIを使うと、たとえばページのヘッダーを表示したまま、コンテンツ部分だけをフェードエフェクトで切り替えるようなことができるようになります。

Astro 3.0では、たった2行のコードを追加するだけでView Transitionsを使えるようになります。すべてのページで読み込まれるようなファイルに<ViewTransitions />を追加し、<head>タグ内で読み込みます。

詳細なカスタマイズは可能ですが、たったこれだけの作業で最低限View Transitionsを使えるようになります。

try{(()=>{function a(e){if(!e)return;let t=e.getAttribute("tabindex")!==null,n=e.scrollWidth>e.clientWidth;n&&!t?e.setAttribute("tabindex","0"):!n&&t&&e.removeAttribute("tabindex")}var u=window.requestIdleCallback||(e=>setTimeout(e,1)),i=window.cancelIdleCallback||clearTimeout;function l(e){let t=new Set,n,r;return new ResizeObserver(c=>{c.forEach(o=>t.add(o.target)),n&&clearTimeout(n),r&&i(r),n=setTimeout(()=>{r&&i(r),r=u(()=>{t.forEach(o=>e(o)),t.clear()})},250)})}function d(e,t){e.querySelectorAll?.(".expressive-code pre > code").forEach(n=>{let r=n.parentElement;r&&t.observe(r)})}var s=l(a);d(document,s);var b=new MutationObserver(e=>e.forEach(t=>t.addedNodes.forEach(n=>{d(n,s)})));b.observe(document.body,{childList:!0,subtree:!0});document.addEventListener("astro:page-load",()=>{d(document,s)});})();}catch(e){console.error("[EC] tabindex-js-module failed:",e)}try{(()=>{function i(o){let e=document.createElement("pre");Object.assign(e.style,{opacity:"0",pointerEvents:"none",position:"absolute",overflow:"hidden",left:"0",top:"0",width:"20px",height:"20px",webkitUserSelect:"auto",userSelect:"all"}),e.ariaHidden="true",e.textContent=o,document.body.appendChild(e);let a=document.createRange();a.selectNode(e);let n=getSelection();if(!n)return!1;n.removeAllRanges(),n.addRange(a);let r=!1;try{r=document.execCommand("copy")}finally{n.removeAllRanges(),document.body.removeChild(e)}return r}async function l(o){let e=o.currentTarget,a=e.dataset,n=!1,r=a.code.replace(/\u007f/g,` `);try{await navigator.clipboard.writeText(r),n=!0}catch{n=i(r)}if(!n||e.parentNode?.querySelector(".feedback"))return;let t=document.createElement("div");t.classList.add("feedback"),t.append(a.copied),e.before(t),t.offsetWidth,requestAnimationFrame(()=>t?.classList.add("show"));let c=()=>!t||t.classList.remove("show"),d=()=>{!t||parseFloat(getComputedStyle(t).opacity)>0||(t.remove(),t=void 0)};setTimeout(c,1500),setTimeout(d,2500),e.addEventListener("blur",c),t.addEventListener("transitioncancel",d),t.addEventListener("transitionend",d)}function s(o){o.querySelectorAll?.(".expressive-code .copy button").forEach(e=>e.addEventListener("click",l))}s(document);var u=new MutationObserver(o=>o.forEach(e=>e.addedNodes.forEach(a=>{s(a)})));u.observe(document.body,{childList:!0,subtree:!0});document.addEventListener("astro:page-load",()=>{s(document)});})();}catch(e){console.error("[EC] copy-js-module failed:",e)}
---
import {ViewTransitions} from 'astro:transitions';
---
<head>
  <title>タイトル</title>
  <ViewTransitions />
</head>
<body>
</body>

また、AstroのView Transitions機能には、View Transitions APIをサポートしていないブラウザーのためのフォールバック機能も含まれています。これにより、すべてのユーザーにスムーズなページ変遷を提供できます。

実際に試してみたところ、画像など、Webページでないファイルへのリンクが正しく動作しませんでした。公式ドキュメントにも 書いてある のですが、こうしたページでないものへのリンクにはdata-astro-reload属性を付与する必要があります。

レンダリングの高速化

Astro 3.0では、レンダリング速度が大幅に向上しました。ほとんどのコンポーネントはAstro 2.9と比較して30%高速になりました。複雑なベンチマークでは、75%向上した場合もあるそうです。

画像の最適化

試験機能として提供されていた画像の最適化機能が、Astro 3.0で安定版になりました。Astroが画像を自動で検知し、最適化してくれます。また、画像のサイズを事前に計算することで、 CLS （Cumulative Layout Shift・画像の読み込みなどによりレイアウトがズレること）を防ぐ機能もあります。

また、Astroではこれまで、画像の最適化に Squoosh を利用していましたが、積極的に メンテナンスされなくなった ため、 sharp に置き換えられました。

(window.powerTag.Init = window.powerTag.Init || []).push(function () { window.powerAPITag.display("pw_41759"); });

ビルド結果の最適化

Astro 3.0では、ビルドしたHTMLが自動で圧縮されるようになりました。また、ファイルサイズの小さいCSSは、自動的にインライン化されます。これにより、Astroで作成したサイトのパフォーマンスが向上します。

Astro 3.0へのアップデート方法

Astroのパッケージを最新バージョンにアップデートするには、次のコマンドを実行します。

Terminal window
npm create astro@latest

サイトの作りによっては、Astro 3.0へのアップデートのために追加の作業が必要になる場合もあります。詳しくは 公式のガイド を参照してください。

また、Astro 3.0へのアップデートと一緒に、インテグレーションもアップデートすることをオススメします。私の環境ではAstro 3.0にアップデートしたあと、mdxファイルでエラーが発生しましたが、インテグレーションをアップデートすることで解決しました。

#Astro#GitHub#Web開発

おすすめアイテム

※このリンクを経由して商品を購入すると、当サイトの運営者が報酬を得ることがあります。詳細はこちら。

このサイトを支援する

Buy Me a CoffeeまたはGitHub Sponsorsで支援していただけると、サイトの運営やコンテンツ制作の励みになります。定期的な支援と一度限りの支援がありますので、お間違いのないようにお願いします。

Buy me a coffee

著者のアイコン画像
ろぼいん
XMisskeyGitHubQiita

生まれた時から、母国語よりも先にJavaScriptを使っていました。ネットの海のどこにもいなくてどこにでもいます。

Webフロントエンドプログラマーで、テクノロジーに関する話題を追いかけています。動画編集やプログラミングが趣味で、たまにデザインなどもやっています。主にTypeScriptを使用したWebフロントエンド開発を専門とし、便利で実用的なブラウザー拡張機能を作成しています。また、個人ブログを通じて、IT関連のニュースやハウツー、技術的なプログラミング情報を発信しています。

関連記事

注目記事

最新記事