Astroで始める爆速個人サイト開発

Transcript

1. Astroで始める 爆速個人サイト開発 Takanori Oki / takanorip 2023/1/21 - BuriKaigi 2023 Astroで始める 爆速個人サイト開発 Takanori Oki / takanorip 2023/1/21 - BuriKaigi 2023
2. 自己紹介 takanorip / 大木 尊紀（Takanori Oki） デザインエンジニア@Ubie デザインしたりコード書いたりしてます。 趣味は個人サイト制作、料理、筋トレ、得意料理はパスタ。 デザインシステムとかデザインエンジニアとかの同人誌書いています。 https://inutetraplus.booth.pm/
3. Ubie株式会社 Ubie株式会社
7. 個人サイトのススメ Astroって何？ 個人的Astro推しポイント おすすめ技術構成 デザインTips（伝えたいことを考えろの巻） まとめ 目次
8. 個人サイトのススメ 個人サイトのススメ
9. 個人サイトのススメ 個人サイトは自己表現の場 プラットフォームに依存しない
 自由に自分を表現できる場所
10. 個人サイトのススメ C 名刺代わりにな8 C デザインの練習にな8 C コンテンツは自分自身T C Webの仕組みを知る良い機E C 普段できないことをやってみる場所
11. SSGって何？ SSGって何？
12. Static Site Generator Static Site Generator データから静的サイトを
 生成するツール
13. Static Site Generator data page1 page2 page3
14. 主なJS製のSSGフレームワーク メタフレームワーク Astro Reactベース Gatsby Next.js Pure JS Eleventy Hexo Sveltベース Svelt Kit
15. Astroって何？ Astroって何？
16. Astro = Static Site Generator “Build faster websites.” 爆速静的サイトを作ってくれるやつ 良い感じにやってくれるStatic Site Generator
17. 何が爆速なの？ 3) セットアップが爆% ) viteでビルドが爆% ) ページの表示が爆速
18. 爆速セットアップ npm create astro@latest -- --template jmblog/astro-starter-kit ESLint、Prettier、Markuplint、Stylelint、@astrojs/sitemap、astro- compress、 astro-seo、astro-purgecssが全部入りのスターターキット
19. 爆速セットアップ A public6 A src6 A components6 A Header.astr% A Button.js A layouts6 A PostLayout.astr% A pages6 A posts6 A post1.m& A index.astr% A styles6 A global.cs0 A astro.config.mj0 A package.jso A tsconfig.json
20. src/pages/index.astro --- = = --- => import const await const { } ; ​ { } . ( ); . ( . ); Using your CMS With top-level await, Astro makes it easy to fetch content from your CMS. { . (( ) ( ={ . } { . } ))} storyblokApi get values links map href slug name from storyblokApi Object data links link link link "../cms" 'cdn/links' data links < > </ > < > </ > < > < >< > </ ></ > </ > h1 h1 p p ul li a a li ul
21. Astroの特徴 「完全に静的なサイト」を作れる コンポーネントごとにJSを生成・ロードできる 様々なフレームワークと一緒に使うことができる
22. JSを全く生成しない「完全に静的なサイト」を作れる v ReactやVueなどに対応したJS製のSSG（Gatsbyなど）は、JSを生成し てしまうので、表示は早いが操作できるまでが遅いという問題点があっe v Astroは完全にJSを排除したHTMLを生成できるので、
 ページの読み込みが格段に早くなる
23. コンポーネントごとにJSを生成・ロードできる … クライアントサイドでJSを利用したいとき、propsに と
 指定するとコンポーネントごとにJSを生成しロードすc … JSを並列でロードしてくれるのでパフォーマンスが良W … コンポーネントのLazy Loadingにも対応 client:load
24. src/pages/index.astro --- --- import ; MyReactComponent from '../components/MyReactComponent.jsx' < /> MyReactComponent client:load
25. Islands Architecture
26. 様々なフレームワークと一緒に使うことができる l ファイルでは様々なフレームワークで作られたコンポーネントを
 読み込み使用できY l https://docs.astro.build/en/guides/integrations-guideb l TypeScriptを標準で利用できる環境になっているのでtsxなども問題なく 利用できY l EleventyなどのPure JSなSSGフレームワークはTypeScriptやtsx の導入ハードルが少し高いデメリットがある .astro
