Astroの役割と向いている制作物

最初に届けたいのは、読めるページ

Astroは、記事・会社紹介・ドキュメント・商品説明のような、読む内容が中心のWebサイトを作るフレームワークです。ページをHTMLにして届け、操作が必要な部分にだけJavaScriptを追加できます。HTMLが中心でも、検索フォームやお気に入りなどの操作は作れます。

ReactとNext.jsとの関係

ReactはUIをコンポーネントと状態で組み立てるライブラリです。Next.jsはReactを基盤にページやサーバー処理を組み立てるフレームワーク。Astroは別のフレームワークで、Reactを必須にせず、必要ならReactの部品をページへ組み込めます。Astroを始めるためにNext.jsを先に習う必要はありません。

得意さと、選ぶときの注意

ブログに一つの検索UIを置くなら、本文を静的HTML、検索を操作部分に分ける考え方が合いやすいです。画面全体が頻繁に更新され、複数の領域が同じ状態を共有する編集アプリでは、React中心の構成も比較しましょう。これは機能からの選定目安で、Astroでは作れないという制限ではありません。

• 表示速度は画像サイズ・外部スクリプト・通信環境にも左右される
• 認証・DB・課金・常時接続が自動で完成するわけではない

学習中は二つの問いを持つ

この処理はどこで動くのか。そして、いつ動くのか。ページを作るJavaScriptと、クリックに反応するJavaScriptは別です。まず静的サイトを作り、後半でリクエスト時の処理が必要な場面を足すと、境界を見失いにくくなります。

操作のないページはHTMLから始める

---
const siteName = '旅のメモ';
---
<html lang="ja">
  <head><meta charset="utf-8" /><title>{siteName}</title></head>
  <body>
    <main><h1>{siteName}</h1><p>訪れた場所を記録します。</p></main>
  </body>
</html>

この例にはブラウザーで動くアプリ用JavaScriptを書いていません。01では読んで理解し、02の環境構築後に実行できます。