Astroの紹介

Transcript

1. Astro入門 u-Hoshi
2. アジェンダ - フレームワークとは - Astroとは(選ぶ理由・向き不向き・強み) - 特徴 - セットアップと使用方法 - デモ
3. 自己紹介 ・職種　　　　　 ：エンジニア ・出身地　　　　 ：千葉県 ・趣味/好きなもの：スノーボード アニメ/マンガ 読書 u-Hoshi
4. Astroとは • Astroは新しいフロントエンドフレームワーク • 高速なレンダリングエンジンを搭載し、パフォーマンスに優れている
5. フレームワークとは • 開発効率の向上：予め設計された機能や構造を開発者が利用できる • 品質向上：プログラムミスがセキュリティリスクが事前に考慮されている • 一貫性：プロジェクト全体で開発規則などがあるため複数の作業者がいても　　　　 統一感のあるアプリが開発できる • サポート：開発チームなどが問題や疑問を解決するリソースを提供している プログラム開発に必要な機能をまとめたもの
6. レンダリングエンジンとは データを視覚的に表示するための処理を担当する ソフトウェア MIRAIZのLPにアクセス LPを表示
7. Astroを選ぶ理由 • コンテンツ重視：コンテンツが豊富なWebサイトのために設計 • サーバーファースト：HTMLをサーバーレンダリングすることで動作速度向上 • デフォルトで高速：Astroで遅いウェブサイトを構築するのは不可能 • 簡単に使える：専門的な知識がなくても構築できる • 充実した機能と柔軟性：100以上のapiによってカスタマイズ可能
8. Astroが向いてるもの/向かないもの ✅主な目的が閲覧である Webページ 例 • ブログ • ポートフォリオ • ランディングページ ❌会員登録などデータのやり取り が発生するWebアプリ 例 • SNS • TODOリストアプリ • ログイン機能がついたアプリ
9. 他のフレームワークとの違い • ReactやVueなどで採用されているSPAではなくMPA MPAは初期表示が早い。またSEO対策にも適している • サーバーファースト 現在主流の物ではなく、１つ前の主流と同じアプローチ ※主流のものもこちらに寄ってきている気がする...(Next13)
10. なぜ早いことが重要なのか？ • 高速化100msごと → コンバージョン数1％増（Mobify、年間38万ドルの収益） • 40%高速化 → サインアップ15%増（Pinterest） • 1秒遅くなるごと → ユーザー数が10%減少（BBC） コンテンツ重視のウェブサイトでは、ユーザーが 簡単にコンテンツにアクセスできることが重要
11. Astro環境構築
12. インストール&起動 $ yarn create astro astro Launch sequence initiated. # 省略 ╭──🎃─╮ Houston: │ ◠ ◡ ◠ Good luck out there, astronaut! 🚀 ╰─────╯ ✨ Done in 79.33s. % cd #ディレクトリ名 % yarn run dev
13. 起動したポートにアクセス http://localhost:4321/にアクセス
14. 実際に動かしてみる 1. 細かい文字・色修正 2. リスト表示 3. マークダウンファイルで新しいページを作成 4. 3で作ったページに遷移
15. END