27. 様々なフレームワークと一緒に使うことができる --- --- import import import ; ; ; MyReactComponent from MyVueComponent from MySveltComponent from '../components/MyReactComponent.jsx' '../components/MyVueComponent.jsx' '../components/MySveltComponent.jsx' < /> < /> < /> MyReactComponent MyVueComponent MySveltComponent
28. Astroの推しポイント Astroの推しポイント
29. 推しポイント 6 tsxが簡単に扱え 6 Pure HTMLを作れ 6 Integrationが豊富
30. 個人サイトにおすすめの 技術構成 個人サイトにおすすめの 技術構成
31. おすすめの技術構成 インフラ Cloudflare Pages CMS Contentful SSG Astro テンプレート Preact（tsx） スタイリング CSS Modules
32. Cloudflare Pages ‚ Cloudflareがやっている静的ホスティングサービ8 ‚ https://www.cloudflare.com/ja-jp/products/pages„ ‚ UIが見やすg ‚ キャッシュの設定がしやすg ‚ Google Analyticsを導入しなくてもPV数などの計測をしてくれる
34. Contentful t Headless CMSの1$ t https://www.contentful.comU t 機能が充実しており、データ設計が柔軟にでき# t 無料枠が大きい（Records: 25k、API calls: 2,000,000/mo t 公式にもサポートドキュメントがあ# t https://docs.astro.build/en/guides/cms/contentful/
35. Preact Y Reactとほぼ同じ機能を持ちつつ軽量なライブラ@ Y https://preactjs.comU Y Reactと互換性があるのでReact製のUIライブラリを利用でき1 Y 軽量なのでJSを動作させたいときの罪悪感が少ない
36. CSS Modules s ScopedなCSSを生成するための技P s CSSは温かみのある手書きに限q s Tailwind CSSを使ってもまあ良い気がすq s https://docs.astro.build/ja/guides/integrations-guide/ tailwind s 筆者はアンチなので使わないが
37. Webサイトを作るときの デザインTips Webサイトを作るときの デザインTips
38. ウェブサイトで伝えたいことを明確にする マークアップをちゃんとする 余計な装飾を入れない デザインで気をつけること
39. ウェブサイトで伝えたいことを明確にする ƒ 自分のWebサイトを訪問してくれた人にどんな情報を得てほしいa ƒ 情報設計が大G ƒ Webサイトを見たあとにどんなアクションを期待するかY ƒ 副業の依頼をしてくれ2 ƒ レジュメを見て転職のスカウトをしてくれ2 ƒ SNSをフォローしてくれる
40. マークアップをちゃんとする ˆ Webサイトはマークアップをちゃんとすれば大体良い感じになC ˆ アクセシビリティも大体良い感じになC ˆ HTMLを学ぼ3 ˆ 「武器になるHTML」がおすす' ˆ https://gihyo.jp/book/2022/978-4-297-13132-6
41. 余計な装飾を入れない w カルーセルとかパララックスとか余計な装飾を入れなY w デザイナーのポートフォリオとかを参考にすると入れが… w スクロールジャックは絶対にするな！！$ w 情報設計とコンテンツ設計、レイアウトに注力すi w 装飾は最低限（見出しの装飾、グルーピングのための枠線、など7 w 興味がある人は「レイアウト・デザインの教科書」を読むと良いかy w https://www.sbcr.jp/product/4797397314/
42. 余計な装飾を入れない スクロールジャックは 絶対にするな！！！
43. まとめ まとめ
44. まとめ Astro最高！！！
45. We're hiring! We're hiring!
47. Ubie株式会社ではエンジニアを大募集中です！ 現在募集中の職種 G プロダクト開発エンジニA G ソフトウェアエンジニア(デリバリー&サクセス6 G QA エンジニA G SRE（Site Reliability Engineer） https://recruit.ubie.life/engineer
48. Ubie株式会社ではエンジニアを大募集中です！ 各職種の詳しい募集要項は採用サイトをご覧ください！ カジュアル面談だけでも大歓迎なので、 気軽にご連絡ください！ https://recruit.ubie.life/engineer
49. ご清聴ありがとうございました！