2024/05/17の勉強会で発表されたものです。

1. MPAなWebフレームワーク、
Astroの紹介 (その1)
執筆者：トビウオ

2. SPAとMPA
• SPA (Single Page Application)
画像は「いらすと屋」
空っぽのHTML

3. SPAとMPA
• MPA (Multi Page Application)
※PHPなど、Webサーバー側
で多くの処理を行うパターン
は今回考慮しない

4. なぜMPAなのか？
• SPAは高度なUIを作り込みやすい
https://ja.react.dev/ より引用

5. なぜMPAなのか？
• SPAはJavaScriptが動かないと何
も出てこない
空っぽのHTML

6. なぜMPAなのか？
SPAはJavaScriptでDOMを
書き換える時間が掛かる
MPAは書き換える前からある程度
Webページが表示できる＝高速

7. Astroとは
• MPAでWebサイトが作れるフレームワーク
• 普通のHTML/CSSのような素直さ
• 変数などが使える便利さ

8. Astroとは
• srcディレクトリ内にコードを書く
• astroファイルは概ねHTMLファイル
• Reactなど、他のライブラリとの統合
が容易

9. astroファイルを書いてみよう
• ファイルパスがURLに対応している
• /
• /memos
• /books/content
• /help/faq/001

10. astroファイルを書いてみよう
• 普通にHTMLを書け
ば、その通りに動作
する