Astro 3.0 完全入門

私について りゅーそう 埼玉県育ちのエンジニアです。 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

異なる画面遷移間のアニメーションを簡単に作成すること ができるAPI Chrome111,Edge111以上で対応 khttps://developer.mozilla.org/en- US/docs/Web/API/View_Transitions_API View 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-configuration Appendix：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

ありがとうございました