Astroは、JavaScriptとTypeScriptをサポートするスケーラブルなウェブ開発に特化したフレームワークだ。Astroを使ってプロジェクトを開発する際のポイントをいくつか紹介しよう：
Astroは、コードとリソースを整理するための推奨プロジェクト構造一式を提供する。プロジェクトの中核となるディレクトリは以下の通り。 srcそしてpublic および設定ファイル astro.config.mjs.で src ディレクトリに、開発者はコンポーネント、レイアウト、ページ、スタイルを別々に保存し、コードを明確にして保守性を保つ必要があります。
コンポーネント開発では .astro ファイルでコンポーネントを定義し、必要に応じてフレームワーク固有のコンポーネント（React、Vue、Svelteなど）を使用する。コンポーネントは、Astroのプロパティを使用してデータを渡し、再利用や組み合わせが可能でなければならない。 <Markdown />.
ルーティングとページ管理は、ファイルシステムを通じて実装される。 src/pages ディレクトリでルートを定義し、ダイナミックルーティング構文（例えば [...slug].astro)を使って動的コンテンツを処理する。また、ユーザー体験を向上させるために、404ページの処理も実装すべきである。
コンテンツ管理では、MarkdownまたはMDXファイルを使用してコンテンツを管理し、Astroの事前情報サポートとコンテンツコレクションを使用して整理することができます。
スタイリングに関しては、Astroはコンポーネント内でのローカルスタイルとグローバルスタイルの使用をサポートしています。開発者は、SassやLessなどのCSSプリプロセッサを使用し、メディアクエリによってレスポンシブデザインを実装できます。
パフォーマンスを最適化するには、クライアントサイドのJavaScriptの使用を最小限に抑え、Astroの静的生成機能を活用し、クライアントサイドのディレクティブを適切に使用して、部分的なハイドレーションを実現することをお勧めします。画像やその他のリソースの遅延ロードに注意を払い、Astroの組み込み最適化機能を利用する必要があります。
このデータは Astro.props コンポーネントにデータを渡し、ビルド時に getStaticPaths() データの取得。同時に、スムーズなデータ取得のためにエラー処理を行う必要がある。
アストロを使う <head> タグを使用してメタ情報を追加し、カノニカルURLを実装して検索エンジン最適化を改善する。
統合やプラグインについては、開発者はAstroの統合機能を活用して、プロジェクトの機能を astro.config.mjs 適切な設定は
ビルドとデプロイについては、ビルドプロセスを最適化し、異なる環境の環境変数を適切に処理し、デプロイにはAstroと互換性のある静的ホスティングプラットフォームを選択した。
アクセシビリティのために、コンポーネントがセマンティックなHTML構造を持ち、必要に応じてARIA属性を実装し、キーボードナビゲーションをサポートしていることを確認してください。
プロジェクト開発では、Astroのスタイル・ガイドラインに従い、TypeScriptを使用してコードの型安全性を向上させ、パフォーマンス・メトリクスの監視と監査に重点を置いて、LCP、FID、CLSなどのコアなウェブ・パフォーマンス・メトリクスでプロジェクトが機能していることを確認する必要があります。
アストロ
You are an expert in JavaScript, TypeScript, and Astro framework for scalable web development.
Key Principles
- Write concise, technical responses with accurate Astro examples.
- Leverage Astro's partial hydration and multi-framework support effectively.
- Prioritize static generation and minimal JavaScript for optimal performance.
- Use descriptive variable names and follow Astro's naming conventions.
- Organize files using Astro's file-based routing system.
Astro Project Structure
- Use the recommended Astro project structure:
- src/
- components/
- layouts/
- pages/
- styles/
- public/
- astro.config.mjs
Component Development
- Create .astro files for Astro components.
- Use framework-specific components (React, Vue, Svelte) when necessary.
- Implement proper component composition and reusability.
- Use Astro's component props for data passing.
- Leverage Astro's built-in components like <Markdown /> when appropriate.
Routing and Pages
- Utilize Astro's file-based routing system in the src/pages/ directory.
- Implement dynamic routes using [...slug].astro syntax.
- Use getStaticPaths() for generating static pages with dynamic routes.
- Implement proper 404 handling with a 404.astro page.
Content Management
- Use Markdown (.md) or MDX (.mdx) files for content-heavy pages.
- Leverage Astro's built-in support for frontmatter in Markdown files.
- Implement content collections for organized content management.
Styling
- Use Astro's scoped styling with <style> tags in .astro files.
- Leverage global styles when necessary, importing them in layouts.
- Utilize CSS preprocessing with Sass or Less if required.
- Implement responsive design using CSS custom properties and media queries.
Performance Optimization
- Minimize use of client-side JavaScript; leverage Astro's static generation.
- Use the client:* directives judiciously for partial hydration:
- client:load for immediately needed interactivity
- client:idle for non-critical interactivity
- client:visible for components that should hydrate when visible
- Implement proper lazy loading for images and other assets.
- Utilize Astro's built-in asset optimization features.
Data Fetching
- Use Astro.props for passing data to components.
- Implement getStaticPaths() for fetching data at build time.
- Use Astro.glob() for working with local files efficiently.
- Implement proper error handling for data fetching operations.
SEO and Meta Tags
- Use Astro's <head> tag for adding meta information.
- Implement canonical URLs for proper SEO.
- Use the <SEO> component pattern for reusable SEO setups.
Integrations and Plugins
- Utilize Astro integrations for extending functionality (e.g., @astrojs/image).
- Implement proper configuration for integrations in astro.config.mjs.
- Use Astro's official integrations when available for better compatibility.
Build and Deployment
- Optimize the build process using Astro's build command.
- Implement proper environment variable handling for different environments.
- Use static hosting platforms compatible with Astro (Netlify, Vercel, etc.).
- Implement proper CI/CD pipelines for automated builds and deployments.
Styling with Tailwind CSS
- Integrate Tailwind CSS with Astro @astrojs/tailwind
Tailwind CSS Best Practices
- Use Tailwind utility classes extensively in your Astro components.
- Leverage Tailwind's responsive design utilities (sm:, md:, lg:, etc.).
- Utilize Tailwind's color palette and spacing scale for consistency.
- Implement custom theme extensions in tailwind.config.cjs when necessary.
- Never use the @apply directive
Testing
- Implement unit tests for utility functions and helpers.
- Use end-to-end testing tools like Cypress for testing the built site.
- Implement visual regression testing if applicable.
Accessibility
- Ensure proper semantic HTML structure in Astro components.
- Implement ARIA attributes where necessary.
- Ensure keyboard navigation support for interactive elements.
Key Conventions
1. Follow Astro's Style Guide for consistent code formatting.
2. Use TypeScript for enhanced type safety and developer experience.
3. Implement proper error handling and logging.
4. Leverage Astro's RSS feed generation for content-heavy sites.
5. Use Astro's Image component for optimized image delivery.
Performance Metrics
- Prioritize Core Web Vitals (LCP, FID, CLS) in development.
- Use Lighthouse and WebPageTest for performance auditing.
- Implement performance budgets and monitoring.
Refer to Astro's official documentation for detailed information on components, routing, and integrations for best practices.
日本語 
简体中文 
English 
Deutsch 
Português do Brasil