Directus(cms) + Astroのサンプルプロジェクトを要約してもらった

DirectusサンプルAstroプロジェクト詳細分析

このプロジェクトの構造と仕組みについて、体系的に説明します。

🔄 Directusからのコンテンツ取得システム

1. 基本接続設定

レート制限対応（Queue システム）とリトライ機能を内蔵

2. データ取得関数 fetchers.tsに主要な取得関数:

3. 型安全性

TypeScriptによる完全な型チェック

🧩 コンポーネント構造と役割分担

blocks/: ブロック型コンテンツコンポーネント（React）

layout/: ページ構造コンポーネント（React）

PageBuilder.tsx: ブロックベースのページ組み立て

BlogPostClient.tsx: ブログ記事レイアウト

NavigationBar.tsx, Footer.tsx: 共通要素

ui/: 再利用可能なUIコンポーネント（React）

shadcn/uiベースの基本コンポーネント

Container.tsx, Headline.tsx, Button.tsx など

shared/: 共有コンポーネント

DirectusImage.tsx: Directus画像の最適化表示

🏗️ ページ構築システム

ブロックベースアーキテクチャ:

DirectusでページにブロックをM2M関連で追加

BaseBlock.tsxが動的にコンポーネントを選択

PageBuilder.tsxがブロックを順番に描画

対応ブロックタイプ:

block_hero: ヒーローセクション

block_gallery: 画像ギャラリー

block_posts: ブログ投稿一覧

block_form: フォーム

block_richtext: リッチテキスト

block_pricing: 料金表

⚡ Astro-React統合パターン

Astro側（.astroファイル）:

サーバーサイドでDirectusからデータ取得

SEOメタデータ生成

静的サイト生成（SSG）設定

React側（.tsxファイル）:

client:loadでハイドレーション

インタラクティブな機能（検索、フォーム送信など）

統合例:

設定:

astro.config.tsでReact統合を有効化

Directus画像の最適化設定

📝 実際のWebサイト作成時の編集ポイント

1. 必須設定ファイル

.env: Directus接続設定

2. スタイリングカスタマイズ

styles/global.css: グローバルCSS

tailwind.config.ts: TailwindCSS設定

components/ui/: UIコンポーネントのスタイル

3. 新しいブロックタイプ追加

Directusで新しいcollectionを作成

components/blocks/YourBlock.tsx 作成

BaseBlock.tsxにマッピング追加

directus-schema.tsに型追加

4. レイアウト変更

layouts/BaseLayout.astro: 全体レイアウト

components/layout/NavigationBar.tsx: ナビゲーション

components/layout/Footer.tsx: フッター

5. SEO・メタデータ

Directusのseoフィールドで管理

pages/の各ファイルでmetadataオブジェクト設定

6. フォーム機能

components/forms/: フォーム関連コンポーネント

lib/directus/forms.ts: フォーム送信処理

主な編集ワークフロー:

Directusでコンテンツ構造設計

必要に応じて新しいブロックコンポーネント作成

スタイリング調整

環境変数設定

デプロイ設定（Vercel対応済み）

このアーキテクチャにより、開発者はコードに集中し、コンテンツ編集者はDirectusの管理画面で直感的にサイトを構築できる仕組みになっています。