$30 off During Our Annual Pro Sale. View Details »

Astro 3.0入門

Ryusou
September 16, 2023

Astro 3.0入門

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

Ryusou

September 16, 2023
Tweet

More Decks by Ryusou

Other Decks in Programming

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