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
lt.pdf
Search
mimu
November 27, 2023
0
13
lt.pdf
mimu
November 27, 2023
Tweet
Share
More Decks by mimu
See All by mimu
npm/Yarn/pnpmゆるふわ解説
mmrakt
0
1.1k
Type Script型パズル(?)超入門
mmrakt
0
66
まだWebpackで消耗してるの?
mmrakt
0
73
Featured
See All Featured
The Language of Interfaces
destraynor
158
25k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Documentation Writing (for coders)
carmenintech
72
4.9k
Git: the NoSQL Database
bkeepers
PRO
431
65k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
Transcript
Astro は優秀だが万能ではない(かも)
背景 Astro を個人ブログや LP 案件で使用してみたのでその所感についてお 話しします
Astro について ref: https://docs.astro.build/ja/concepts/why-astro/ Astro は、コンテンツにフォーカスした高速な Web サイトを構築 するためのオールインワン Web
フレームワークです。 “ “
Astro について ref: https://docs.astro.build/ja/concepts/why-astro/ Astro を選ぶ理由 1. コンテンツ重視 2. サーバーファースト
3. デフォルトで高速 4. 簡単に使える 5. 充実した機能と柔軟性 “ “
Astro について コンテンツ重視 複雑な UI/UX を実現するための" アプリケーション" ではな く、" コンテンツ"
を重視する web サイト向け ブログ、ポートフォリオ、コーポレートサイト、LP, ... サーバーファースト CSR ではなく SSR を優先、かつ SPA ではなく MPA View Transition API によって SPA っぽい挙動もできる(SPA モ ードと呼称)
アイランドアーキテクチャ Astro が採用する web アーキテクチャパターン 「Astro アイランド」とは、HTML の静的なページ上にあるイン タラクティブな UI
コンポーネントを指します。1 つのページに複 数のアイランドが存在でき、アイランドは常に孤立して表示され ます。静的で非インタラクティブな HTML の海に浮かぶ島(アイ ランド)とお考えください。 “ “
アイランドアーキテクチャ → 静的な部分をサーバー側で事前に用意し、必要に応じてインタラク ティブな UI を埋め込むことで、並列ロード(≒ パーシャルハイドレー ション)が可能 → コンポーネントの読み込みの優先度を設けて、優先度の高いものか
ら表示させることができる
Astro の Pros/Cons 前提 筆者は Vanilla JS や jQuery よりも、Vue.js
や React に触れていた期 間が長いためモダンな UI ライブラリ(以下 React を仮定)贔屓に なってる気がします 一意見として捉えてください
Astro の Pros/Cons Pros 特定のフレームワークに依存しないので、導入ハードルが比較的低 い 素の マークアップ の感覚で書けるので、React に馴染みのない人で
も取っ付きやすい メンテナンスとエコシステムの成長速度が早い 2 週間おきのマイナーバージョンアップ デフォルトのインテグレーションも充実しており自作もできる
Astro の Pros/Cons Cons 逆に React に慣れてると色々と歯痒い点がある 他の UI ライブラリと共存させるにしても連携が取り辛い点がある
辛み:クライアントサイドでの処理 jsx のようにイベントハンドラを直接記述できないため、都度 DOM の API を呼ぶ必要がある addEventListener() , querySelector()
... 状態管理の仕組みもデフォルトでは備わっていない 公式が推奨している Nano Stores という軽量な状態管理ライブラ リがあるのでそれである程度カバーは可能
辛み:他の UI ライブラリとの共存 コンポーネントの依存関係 .astro ファイルから .jsx や .vue のコンポーネントを呼ぶことは
できるが、その逆は出来ない 他の UI ライブラリのコンポーネントを使う場合はできる限りツ リーの末端で使う考慮が必要 LP 案件では最終的に .tsx ファイルが 22 、 .astro ファイルが 3 個という内訳になった()
辛み:他の UI ライブラリとの共存 画像の取り扱い Astro には組み込みで画像最適化用の <Image /> や <Picture
/> コ ンポーネントがあるが、他の UI ライブラリのコンポーネントで はそれは当然使えない Astro と React での画像の扱い方の差異の対処に結構苦労した
EOF