Astro 3.0入門

Saitama.js vol.7での発表です！
https://saitamajs.connpass.com/event/293026/

Transcript

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