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
補足資料:LLMとは?
hashibadaiki
0
16
苦しんで向き合うLLM時代の開発
hashibadaiki
12
4.3k
フロントエンドの大規模開発におけるTips
hashibadaiki
3
1.3k
Other Decks in Programming
See All in Programming
個人軟體時代
ethanhuang13
0
280
TDD 実践ミニトーク
contour_gara
1
270
Testing Trophyは叫ばない
toms74209200
0
110
OSS開発者という働き方
andpad
5
1.6k
コンテキストエンジニアリング Cursor編
kinopeee
1
740
速いWebフレームワークを作る
yusukebe
3
1.5k
ソフトウェアテスト徹底指南書の紹介
goyoki
1
130
AWS発のAIエディタKiroを使ってみた
iriikeita
1
130
ECS初心者の仲間 – TUIツール「e1s」の紹介
keidarcy
0
150
為你自己學 Python - 冷知識篇
eddie
1
310
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
150
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
7
1k
Featured
See All Featured
A better future with KSS
kneath
239
17k
Building Adaptive Systems
keathley
43
2.7k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6.1k
Designing for Performance
lara
610
69k
Side Projects
sachag
455
43k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
284
13k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
20k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
A Tale of Four Properties
chriscoyier
160
23k
Visualization
eitanlees
147
16k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
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
ご視聴 & ご清聴 ありがとうございました!!!