Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Astro3.0 + TransitionAPIで イケてるサイトを爆速開発していく feat...

Avatar for Miho Miho
November 18, 2023
Programming
110
0

Astro3.0 + TransitionAPIで イケてるサイトを爆速開発していく feat. React

Frontend Conference in 沖縄 2023のLTで発表した内容です

Avatar for Miho

Miho

November 18, 2023

Other Decks in Programming

See All in Programming
ハーネス設計入門 〜 基礎知識の整理から実務へのステップアップ 〜
Avatar for kinopee kinopeee
28
32k
機械に任せるテスト、人が見るテスト ⽣成AIで引き直した、運⽤保守フェーズの線引き
Avatar for KUSATAKE Daisuke dske104
0
190
R8 の設定見直しでアプリサイズ削減
Avatar for ANDPAD inc andpad
0
220
Apple Intelligence を用いた個人情報誤送信防止、及びユーザーリクエスト体験の改善について
Avatar for Yuki Kuwashima yukiny
0
350
ソニーのクラウド共通基盤の変遷と AI時代の開発スタイルに合わせた進化 / The Journey of Sony’s Common Cloud Platform and Its Evolution for AI-Native Development
Avatar for KenjiYoneyama kenjiyoneyama
0
270
Atomic Design, Enforced: Scaling Mobile Design Systems (next.app devCon / droidCon Berlin 2026)
Avatar for Stelios Frantzeskakis steliosf
PRO
0
170
Herb in Rails 8.2: Your ERB views, now HTML-aware @ Kaigi on Rails 2026, Tokyo, Japan
Avatar for Marco Roth marcoroth
2
230
IBM Bob Dojo #1 仕様駆動開発入門
Avatar for Akira Onishi (IBM) oniak3ibm
PRO
0
390
Optunaを作ったときにやりたかったこと、その後 (2026/10/16, Optuna Meetup #3)
Avatar for Takuya Akiba iwiwi
1
430
外から家のPCの電源入れたい！をＰＨＰで解決する
Avatar for かわしも（Shimokawa Shion） kawashimo0
1
130
Herb in Rails 8.2: Your ERB views, now HTML-aware @ Rails World 2026, Austin, Texas
Avatar for Marco Roth marcoroth
0
220
UPDATE をやめる — EF Core でマスタをバージョン管理する
Avatar for HideyukiKitao panda728
PRO
0
1.2k

Featured

See All Featured
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.6k
We Analyzed 250 Million AI Search Results: Here's What I Found
Avatar for Josh Blyskal joshbly
2
2k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
55
13k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
440
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
330
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
460
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
2
2.2k
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
1.1k

Transcript

  1. Astro3.0 + TransitionAPIで イケてるサイトを爆速開発していく feat. React Frontend Conference in 沖縄

    2023

  2. About Me pluto (Miho) @pluto0004 • Frontend Engineer @ Cyberagent.Inc

    • TypeScript / React / Next.js / web3 related

  3. What is Astro? • 次世代の静的サイトジェネレーター • Astroアイランド ◦ HTMLの静的なページ上にあるUIコンポーネント を指す（それぞれのアイランドは孤立している）

    ◦ メリット 󰗨 最適化されたパフォーマンス 󰗨 ロード、ハイドレーションのタイミングを開発者が コントロールできる 出典：Astro公式ドキュメント

  4. Astro 3.0 + TransitionAPI 🚀

  5. Setting to use TransitionAPI in Astro • ViewTransitionsをimport、<head>に<ViewTransitions />を追加 •

    これだけで基本設定は完了 Layout.astro オプション：fade, slide, none

  6. Astro + React • astro add react で必要な依存関係、自動で必要な設定をしてくれる • Reactのコンポーネントをimportして使うだけ

  7. What’s next in Astro? • Launch Astro Studio in 2024

    ◦ Astro専用に開発されたグローバルに分散されたエッジデータプ ラットフォーム ◦ 新規または既存のAstroプロジェクトを専用のホストされたデータ ベースに瞬時に接続できる Astroプロジェクトにおける、データベース管理をより簡単かつ効率的にす るためのものっぽい Waiting list: https://studio.astro.build/

  8. Thank you 󰳙