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
39
Astroの紹介
u-Hoshi
November 11, 2023
Tweet
Share
More Decks by u-Hoshi
See All by u-Hoshi
StripeAPIの紹介
u_hoshi
0
45
初めて趣味でチーム開発 してわかったこと
u_hoshi
1
480
レビュワーアプリ
u_hoshi
0
33
Other Decks in Programming
See All in Programming
リハビリmruby
kishima
1
160
最古の関数型言語「Lisp」ことはじめ / lisp_in_kamiyama
uhooi
1
190
CSC307 Lecture 10
javiergs
PRO
0
310
iOSアプリでクリップボードにコピーしたことをユーザーに伝えるちょうど良いフィードバックを探す
ski
0
100
はしめてのプログラミングとロボット制御
watawatavoltage
0
290
AWSでゲームサーバーを運用! Amazon GameLiftのお話
iriikeita
0
200
20240706_CDKConf
takuyay0ne
0
1.2k
SRE チーム立ち上げ前に考えたこと・取り組んだこと / Considerations and Preparations Before Establishing an SRE Team
mackey0225
3
320
Terraformテスト入門
msato
0
540
なぜ宣言的 UI は壊れにくいのか / Why declarative UI is less fragile
uenitty
29
13k
ぼっちを避けて楽しむためのアノテコノテ / Various Tips and Tricks to Avoid Loneliness and Have Fun
nrslib
3
1.7k
HMSコンペ 11th Solution (team : kansai-kaggler)
t88
1
680
Featured
See All Featured
Designing Experiences People Love
moore
136
23k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
277
13k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
17
1.5k
Why Our Code Smells
bkeepers
PRO
332
56k
StorybookのUI Testing Handbookを読んだ
zakiyama
15
4.9k
Bash Introduction
62gerente
607
210k
BBQ
matthewcrist
82
9k
GraphQLとの向き合い方2022年版
quramy
36
13k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
129
32k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
23
1.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
19k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
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