Astro 3.0入門

Transcript

1. Astro 3.0 完全入門
   

   View Slide

2. 私について
   りゅーそう
   埼玉県育ちのエンジニアです。
   Saitama.jsの運営しています。
   埼玉のおすすめ観光地は権現堂の桜
   です。
   

   View Slide

3. 埼玉のおすすめ観光
   意外と多いアニメの聖地
   ・「クレヨンしんちゃん」春日部市
   ・「SAO」川越市
   ・「らき☆すた」久喜市
   ・「小林さんちのメイドラゴン」越谷市
   ・「ちはやふる」戸田市
   など
   

   View Slide

4. 厳選しました
   https://saitama-astro-sample.vercel.app/
   埼玉のおすすめ観光
   

   View Slide

5. 今日はこのサンプルをもとに
   Astro 3.0 を紹介します
   

   View Slide

6. コンテンツにフォーカスした高速なWebサイトを構築する
   ためのオールインワンフレームワーク
   ・アイランドアーキテクチャ
   ・デフォルトはゼロJavaScript
   ・エッジ対応
   ・特定のUIに依存しない（React, Vueなどで書ける）など
   https://docs.astro.build/ja/getting-started/
   Astroとは
   

   View Slide

7. https://astro.build/blog/astro-3/
   ・目玉は View Transition API
   ・Vercelとの連携をもとに、
   　SSRの強化
   など
   Astro 3.0
   

   View Slide

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

   View Slide

9. View Transition APIは何を解決するのか？
   ・モバイルアニメーションの体験
   同じ要素がそのまま移動するような挙動を提供する
   ・SPA、SSGではページ遷移の切り替わりがわかりにくい
   という問題もある。
   その解決のためにアニメーションを実装するが、もっさり
   した体験を与えてしまう...というのはありがち
   View Transition API
   

   View Slide

10. Astroでは、View Transition APIを簡単に適用できる
    基本はヘッダーに
    を
    設定するだけ
    View Transition API
    

    View Slide

11. 「transition:animate」でアニメーションを設定できる
    ・fade
    ・slide
    ・noneで無効化
    が設定できる。カスタマイズも可能
    View Transition API
    

    View Slide

12. 「transition:name」でアニメーションの起点を決める
    ・クリックするリンクの要素
    ・遷移後の要素で一致するものに「transition:name」を
    指定する
    View Transition API
    

    View Slide

13. View Transition API
    例：
    ・Cardコンポーネント
    ・ページ詳細ページのh1
    に同様のtransition:nameを指定する
    

    View Slide

14. View Transition API
    ・指定するnameはページ内で一意でなくてはいけないこと
    に注意
    ・CMSから取得したデータのidなどを指定することでスム
    ーズなアニメーションにする
    

    View Slide

15. ・next/imageのイメージ
    ・画像の最適化
    ・width,heightの指定
    ・lazy=loadingの自動付与など
    Image Optimization
    

    View Slide

16. ・1.0がリリース
    ・Astroも動く
    　https://bun.sh/guides/ecosystem/astro
    ・パッケージマネージャーとしての利用
    　とにかく速い。
    　Node.jsのようなツールを使ってのバージョン管理が不要
    Appendix：Bun
    

    View Slide

17. ・Vercelでも動く
    ・設定は不要
    https://vercel.com/changelog/bun-install-is-now-
    supported-with-zero-configuration
    Appendix：Bun
    

    View Slide

18. ・コンテンツ管理として利用
    ・今回のサンプルリポジトリ
    https://github.com/YouheiNozaki/saitama-astro-
    sample
    ・（採用してます）
    Appendix：microCMS
    

    View Slide

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
    

    View Slide

20. ありがとうございました
    

    View Slide