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