Saitama.js vol.7での発表です! https://saitamajs.connpass.com/event/293026/
Astro 3.0 完全入門
View Slide
私についてりゅーそう埼玉県育ちのエンジニアです。Saitama.jsの運営しています。埼玉のおすすめ観光地は権現堂の桜です。
埼玉のおすすめ観光意外と多いアニメの聖地・「クレヨンしんちゃん」春日部市・「SAO」川越市・「らき☆すた」久喜市・「小林さんちのメイドラゴン」越谷市・「ちはやふる」戸田市など
厳選しましたhttps://saitama-astro-sample.vercel.app/埼玉のおすすめ観光
今日はこのサンプルをもとにAstro 3.0 を紹介します
コンテンツにフォーカスした高速なWebサイトを構築するためのオールインワンフレームワーク・アイランドアーキテクチャ・デフォルトはゼロJavaScript・エッジ対応・特定のUIに依存しない(React, Vueなどで書ける)などhttps://docs.astro.build/ja/getting-started/Astroとは
https://astro.build/blog/astro-3/・目玉は View Transition API・Vercelとの連携をもとに、 SSRの強化などAstro 3.0
異なる画面遷移間のアニメーションを簡単に作成することができるAPIChrome111,Edge111以上で対応khttps://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_APIView Transition API
View Transition APIは何を解決するのか?・モバイルアニメーションの体験同じ要素がそのまま移動するような挙動を提供する・SPA、SSGではページ遷移の切り替わりがわかりにくいという問題もある。その解決のためにアニメーションを実装するが、もっさりした体験を与えてしまう...というのはありがちView Transition API
Astroでは、View Transition APIを簡単に適用できる基本はヘッダーにを設定するだけView Transition API
「transition:animate」でアニメーションを設定できる・fade・slide・noneで無効化が設定できる。カスタマイズも可能View Transition API
「transition:name」でアニメーションの起点を決める・クリックするリンクの要素・遷移後の要素で一致するものに「transition:name」を指定するView Transition API
View Transition API例:・Cardコンポーネント・ページ詳細ページのh1に同様のtransition:nameを指定する
View Transition API・指定するnameはページ内で一意でなくてはいけないことに注意・CMSから取得したデータのidなどを指定することでスムーズなアニメーションにする
・next/imageのイメージ・画像の最適化・width,heightの指定・lazy=loadingの自動付与などImage Optimization
・1.0がリリース・Astroも動く https://bun.sh/guides/ecosystem/astro・パッケージマネージャーとしての利用 とにかく速い。 Node.jsのようなツールを使ってのバージョン管理が不要Appendix:Bun
・Vercelでも動く・設定は不要https://vercel.com/changelog/bun-install-is-now-supported-with-zero-configurationAppendix:Bun
・コンテンツ管理として利用・今回のサンプルリポジトリhttps://github.com/YouheiNozaki/saitama-astro-sample・(採用してます)Appendix:microCMS
参考・[Astro Docs] https://docs.astro.build/ja/getting-started/・[Astro 3.0] https://astro.build/blog/astro-3/・[MDN ViewTransition API]khttps://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API・[Chrome 111 の View Transitions API でリッチなページ間トランジションを実現する]https://zenn.dev/yhatt/articles/cfa6c78fabc8fa・[Bun ecosystem Astro] https://bun.sh/guides/ecosystem/astro・[Bun install is now supported with zero configuration]https://vercel.com/changelog/bun-install-is-now-supported-with-zero-configuration
ありがとうございました