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 の pros / cons
Search
hashiba daiki
April 21, 2023
Programming
1
1.3k
Astro の pros / cons
Vercel * Astro を使った開発を行い気づいた点を共有します。
hashiba daiki
April 21, 2023
Tweet
Share
More Decks by hashiba daiki
See All by hashiba daiki
フロントエンドの大規模開発におけるTips
hashibadaiki
3
1.3k
Other Decks in Programming
See All in Programming
Benchmark
sysong
0
280
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
2.4k
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
370
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
610
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
280
C++20 射影変換
faithandbrave
0
560
VS Code Update for GitHub Copilot
74th
2
580
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.8k
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
260
5つのアンチパターンから学ぶLT設計
narihara
1
140
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
670
Featured
See All Featured
How to Ace a Technical Interview
jacobian
277
23k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Making Projects Easy
brettharned
116
6.3k
4 Signs Your Business is Dying
shpigford
184
22k
Designing for humans not robots
tammielis
253
25k
Transcript
Vercel * Astroで気づいた Astro のpros / cons Serverless Frontend Meetup
#2 「Vercel」 2023/4/21 はしば
自己紹介 - 羽柴 大生(はしば だいき) - chot Inc. 所属 -
Web フロントエンドエンジニア - 大阪出身→香川在住 - (世界一)可愛い娘がいます
今回話すこと # Astroのこと - 概要 - できること - 実際にやったこと -
pros / cons - まとめ
何を伝えたいか - フロントエンドは流行り廃りがしんどい - できることは見つけられても、できないことはなかなか見 当たらない - できることと、できないこと、実際に触って気づいたことを ベースに話します
概要(公式引用) - Astro is the all-in-one web framework designed for
speed. Pull your content from anywhere and deploy everywhere, all powered by your favorite UI components and libraries. - zero-JS - Content-focused https://astro.build/
できること - blog - portfolio - corporate - EC
できること? - blog - portfolio - corporate - EC
できる範囲 - blog - portfolio - corporate - EC
- blog … all pre-renderであれば - portfolio … all pre-renderであれば
- corporate - EC できる範囲
- blog … all pre-renderであれば - portfolio … all pre-renderであれば
- corporate … ぎりぎり - EC できる範囲
- blog … all pre-renderであれば - portfolio … all pre-renderであれば
- corporate … ぎりぎり - EC … 🥺 できる範囲?
demo(blog) / : Top page … pre-render /search : 検索ページ
… SSR /blog/[blogId] : ブログ詳細 … pre-render
実際にやったこと - HTML / CSSが静的なassetとして欲しい - JSを不用意に吐き出さない - human readableなコードが欲しい
- previewを見せる必要がある - 非エンジニアでも確認できる環境 → Vercel * Astro
良かったこと - jQueryをぬるっと入れれる - それがアンチパターンかどうかは一旦おいておいて - jsxのお作法や、v-forみたいな呪文を覚えなくても素のHTML の知識があれば対応できる - モダンフロント初めての人でも障壁が少ないように感じた
(TSもmustではない)
つらかったこと① 沢山の getElementById, addEventListener useState1行でも使うとn千行のjs fileが爆誕してしまうため、islands architecture が導入できない。 (zero-JSという特徴が死ぬ) 最初は書きやすいと思った
.astro fileが敵に見えてくる。
つらかったこと① 公式には「こう書いたらuseStateなくてもいけるで」って書いてますが、こう書きた くないから皆 React やら Vue やらを使ってるんやで https://docs.astro.build/en/guides/client-side-scripts/
つらかったこと② script, style tagが独特 - 暗黙的にglobalかinlineかが決まっている - コンポーネントの出し分けなどで中々意図した挙動にさせずらい - <script>タグにtype="module
"またはsrc以外の属性を追加すると、 Astroのデフォルトのバンドル動作が無効になり、is:inlineディレクティ ブがあるかのようにタグが扱われる
つらかったこと② script, style tagが独特 - 一応front matterから変数を渡すこともできるが、渡せる変数も 限られている(JSONでシリアライズ可能な値のみ)
つらかったこと③ いつも通りの eslint, TS ではない 当然と言えば当然ですが、 - JSX.IntrinsicElements['div'] - CSSProperties
- ReactNode などは存在しない。ReactがTSと親和性がありすぎる
つらかったこと④ 謎の挙動がある - 開発サーバーが急にこける - たまにeslintが通らない(同じコードで確認したら通るとかも ある) - buildも同様
つらかったこと④ 謎の挙動がある - 開発サーバーが急にこける - たまにeslintが通らない(同じコードで確認したら通るとかも ある) - buildも同様 →総じてReactに比べると開発者体験が辛かった🥺
ワンポイント ※特に静的なassetが欲しい場合 ・distされたデータをよく確認する ・npm scriptに頼る ・Vercelにdeployされている時とlocalの distされるデータは違う
まとめ ①静的なfileを手に入れたい ②all pre-render で簡素なサイト ③ejsの代わり(未検証)
まとめ ①静的なfileを手に入れたい ②all pre-render で簡素なサイト ③ejsの代わり(未検証) →これ以外は React, Vue などが使えるなら素直にそっち
参考 なんだかんだ公式 https://astro.build/ script tagの挙動について https://hiroppy.me/blog/astro-script-issue Astroのサンプルコードやversion2の紹介動画 https://www.youtube.com/watch?v=gi4c7fbeURc
ご視聴 & ご清聴 ありがとうございました!!!