ろぼいんブログ
更新：

Astro v4.5がリリース！アクセシビリティ監査やページ遷移の改善など

サムネイル

Astro は、高速なページ読み込みと優れた開発体験を提供することで人気のある静的サイトジェネレーターです。

3月11日（現地時間）、さらなる改善と便利な新機能を搭載したAstro 4.5がリリースされました。今回のアップデートでは、ページ性能やアクセシビリティに関する問題を開発者が簡単に特定できるDev Audit UIや、View Transitionを使ったページ間遷移時の再描画の改善などが含まれています。

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

また、最新のシンタックスハイライターShiki 1.0の導入、マルチCDNのサポートなど、非常に魅力的な機能が盛りだくさんです。

この記事では、Astro 4.5の主要な新機能と改善点について詳しく解説します。

Dev Audit UIによる開発者体験の改善

Audit Panelのスクリーンショット
Audit Panelのスクリーンショット。アクセシビリティに関する問題がページのプレビュー内に直接表示される。画像：「 Astro 4.5 | Astro 」より

Webサイトのパフォーマンスやアクセシビリティは、ユーザー体験に直結する重要な要素です。

Astro 4.5では、これらの問題を開発中に自動的に特定し、修正をサポートするためのDev Audit UIが導入されました。これは開発モードのときにブラウザー上で動作し、実際のページを見ながらインラインで問題を確認できる機能です。

Dev Audit UIはページ上のどこが問題なのか、その原因と詳細な解説を確認できるため、アクセシビリティ改善の学習ツールとしても役立ちます。

Dev Toolbar App API
favicondocs.astro.build
/rehype-og-card/b74f275e8ee7383f48c22eb964a2554d4af709c592ee3030d5af321b00c904ce.webp

ページ間遷移の改善

Astroには、MPAのページ遷移でSPAのようなトランジションを実現する「 View Transitions API 」を簡単に使える機能が用意されています。

ビュートランジション
ビュートランジションを使用して、Astroでページ間のシームレスなナビゲーションを実現する。
favicondocs.astro.build
/rehype-og-card/8d293da2e6a11059b26db7bdfbb50096904d3717c04c3cf7394add887842d9d7.webp

Astro 4.5では、View Transitionsを使ったページ間での遷移時に特定のコンポーネント（Astro islands）を再描画する機能や、インラインスクリプトを再実行する機能が追加されました。

たとえば、次のようにdata-astro-rerun属性をスクリプトに追加することで、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)}
<script data-astro-rerun is:inline>
  console.log('This script will rerun when the page changes!');
</script>

これにより、たとえばページ遷移時にユーザーが設定したフィルターやリストの状態を保持しつつ、新しいページコンテンツに基づいて動的にコンテンツを更新できるようになります。

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

Shiki 1.0の採用

Astro 4.5では、コードのシンタックスハイライトにShiki 1.0が採用されました。

これまでAstroは、 Shiki のフォークである Shikiji を使用していましたが、ShikijiがShikiに再統合されたことに伴い、元のShikiに戻りました。

これにより、より安定したコードハイライトと、新しいカラーテーマのサポート、コードブロックの柔軟なスタイリングなどが可能になります。

Shiki
A beautiful yet powerful syntax highlighter
faviconshiki.style
/rehype-og-card/3588d1c418cb3e551988ba5e3544300564ffe1b500a5d0fe5295e0f3784e0e45.png

マルチCDNへのアセットプレフィックスのサポート

コンテンツ配信速度の向上と耐障害性のため、異なる種類のアセットを異なるCDNから配信することがあります。複数のCDNを利用することで、特定のリソースへのアクセス速度を最適化し、グローバルなユーザー体験を向上させられます。

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

Astro 4.5では、 ファイル拡張子ごとに異なるCDNプレフィックスを指定 できるようになり、これによりアセット配信の柔軟性が格段に向上しました。

この機能を利用するには、build.assetsPrefixオプションでファイルの拡張子ごとにCDNを指定します。

astro.config.mjs
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スキーマ

Astro 4.5では、 データコレクション の構造を記述し、バリデーションやオートコンプリート、ドキュメンテーションを提供するための JSONスキーマの自動生成を実験的にサポート しています。

これにより、データ構造がより明確になり、開発者の生産性向上に寄与します。

この機能を利用するには、experimental.contentCollectionJsonSchemaオプションを有効にします。

astro.config.mjs
import { defineConfig } from "astro/config";


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

その他の新機能とバグ修正

Astro 4.5には、上記の主要な新機能の他にも、未使用のスクリプトを検出する新しいアルゴリズムの実験的な導入や、多数のバグ修正とパフォーマンスの改善が含まれています。

まとめ

Astro 4.5は、開発者がより高速でアクセシブルなWebサイトを構築するための新機能と改善点が盛りだくさんのリリースとなりました。

Astroを最新バージョンにアップデートするには、次のうちいずれかのコマンドを実行します。

Terminal window
npx @astrojs/upgrade
npm install astro@latest
pnpm upgrade astro --latest
yarn upgrade astro --latest

参考

#Astro#ニュース#Web開発#GitHub#オープンソース

おすすめアイテム

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

このサイトを支援する

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

Buy me a coffee

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

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

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

関連記事

注目記事

最新記事