Tweet
Tweet

Slide 1

Slide 1 text

Vercel * Astroで気づいた Astro のpros / cons Serverless Frontend Meetup #2 「Vercel」 2023/4/21　はしば

Slide 2

Slide 2 text

自己紹介 - 羽柴 大生(はしば だいき) - chot Inc. 所属 - Web フロントエンドエンジニア - 大阪出身→香川在住 - (世界一)可愛い娘がいます

Slide 3

Slide 3 text

今回話すこと # Astroのこと - 概要 - できること - 実際にやったこと - pros / cons - まとめ

Slide 4

Slide 4 text

何を伝えたいか - フロントエンドは流行り廃りがしんどい - できることは見つけられても、できないことはなかなか見 当たらない - できることと、できないこと、実際に触って気づいたことを ベースに話します

Slide 5

Slide 5 text

概要(公式引用) - 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/

Slide 6

Slide 6 text

できること - blog - portfolio - corporate - EC

Slide 7

Slide 7 text

できること? - blog - portfolio - corporate - EC

Slide 8

Slide 8 text

できる範囲 - blog - portfolio - corporate - EC

Slide 9

Slide 9 text

- blog … all pre-renderであれば - portfolio … all pre-renderであれば - corporate - EC できる範囲

Slide 10

Slide 10 text

- blog … all pre-renderであれば - portfolio … all pre-renderであれば - corporate … ぎりぎり - EC できる範囲

Slide 11

Slide 11 text

- blog … all pre-renderであれば - portfolio … all pre-renderであれば - corporate … ぎりぎり - EC … 🥺 できる範囲?

Slide 12

Slide 12 text

demo(blog) / : Top page … pre-render /search : 検索ページ … SSR /blog/[blogId] : ブログ詳細 … pre-render

Slide 13

Slide 13 text

実際にやったこと - HTML / CSSが静的なassetとして欲しい - JSを不用意に吐き出さない - human readableなコードが欲しい - previewを見せる必要がある - 非エンジニアでも確認できる環境 → Vercel * Astro

Slide 14

Slide 14 text

良かったこと - jQueryをぬるっと入れれる - それがアンチパターンかどうかは一旦おいておいて - jsxのお作法や、v-forみたいな呪文を覚えなくても素のHTML の知識があれば対応できる - モダンフロント初めての人でも障壁が少ないように感じた (TSもmustではない)

Slide 15

Slide 15 text

つらかったこと① 沢山の getElementById, addEventListener useState1行でも使うとn千行のjs fileが爆誕してしまうため、islands architecture が導入できない。 (zero-JSという特徴が死ぬ) 最初は書きやすいと思った .astro fileが敵に見えてくる。

Slide 16

Slide 16 text

つらかったこと① 公式には「こう書いたらuseStateなくてもいけるで」って書いてますが、こう書きた くないから皆 React やら Vue やらを使ってるんやで https://docs.astro.build/en/guides/client-side-scripts/

Slide 17

Slide 17 text

つらかったこと② script, style tagが独特 - 暗黙的にglobalかinlineかが決まっている - コンポーネントの出し分けなどで中々意図した挙動にさせずらい - タグにtype="module "またはsrc以外の属性を追加すると、 Astroのデフォルトのバンドル動作が無効になり、is:inlineディレクティ ブがあるかのようにタグが扱われる

Slide 18

Slide 18 text

つらかったこと② script, style tagが独特 - 一応front matterから変数を渡すこともできるが、渡せる変数も 限られている(JSONでシリアライズ可能な値のみ)

Slide 19

Slide 19 text

つらかったこと③ いつも通りの eslint, TS ではない 当然と言えば当然ですが、 - JSX.IntrinsicElements['div'] - CSSProperties - ReactNode などは存在しない。ReactがTSと親和性がありすぎる

Slide 20

Slide 20 text

つらかったこと④ 謎の挙動がある - 開発サーバーが急にこける - たまにeslintが通らない(同じコードで確認したら通るとかも ある) - buildも同様

Slide 21

Slide 21 text

つらかったこと④ 謎の挙動がある - 開発サーバーが急にこける - たまにeslintが通らない(同じコードで確認したら通るとかも ある) - buildも同様 →総じてReactに比べると開発者体験が辛かった🥺

Slide 22

Slide 22 text

ワンポイント ※特に静的なassetが欲しい場合 ・distされたデータをよく確認する ・npm scriptに頼る ・Vercelにdeployされている時とlocalの distされるデータは違う

Slide 23

Slide 23 text

まとめ ①静的なfileを手に入れたい ②all pre-render で簡素なサイト ③ejsの代わり(未検証)

Slide 24

Slide 24 text

まとめ ①静的なfileを手に入れたい ②all pre-render で簡素なサイト ③ejsの代わり(未検証) →これ以外は React, Vue などが使えるなら素直にそっち

Slide 25

Slide 25 text

参考 なんだかんだ公式 https://astro.build/ script tagの挙動について https://hiroppy.me/blog/astro-script-issue Astroのサンプルコードやversion2の紹介動画 https://www.youtube.com/watch?v=gi4c7fbeURc

Slide 26

Slide 26 text

ご視聴 & ご清聴 ありがとうございました!!!