【先行予約】Astro v6 実践ガイド

【先行予約】Astro v6 実践ガイド

〜基礎から学ぶモダンなWeb制作〜

コンテンツ駆動のWebサイトをスピーディーに構築する。AI駆動開発にも

世界中で人気のフレームワークであるAstroは、HTMLをベースにしたスタティックサイトジェネレータです。Astroを使えば、CMSを組み込まなくても効率的にコンテンツを管理・運用できます。HTML単体ではなかなかできなかった「コンポーネントで分割された構造」と「シンプルなデータ管理」は、AIエージェントを駆使してスピーディにコードを生成させる2026年の「AI駆動開発」にもマッチすること間違いなしです（一般に非公開のオリジナルClaude Codeスキルも同梱）。

※既に「Astro v7」の公開が予定されていますので、リリース後はバージョンアップ対応をおこないます。

本講座は2026年6月15日（月）リリース予定の先行予約商品となります。

定価: 7,700円（税込）
先行予約価格: 5,500円（税込）〜正式リリースまで

---

主要トピック

• Astroの基本から順番に: HTMLベースの作例をAstroコンポーネントに置き換えながら、Propsによるデータの受け渡し方など順番に
• アイランド・アーキテクチャ: Zero JSが基本のAstro。重いJavaScriptを排除し、必要な部分だけでJavaScriptを動かす方法
• Nano Storesによる状態管理: HTMLの海の中で離れ小島になったReactコンポーネント同士のデータを連携させる魔法
• Content Layer & MDX: CMSをわざわざ導入せず、型安全かつ直感的に記事を書けるMDXを使ったコンテンツの管理
• Data Loaders & SSR: 静的なコンテンツ配信における外部APIからのデータ取得や、サーバ側でHTMLを生成するSSRの実装手法
• Cloudflareへのデプロイ: Astroとの連携が強化されたCloudflareを使って、サイトを全世界のエッジネットワークへ配信する方法
• 従来のサーバへのデプロイ: Astroが持つ静的サイトジェネレータとしての機能を使った従来のホスティング環境で配信する方法

実務で役立つ豪華特典付き

1. ガイドライン組み込み済スターターキット: 講座で利用するAstroのスターターキットには、最新仕様に最適化されたガイドラインを同梱
2. 非公開Claude Codeスキル: Astroのコードを評価し、好みのレベルで最適化するスキル「astro-doctor」、サイトやページのモックアップ作りやレイアウトパターン出しを、質問に答えるだけでAIエージェントが自律的におこなう「create-mockup」「create-multi-mockup」スキル（Astro/HTML/React対応）を本講座で先行配布
3. 公開中のスキルも最新版に: 話題の「DESIGN.md」を生成するスキルやそのプレビュー（HTML/Astro対応）するスキル、作例でも利用しているTailwind CSS v4対応のタイプスケール生成スキル、クラスをチェック＆改善できるスキル、FigmaとTailwindの間で変数やテーマをやりとりするスキルなど、実務で役立つスキルはまとめて提供

---

動画本数: 50本超（予定）
総時間: ---

公式LINEアカウントの新規友だち登録で10%割引のクーポンコード発行中。
購入前の事前登録がお得です。

https://lin.ee/EOgmkKQ

---

収録予定の内容は以下（2026年6月13日現在）

第1章：Astro をセットアップする

〜モダンな開発環境とベースデザインの構築〜

1. Astro とは？
2. 環境準備とプロジェクト作成
3. 公式拡張機能とAIガイドライン
4. インテグレーションの追加
5. ディレクトリ構成の確認と編集
6. CSSをコピーしてデザインを適用

第2章：コンポーネントとレイアウト

〜重複をなくし、保守性の高いUIを作る〜

1. ベタ書きHTMLの課題
2. コンポーネント化とパスエイリアス
3. スロットによる共通レイアウト
4. カードのコンポーネント化と Props
5. Astro標準 <Image/> コンポーネント
6. コンポーネントとリストレンダリング

第3章：アイランド・アーキテクチャ

〜必要な部分だけを動かす、Astro最大の魔法〜

1. Zero JS の原則とAstroの特徴
2. Reactコンポーネントの配置
3. client:load による水分補給
4. サーバーとクライアントの境界線
5. パフォーマンス最適化〜client:visible
6. 複数Islandsの独立性と安全性

第4章：ルーティングの基本

〜ファイルベースで作る、直感的なサイト構造〜

1. ファイルベースルーティングの基本
2. 動的ルート [slug].astro の役割
3. getStaticPaths による静的ページの生成
4. Propsの受け渡しと動的レンダリング
5. Astro.props を使ったタイトルの指定
6. 404ページの作成と存在しないルートの処理

第5章：状態管理とUI連携

〜Islands間の壁を越えてデータを共有する〜

1. コンポーネント間の孤独
2. Nano Stores の導入
3. Storeの作成〜状態の中央管理
4. 状態の書き込み
5. 状態の購読と表示
6. LocalStorageでの永続化

第6章：コンテンツ管理１

〜データを型安全に分離し、運用しやすい構造を作る〜

1. ハードコードからの脱却〜Content Collections
2. MDXファイルの作成
3. Zod によるスキーマ定義
4. getCollection による一覧ページ
5. 詳細ページの動的生成と本文のレンダリング
6. MDXの真骨頂〜Markdownとコンポーネント

第7章：コンテンツ管理２

〜あらゆるデータソースを型安全に統合する〜

1. 外部データの課題と Data Loaders
2. Loaderの定義とZodスキーマ設定
3. コンポーネントでの外部データ呼び出し
4. SSGからSSRへの移行
5. 疑似リアルタイム在庫の実装
6. 実務でのSSRの注意点〜ホスティングの制約

第8章：仕上げと公開、そしてAI

〜新時代のユニファイド・プラットフォームへ〜

1. UXを高めるページ遷移アニメーション
2. SEO設定とサイトマップの自動生成
3. Cloudflareのアカウント作成と環境準備
4. Cloudflareアダプターの追加
5. 全世界へ公開する〜デプロイの実行
6. オリジナル「AIスキル」と総まとめ

【付録】普通のレンタルサーバーでの公開（SSG）

〜Cloudflareが使えない現場のための公開ガイド〜

1. 静的サイトしか動かない？
2. 設定ファイルのスイッチを切り替える
3. 問い合わせフォームなどの機能はどうするか？
4. 公開ファイルのビルドとアップロード

---