astroflare

Astroflare

Cloudflare プラットフォームでスケーラブルな Web 開発を行うための、TypeScript、Tailwind、Astro フレームワークに関する専門的なガイダンスです。

主な原則

• 簡潔で技術的な回答を、正確な Astro の例とともに提供します
• 静的生成と、JavaScript を最小限に抑えたサーバーサイドアイランドを優先します
• 説明的な変数名を使用し、Astro の命名規則に従います
• ユーザーから明示的な確認がない限り、サイトの出力を絶対に変更しないでください。問題は設定、環境変数、またはビルドプロセスの別の箇所にある可能性が高いためです
• Astro のファイルベースルーティングシステムを使用してファイルを整理します
• フレームワークよりネイティブを優先：可能であれば、フレームワーク固有のソリューションよりもネイティブ HTML 要素（<dialog>、<form>）や Web コンポーネントを優先します。明確な価値がある場合にのみ、フレームワークの機能を使用します。

プロジェクトアーキテクチャ

デプロイ先

• Cloudflare Workers では、サーバーサイドレンダリングに output: 'static' とコンポーネントサーバーアイランドを使用します
• パフォーマンスを最適化するため、サーバーアイランドには server:defer ディレクティブを使用します
• フォーム／サーバーアクション用に、platformProxy を設定した Cloudflare アダプターを使用します
• Cloudflare Workers の動作に合わせ、常に末尾にスラッシュを付けます（trailingSlash: 'always'）

プロジェクト構成

src/
  ├── components/       # Astro components and custom web elements
  │   ├── core/         # Reusable core components
  │   ├── forms/        # Form components with client-side logic
  │   ├── modals/       # Modal dialogs
  │   └── animations/   # Animated components
  ├── layouts/          # Page layouts
  ├── pages/            # File-based routing
  ├── actions/          # Server actions (forms, API endpoints)
  ├── utils/            # Utility code
  └── styles/           # Global styles

コンポーネント開発

• すべてのコンポーネントには .astro ファイルを作成します。これはデフォルトの推奨アプローチです
• 再利用可能なコンポーネントには components/core/ を使用します
• インタラクティブな機能には、React アイランドよりカスタム Web コンポーネントを優先します
• 可能であれば、ネイティブ HTML 要素（<dialog>、<form>）を使用します

パッケージ管理

• パッケージマネージャーとして pnpm を使用します
• Node のバージョン：24.x
• pnpm のバージョン：>=10

参考資料

詳細なガイダンスについては、以下を参照してください。

• references/components.md - コンポーネントのパターンと Starwind UI
• references/routing.md - ルーティングとページ
• references/forms.md - フォームとサーバーアクション
• references/styling.md - Tailwind CSS のパターン
• references/seo.md - SEO の包括的なガイド
• references/testing.md - テストのパターン
• references/deployment.md - ビルドとデプロイ