Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Astroの紹介
Search
u-Hoshi
November 11, 2023
Programming
0
73
Astroの紹介
u-Hoshi
November 11, 2023
Tweet
Share
More Decks by u-Hoshi
See All by u-Hoshi
SaaSとAIで乗り越える個人開発
u_hoshi
0
58
StripeAPIの紹介
u_hoshi
0
73
初めて趣味でチーム開発 してわかったこと
u_hoshi
1
570
レビュワーアプリ
u_hoshi
0
40
Other Decks in Programming
See All in Programming
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
12k
Porting a visionOS App to Android XR
akkeylab
0
680
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
550
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
23
7.3k
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
170
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1.1k
AIともっと楽するE2Eテスト
myohei
8
3k
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
770
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
270
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
2
21k
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
620
PicoRuby on Rails
makicamel
3
140
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
Site-Speed That Sticks
csswizardry
10
700
Rails Girls Zürich Keynote
gr2m
95
14k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Language of Interfaces
destraynor
158
25k
Music & Morning Musume
bryan
46
6.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Transcript
Astro入門 u-Hoshi
アジェンダ - フレームワークとは - Astroとは(選ぶ理由・向き不向き・強み) - 特徴 - セットアップと使用方法 -
デモ
自己紹介 ・職種 :エンジニア ・出身地 :千葉県 ・趣味/好きなもの:スノーボード アニメ/マンガ 読書 u-Hoshi
Astroとは • Astroは新しいフロントエンドフレームワーク • 高速なレンダリングエンジンを搭載し、パフォーマンスに優れている
フレームワークとは • 開発効率の向上:予め設計された機能や構造を開発者が利用できる • 品質向上:プログラムミスがセキュリティリスクが事前に考慮されている • 一貫性:プロジェクト全体で開発規則などがあるため複数の作業者がいても 統一感のあるアプリが開発できる • サポート:開発チームなどが問題や疑問を解決するリソースを提供している
プログラム開発に必要な機能をまとめたもの
レンダリングエンジンとは データを視覚的に表示するための処理を担当する ソフトウェア MIRAIZのLPにアクセス LPを表示
Astroを選ぶ理由 • コンテンツ重視:コンテンツが豊富なWebサイトのために設計 • サーバーファースト:HTMLをサーバーレンダリングすることで動作速度向上 • デフォルトで高速:Astroで遅いウェブサイトを構築するのは不可能 • 簡単に使える:専門的な知識がなくても構築できる •
充実した機能と柔軟性:100以上のapiによってカスタマイズ可能
Astroが向いてるもの/向かないもの ✅主な目的が閲覧である Webページ 例 • ブログ • ポートフォリオ • ランディングページ
❌会員登録などデータのやり取り が発生するWebアプリ 例 • SNS • TODOリストアプリ • ログイン機能がついたアプリ
他のフレームワークとの違い • ReactやVueなどで採用されているSPAではなくMPA MPAは初期表示が早い。またSEO対策にも適している • サーバーファースト 現在主流の物ではなく、1つ前の主流と同じアプローチ ※主流のものもこちらに寄ってきている気がする...(Next13)
なぜ早いことが重要なのか? • 高速化100msごと → コンバージョン数1%増(Mobify、年間38万ドルの収益) • 40%高速化 → サインアップ15%増(Pinterest) •
1秒遅くなるごと → ユーザー数が10%減少(BBC) コンテンツ重視のウェブサイトでは、ユーザーが 簡単にコンテンツにアクセスできることが重要
Astro環境構築
インストール&起動 $ yarn create astro astro Launch sequence initiated. #
省略 ╭──🎃─╮ Houston: │ ◠ ◡ ◠ Good luck out there, astronaut! 🚀 ╰─────╯ ✨ Done in 79.33s. % cd #ディレクトリ名 % yarn run dev
起動したポートにアクセス http://localhost:4321/にアクセス
実際に動かしてみる 1. 細かい文字・色修正 2. リスト表示 3. マークダウンファイルで新しいページを作成 4. 3で作ったページに遷移
END