lt.pdf

Transcript

1. Astro は優秀だが万能ではない（かも）
2. 背景 Astro を個人ブログや LP 案件で使用してみたのでその所感についてお 話しします
3. Astro について ref: https://docs.astro.build/ja/concepts/why-astro/ Astro は、コンテンツにフォーカスした高速な Web サイトを構築 するためのオールインワン Web フレームワークです。 “ “
4. Astro について ref: https://docs.astro.build/ja/concepts/why-astro/ Astro を選ぶ理由 1. コンテンツ重視 2. サーバーファースト 3. デフォルトで高速 4. 簡単に使える 5. 充実した機能と柔軟性 “ “
5. Astro について コンテンツ重視 複雑な UI/UX を実現するための" アプリケーション" ではな く、" コンテンツ" を重視する web サイト向け ブログ、ポートフォリオ、コーポレートサイト、LP, ... サーバーファースト CSR ではなく SSR を優先、かつ SPA ではなく MPA View Transition API によって SPA っぽい挙動もできる（SPA モ ードと呼称）
6. アイランドアーキテクチャ Astro が採用する web アーキテクチャパターン 「Astro アイランド」とは、HTML の静的なページ上にあるイン タラクティブな UI コンポーネントを指します。1 つのページに複 数のアイランドが存在でき、アイランドは常に孤立して表示され ます。静的で非インタラクティブな HTML の海に浮かぶ島（アイ ランド）とお考えください。 “ “
7. アイランドアーキテクチャ → 静的な部分をサーバー側で事前に用意し、必要に応じてインタラク ティブな UI を埋め込むことで、並列ロード（≒ パーシャルハイドレー ション）が可能 → コンポーネントの読み込みの優先度を設けて、優先度の高いものか ら表示させることができる
8. Astro の Pros/Cons 前提 筆者は Vanilla JS や jQuery よりも、Vue.js や React に触れていた期 間が長いためモダンな UI ライブラリ（以下 React を仮定）贔屓に なってる気がします 一意見として捉えてください
9. Astro の Pros/Cons Pros 特定のフレームワークに依存しないので、導入ハードルが比較的低 い 素の マークアップ の感覚で書けるので、React に馴染みのない人で も取っ付きやすい メンテナンスとエコシステムの成長速度が早い 2 週間おきのマイナーバージョンアップ デフォルトのインテグレーションも充実しており自作もできる
10. Astro の Pros/Cons Cons 逆に React に慣れてると色々と歯痒い点がある 他の UI ライブラリと共存させるにしても連携が取り辛い点がある
11. 辛み：クライアントサイドでの処理 jsx のようにイベントハンドラを直接記述できないため、都度 DOM の API を呼ぶ必要がある addEventListener() , querySelector() ... 状態管理の仕組みもデフォルトでは備わっていない 公式が推奨している Nano Stores という軽量な状態管理ライブラ リがあるのでそれである程度カバーは可能
12. 辛み：他の UI ライブラリとの共存 コンポーネントの依存関係 .astro ファイルから .jsx や .vue のコンポーネントを呼ぶことは できるが、その逆は出来ない 他の UI ライブラリのコンポーネントを使う場合はできる限りツ リーの末端で使う考慮が必要 LP 案件では最終的に .tsx ファイルが 22 、 .astro ファイルが 3 個という内訳になった（）
13. 辛み：他の UI ライブラリとの共存 画像の取り扱い Astro には組み込みで画像最適化用の <Image /> や <Picture /> コ ンポーネントがあるが、他の UI ライブラリのコンポーネントで はそれは当然使えない Astro と React での画像の扱い方の差異の対処に結構苦労した
14. EOF