{"product_id":"astro-v6-pragmatic-guide","title":"【先行予約】Astro v6 実践ガイド","description":"\u003ch2\u003e【先行予約】Astro v6 実践ガイド\u003c\/h2\u003e\n\u003cp\u003e〜基礎から学ぶモダンなWeb制作〜\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003eコンテンツ駆動のWebサイトをスピーディーに構築する。\u003cmeta charset=\"utf-8\"\u003eAI駆動開発にも\u003c!-- notionvc: 25b5d5cc-a105-46ef-ba55-57e5730face7 --\u003e\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp data-path-to-node=\"9\"\u003e世界中で人気のフレームワークであるAstroは、HTMLをベースにしたスタティックサイトジェネレータです。Astroを使えば、CMSを組み込まなくても効率的にコンテンツを管理・運用できます。HTML単体ではなかなかできなかった「コンポーネントで分割された構造」と「シンプルなデータ管理」は、AIエージェントを駆使してスピーディにコードを生成させる2026年の「AI駆動開発」にもマッチすること間違いなしです（\u003cstrong\u003e一般に非公開のオリジナルClaude Codeスキルも同梱\u003c\/strong\u003e）。\u003c!-- notionvc: 97b759ca-d001-435d-bf94-36979c3ed126 --\u003e\u003c\/p\u003e\n\u003cp data-path-to-node=\"9\"\u003e※既に「Astro v7」の公開が予定されていますので、リリース後はバージョンアップ対応をおこないます。\u003c\/p\u003e\n\u003cp data-path-to-node=\"9\"\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cstrong\u003e本講座は2026年6月15日（月）リリース予定の先行予約商品となります。\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp data-path-to-node=\"9\"\u003e\u003cstrong\u003e定価:\u003c\/strong\u003e 7,700円（税込）\u003cstrong\u003e\u003cbr\u003e先行予約価格: 5,500円（税込）\u003c\/strong\u003e〜正式リリースまで\u003cstrong\u003e\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp data-path-to-node=\"11\"\u003e---\u003c\/p\u003e\n\u003ch3\u003e\u003cstrong\u003e主要トピック\u003c\/strong\u003e\u003c\/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cstrong\u003eAstroの基本から順番に\u003c\/strong\u003e: HTMLベースの作例をAstroコンポーネントに置き換えながら、Propsによるデータの受け渡し方など順番に\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eアイランド・アーキテクチャ:\u003c\/strong\u003e Zero JSが基本のAstro。重いJavaScriptを排除し、必要な部分だけでJavaScriptを動かす方法\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eNano Storesによる状態管理:\u003c\/strong\u003e HTMLの海の中で離れ小島になったReactコンポーネント同士のデータを連携させる魔法\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eContent Layer \u0026amp; MDX:\u003c\/strong\u003e CMSをわざわざ導入せず、型安全かつ直感的に記事を書けるMDXを使ったコンテンツの管理\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eData Loaders \u0026amp; SSR:\u003c\/strong\u003e 静的なコンテンツ配信における外部APIからのデータ取得や、サーバ側でHTMLを生成するSSRの実装手法\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eCloudflareへのデプロイ:\u003c\/strong\u003e Astroとの連携が強化されたCloudflareを使って、サイトを全世界のエッジネットワークへ配信する方法\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003e従来のサーバへのデプロイ\u003c\/strong\u003e: Astroが持つ静的サイトジェネレータとしての機能を使った従来のホスティング環境で配信する方法\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cp\u003e \u003c\/p\u003e\n\u003ch3\u003e\u003cstrong\u003e実務で役立つ豪華特典付き\u003c\/strong\u003e\u003c\/h3\u003e\n\u003col\u003e\n\u003cli\u003e\n\u003cstrong\u003eガイドライン組み込み済スターターキット:\u003c\/strong\u003e 講座で利用するAstroのスターターキットには、最新仕様に最適化されたガイドラインを同梱\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003e非公開Claude Codeスキル:\u003c\/strong\u003e Astroのコードを評価し、好みのレベルで最適化するスキル「astro-doctor」、サイトやページのモックアップ作りやレイアウトパターン出しを、質問に答えるだけでAIエージェントが自律的におこなう「create-mockup」「create-multi-mockup」スキル（Astro\/HTML\/React対応）を本講座で先行配布\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003e公開中のスキルも最新版に:\u003c\/strong\u003e 話題の「DESIGN.md」を生成するスキルやそのプレビュー（HTML\/Astro対応）するスキル、作例でも利用しているTailwind CSS v4対応のタイプスケール生成スキル、クラスをチェック＆改善できるスキル、FigmaとTailwindの間で変数やテーマをやりとりするスキルなど、実務で役立つスキルはまとめて提供\u003c\/li\u003e\n\u003c\/ol\u003e\n\u003cp\u003e\u003c!-- notionvc: 94ee7d1e-f8ad-4a95-9ce5-20972936a57b --\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cb data-path-to-node=\"12\" data-index-in-node=\"0\"\u003e\u003c!-- notionvc: 27f43ca8-3b9e-4595-8abe-eaa20e4afa7a --\u003e\u003c\/b\u003e\u003c\/p\u003e\n\u003cp data-path-to-node=\"11\"\u003e---\u003c\/p\u003e\n\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cstrong\u003e動画本数: 50本超（予定）\u003cbr\u003e総時間: ---\u003c\/strong\u003e\u003cspan\u003e\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e公式LINEアカウントの新規友だち登録で10%割引のクーポンコード発行中。\u003cbr\u003e\u003c\/strong\u003e購入前の事前登録がお得です。\u003c\/p\u003e\n\u003cp\u003e\u003ca title=\"LINE公式アカウントに友だち登録する\" href=\"https:\/\/lin.ee\/EOgmkKQ\"\u003ehttps:\/\/lin.ee\/EOgmkKQ\u003c\/a\u003e\u003c\/p\u003e\n\u003cp\u003e---\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e収録予定の内容は以下（2026年6月13日現在）\u003c\/strong\u003e\u003c\/p\u003e\n\u003ch3\u003e第1章：Astro をセットアップする\u003c\/h3\u003e\n\u003cp\u003e〜モダンな開発環境とベースデザインの構築〜\u003c\/p\u003e\n\u003col\u003e\n\u003cli\u003eAstro とは？\u003c\/li\u003e\n\u003cli\u003e環境準備とプロジェクト作成\u003c\/li\u003e\n\u003cli\u003e公式拡張機能とAIガイドライン\u003c\/li\u003e\n\u003cli\u003eインテグレーションの追加\u003c\/li\u003e\n\u003cli\u003eディレクトリ構成の確認と編集\u003c\/li\u003e\n\u003cli\u003eCSSをコピーしてデザインを適用\u003c\/li\u003e\n\u003c\/ol\u003e\n\u003ch3\u003e第2章：コンポーネントとレイアウト\u003c\/h3\u003e\n\u003cp\u003e〜重複をなくし、保守性の高いUIを作る〜\u003c\/p\u003e\n\u003col\u003e\n\u003cli\u003eベタ書きHTMLの課題\u003c\/li\u003e\n\u003cli\u003eコンポーネント化とパスエイリアス\u003c\/li\u003e\n\u003cli\u003eスロットによる共通レイアウト\u003c\/li\u003e\n\u003cli\u003eカードのコンポーネント化と Props\u003c\/li\u003e\n\u003cli\u003eAstro標準 \u003ccode\u003e\u0026lt;Image\/\u0026gt;\u003c\/code\u003e コンポーネント\u003c\/li\u003e\n\u003cli\u003eコンポーネントとリストレンダリング\u003c\/li\u003e\n\u003c\/ol\u003e\n\u003ch3\u003e第3章：アイランド・アーキテクチャ\u003c\/h3\u003e\n\u003cp\u003e〜必要な部分だけを動かす、Astro最大の魔法〜\u003c\/p\u003e\n\u003col\u003e\n\u003cli\u003eZero JS の原則とAstroの特徴\u003c\/li\u003e\n\u003cli\u003eReactコンポーネントの配置\u003c\/li\u003e\n\u003cli\u003e\n\u003ccode\u003eclient:load\u003c\/code\u003e による水分補給\u003c\/li\u003e\n\u003cli\u003eサーバーとクライアントの境界線\u003c\/li\u003e\n\u003cli\u003eパフォーマンス最適化〜\u003ccode\u003eclient:visible\u003c\/code\u003e\n\u003c\/li\u003e\n\u003cli\u003e複数Islandsの独立性と安全性\u003c\/li\u003e\n\u003c\/ol\u003e\n\u003ch3\u003e第4章：ルーティングの基本\u003c\/h3\u003e\n\u003cp\u003e〜ファイルベースで作る、直感的なサイト構造〜\u003c\/p\u003e\n\u003col\u003e\n\u003cli\u003eファイルベースルーティングの基本\u003c\/li\u003e\n\u003cli\u003e動的ルート \u003ccode\u003e[slug].astro\u003c\/code\u003e の役割\u003c\/li\u003e\n\u003cli\u003e\n\u003ccode\u003egetStaticPaths\u003c\/code\u003e による静的ページの生成\u003c\/li\u003e\n\u003cli\u003ePropsの受け渡しと動的レンダリング\u003c\/li\u003e\n\u003cli\u003e\n\u003ccode\u003eAstro.props\u003c\/code\u003e を使ったタイトルの指定\u003c\/li\u003e\n\u003cli\u003e404ページの作成と存在しないルートの処理\u003c\/li\u003e\n\u003c\/ol\u003e\n\u003ch3\u003e第5章：状態管理とUI連携\u003c\/h3\u003e\n\u003cp\u003e〜Islands間の壁を越えてデータを共有する〜\u003c\/p\u003e\n\u003col\u003e\n\u003cli\u003eコンポーネント間の孤独\u003c\/li\u003e\n\u003cli\u003eNano Stores の導入\u003c\/li\u003e\n\u003cli\u003eStoreの作成〜状態の中央管理\u003c\/li\u003e\n\u003cli\u003e状態の書き込み\u003c\/li\u003e\n\u003cli\u003e状態の購読と表示\u003c\/li\u003e\n\u003cli\u003eLocalStorageでの永続化\u003c\/li\u003e\n\u003c\/ol\u003e\n\u003ch3\u003e第6章：コンテンツ管理１\u003c\/h3\u003e\n\u003cp\u003e〜データを型安全に分離し、運用しやすい構造を作る〜\u003c\/p\u003e\n\u003col\u003e\n\u003cli\u003eハードコードからの脱却〜Content Collections\u003c\/li\u003e\n\u003cli\u003eMDXファイルの作成\u003c\/li\u003e\n\u003cli\u003eZod によるスキーマ定義\u003c\/li\u003e\n\u003cli\u003e\n\u003ccode\u003egetCollection\u003c\/code\u003e による一覧ページ\u003c\/li\u003e\n\u003cli\u003e詳細ページの動的生成と本文のレンダリング\u003c\/li\u003e\n\u003cli\u003eMDXの真骨頂〜Markdownとコンポーネント\u003c\/li\u003e\n\u003c\/ol\u003e\n\u003ch3\u003e第7章：コンテンツ管理２\u003c\/h3\u003e\n\u003cp\u003e〜あらゆるデータソースを型安全に統合する〜\u003c\/p\u003e\n\u003col\u003e\n\u003cli\u003e外部データの課題と Data Loaders\u003c\/li\u003e\n\u003cli\u003eLoaderの定義とZodスキーマ設定\u003c\/li\u003e\n\u003cli\u003eコンポーネントでの外部データ呼び出し\u003c\/li\u003e\n\u003cli\u003eSSGからSSRへの移行\u003c\/li\u003e\n\u003cli\u003e疑似リアルタイム在庫の実装\u003c\/li\u003e\n\u003cli\u003e実務でのSSRの注意点〜ホスティングの制約\u003c\/li\u003e\n\u003c\/ol\u003e\n\u003ch3\u003e第8章：仕上げと公開、そしてAI\u003c\/h3\u003e\n\u003cp\u003e〜新時代のユニファイド・プラットフォームへ〜\u003c\/p\u003e\n\u003col\u003e\n\u003cli\u003eUXを高めるページ遷移アニメーション\u003c\/li\u003e\n\u003cli\u003eSEO設定とサイトマップの自動生成\u003c\/li\u003e\n\u003cli\u003eCloudflareのアカウント作成と環境準備\u003c\/li\u003e\n\u003cli\u003eCloudflareアダプターの追加\u003c\/li\u003e\n\u003cli\u003e全世界へ公開する〜デプロイの実行\u003c\/li\u003e\n\u003cli\u003eオリジナル「AIスキル」と総まとめ\u003c\/li\u003e\n\u003c\/ol\u003e\n\u003ch3\u003e【付録】普通のレンタルサーバーでの公開（SSG）\u003c\/h3\u003e\n\u003cp\u003e〜Cloudflareが使えない現場のための公開ガイド〜\u003c\/p\u003e\n\u003col\u003e\n\u003cli\u003e静的サイトしか動かない？\u003c\/li\u003e\n\u003cli\u003e設定ファイルのスイッチを切り替える\u003c\/li\u003e\n\u003cli\u003e問い合わせフォームなどの機能はどうするか？\u003c\/li\u003e\n\u003cli\u003e公開ファイルのビルドとアップロード\u003c\/li\u003e\n\u003c\/ol\u003e\n\u003cp\u003e\u003c!-- notionvc: e70ad2e2-bf46-40d7-bdc1-e7d25beee6ae --\u003e\u003c\/p\u003e\n\u003cp\u003e---\u003c\/p\u003e\n\u003cp\u003e\u003c!-- notionvc: 1639eef3-c7de-479e-ba78-17c6a05d4e11 --\u003e\u003c\/p\u003e","brand":"komori.video","offers":[{"title":"Default Title","offer_id":49836673270000,"sku":null,"price":5500.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0755\/5907\/6080\/files\/dev_astro6_header.svg?v=1781302565","url":"https:\/\/kmrvid.com\/products\/astro-v6-pragmatic-guide","provider":"komori.video","version":"1.0","type":"link"}