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

今回は「静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能」についてご紹介します。

関連ワード (対応、最小限、正式版等) についても参考にしながら、ぜひ本記事について議論していってくださいね。

本記事は、Publickey様で掲載されている内容を参考にしておりますので、より詳しく内容を知りたい方は、ページ下の元記事リンクより参照ください。


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

Astro 3.0 is out now!

30% faster and more powerful than ever. View Transitions, Image Optimization, JSX Fast Refresh, and so much more. https://t.co/vOi44246Hg

— Astro (@astrodotbuild) August 30, 2023

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

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

COMMENTS


Recommended

TITLE
CATEGORY
DATE
【コラム】社外取締役を務めるCEOが減少しているトレンドには、良い面も悪い面もある
その他
2021-07-11 12:54
NTTPC、ネットワーク運用の自動化サービスを提供–攻めのDX推進へ
IT関連
2024-05-24 05:06
「Linux」でのユーザー管理のために知っておくべきコマンド6選
IT関連
2024-04-05 01:57
改めてサードパーティークッキー問題とは–「Chrome」が廃止を延期
IT関連
2021-07-19 00:29
Opera、「Chromebookに最適化された世界初の代替ブラウザー」に
IT関連
2021-07-06 20:56
テレワークのストレスを解消し、セキュリティも守る HPの最新ビジネスPCに搭載された“気が利く”機能とは?
PR
2021-03-20 19:29
TC HUBが人気記事に登場する起業家を迎えるイベントを開催、記念すべき第1回目のゲストはモビリティスタートアップglafit代表の鳴海氏
イベント情報
2021-06-29 05:23
Meta、200言語を翻訳するAI「NLLB-200」をオープンソース化
IT関連
2022-07-08 02:25
NECネッツエスアイ、複数のロボットを一元管理する「マルチロボット管理プラットフォーム」を提供
IT関連
2023-02-18 08:59
アクロニス日本法人社長が語る「パートナービジネスの勘所」とは
IT関連
2024-06-01 01:00
インド中央銀行がデータ保存規則違反でアメックスに対し新規顧客の追加を制限
フィンテック
2021-04-27 19:09
ドコモの「ahamo」、店頭サポートを有償で提供へ
企業・業界動向
2021-04-17 07:56
アップル「Vision Pro」を見て感じたこと–無限の可能性といくつかの疑問点
IT関連
2023-06-13 12:29
Twitter、偽情報対策「バードウォッチ」のテスト公開 コミュニティ主体でツイートに注釈追加
アプリ・Web
2021-01-27 11:20