コードを試す前に
02で作るJavaScriptの静的構成、base設定なし、ClientRouterなしを基本にします。08はReact integration付き、10〜11はadapter付きの別構成です。01の実行は02の後に戻って試せます。
各コードは独立した学習用の例で、すべてを順に一つのプロジェクトへ上書きする形式ではありません。同じレッスン内の対応ファイルは組み合わせます。依存関係・入力ファイル・実行条件は各noteに記載します。
開発環境の準備を確認する →JavaScriptで基礎から学ぶ
コンテンツを届ける、軽くて読みやすいサイトづくり。
2026-10-06にAstro公式の現行ドキュメントとv7移行ガイドを確認。最新パッチ番号は断定せず、現行のContent Layer方式とJavaScriptで進めます。
採用したAstro版とintegration・adapterの互換性を確認してください。旧Content Collections API、旧output: hybrid、現行のライブコレクションを混ぜません。
時間は本文の理解と小さな演習の目安です。環境構築・復習・最終制作は別です。
教材のコード例について
この学習サイト自体はAstroとJavaScriptで作った静的サイトです。コード例は教材であり、このページ内で実行するものではありません。各レッスンの準備と注意を読み、自分の開発環境で試してください。
進捗はコースごとに保存
完了レッスンと各問題の最新結果は、このブラウザのlocalStorageに保存します。Next.js・React・Astroは独立した記録で、他のコースに切り替えても残ります。端末間の同期は行いません。ブラウザのデータを消すと記録も削除されます。
公式資料
確認日:2026-10-06。最新の仕様は公式資料で確認してください。
- Astro: Why Astro? ↗
- Astro: Install Astro ↗
- Astro: Components ↗
- Astro: Template expressions reference ↗
- Astro: Pages ↗
- Astro: Layouts ↗
- Astro: Routing ↗
- Astro: Styles and CSS ↗
- Astro: Images ↗
- Astro: Scripts and event handling ↗
- Astro: Islands architecture ↗
- Astro: Template directives reference ↗
- Astro: @astrojs/react ↗
- Astro: Content collections ↗
- Astro: Content Collections API Reference ↗
- Astro: On-demand rendering ↗
- Astro: @astrojs/node ↗
- Astro: Build HTML forms in Astro pages ↗
- Astro: Endpoints ↗
- Astro: Actions ↗
- Astro: Actions API Reference ↗
- Astro: Testing ↗
- Astro: Deploy your Astro Site ↗
- Astro: CLI Commands ↗
- Astro: Upgrade to Astro v7 ↗
- React: Quick Start ↗
- Next.js: Next.js Docs ↗