静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能

2023年9月12日

オープンソースで開発されている静的サイトジェネレータ「Astro」の最新バージョンとなる「Astro 3.0」が正式にリリースされました

Astroは、ReactやVue、Svelte、Alpine.js、TypeScriptなどのさまざまなフレームワークやライブラリに対応した静的サイトジェネレータです。

ビルド時にWebサイト全体のHTMLが生成され、しかもそのHTMLには全くJavaScriptが含まれないか、もしくはWebブラウザ上での動作に必要な最小限のJavaScriptのみが残されます。

そのため、非常に高速に表示されるWebサイトの生成が可能である点が、Astroの大きな特徴です。

Astro 3.0では次のような新機能が加わりました。

Astro 3.0の主な新機能

View Transitions
最新のWebブラウザには「View Transitions API」と呼ばれる新しい機能が実装され始めています。

このView Transitions APIを活用すると、あるDOMの状態から別のDOMの状態へ遷移する際に、アニメーション効果やスライド効果などの演出を容易に実装できるようになります。

今回のAstro 3.0のView Transitions機能はこのView Transitions APIを用いて、ページとページの遷移時に4種類の演出効果(Morph、Fade、Slide、Persist)を簡単に設定できるというものです。

これによりJavaScriptの実装もすることなく、SPAのようなスムーズで美しい画面遷移を表現できるようになります。

下記はそのデモの一部です(2つ目の動画は実際にWebサイトとして公開されています)。

Faster Rendering Performance
Astro 3.0はAstro 2.9に比べて平均で30%程度、最大で75%、コンポーネントのレンダリング速度が向上しました。これは従来のAstroから不要なコードを可能な限り削除し、残りのコードを最適化するリファクタリングによって実現されたと説明されています。

Image Optimization (stable)
ビルド時における画像の最適化機能が正式版となりました。最終的にレンダリングされる画像タグには巾と高さが追加されるため、Webページ表示時に画面がずれるといったことが起こらなくなります。

SSR Enhancements for Serverless
Vercel社のホスティングサービスを正式にサポートしたことに合わせ、SSR(サーバサイドレンダリング)時のいくつかの機能強化が行われました。

  • Webサイトのルートごとに、より小さな個別のサーバファイルを作成することでの性能向上
  • エッジのミドルウェアをバンドル可能に
  • ホスティングごとの自動カスタマイズが可能に

その他にも多くの新機能が追加されています。詳細は公式ドキュメントなどをご覧ください。公式アップグレードガイドも公開されています

Tags: HTML/CSS JavaScript プログラミング言語

このエントリーをはてなブックマークに追加
ツイート
follow us in feedly





タグクラウド

クラウド / AWS / Azure / Google Cloud
コンテナ / Docker / Kubernetes
クラウドネイティブ / サーバレス
クラウド障害 / 運用・監視

プログラミング言語 / 開発ツール
JavaScript / Java / .NET / WebAssembly
HTML/CSS / Web標準

アジャイル開発 / スクラム / DevOps / CI/CD
ソフトウェアテスト・品質
ローコード/ノーコード開発

データベース / RDB / NoSQL / 機械学習・AI
Oracle Database / MySQL / PostgreSQL
Office / 業務アプリケーション

ネットワーク / HTTP / QUIC / セキュリティ
OS / Windows / Linux / VMware
ハードウェア / サーバ / ストレージ

業界動向 / 働き方 / 給与・年収
編集後記 / 殿堂入り / おもしろ

全てのタグを見る

Blogger in Chief

photo of jniino

Junichi Niino(jniino)
IT系の雑誌編集者、オンラインメディア発行人を経て独立。2009年にPublickeyを開始しました。
詳しいプロフィール

Publickeyの新着情報をチェックしませんか?
Twitterで : @Publickey
Facebookで : Publickeyのページ
RSSリーダーで : Feed

最新記事10本