astro

Name: astro
Author: briantbr

github.com/briantbr開発272 回インストール34 週間前に更新

リポジトリ

astro について

コンテンツ中心のサイトを構築する開発者向けの Astro 5.x スキルガイドです。レンダリング方式、複数フレームワークのアイランド、一般的な制作パターンを扱います。

主な機能

01標準では JavaScript を出力しない設計
02クライアントディレクティブによるハイドレーション
03React、Vue、Svelte のサポート
04静的出力とサーバー出力
05コンテンツコレクションと画像最適化

活用シーン

01コンテンツ中心のサイト構築
02ページへの選択的なインタラクティブ機能の追加
03Markdown または MDX を使ったブログ作成
04サーバーでの動的ルートのレンダリング

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/briantbr/astro-best-practices-v6 --skill astro

インストール後、Claude Code で/astroを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

.gitignore

README.md

references/

environment-config.md

api-endpoints.md

middleware.md

content-collections.md

integrations.md

images.md

pagination.md

recipe-auth.md

recipe-blog.md

recipe-forms.md

recipe-dark-mode.md

recipe-i18n.md

ssr.md

recipe-seo.md

詳細

Astro フレームワーク

アイランドアーキテクチャを採用し、デフォルトでは JavaScript を使用せず、高速でコンテンツ重視のウェブサイトを構築するための Astro 5.x フレームワークです。

コア原則

1. デフォルトでは JavaScript を使用しない

クライアントディレクティブを明示的に追加しない限り、Astro は JavaScript を一切出力しません。


<Header />
<Footer />


<Counter client:idle />

ルール：コンポーネントでフック、状態、またはブラウザー API が必要な場合にのみ、クライアントディレクティブを使用します。

2. クライアントディレクティブ

ディレクティブ	使用するタイミング	動作
`client:load`	すぐに必要な重要なインタラクション	ページ読み込み時にハイドレーションします
`client:idle`	重要度の低いインタラクティブ機能	ブラウザーがアイドル状態のときにハイドレーションします
`client:visible`	ファーストビューより下のコンテンツ	スクロールして表示されたときにハイドレーションします
`client:media="(query)"`	レスポンシブコンポーネント	メディアクエリに一致したときにハイドレーションします
`client:only="framework"`	SSR 中に動作しない場合	SSR をスキップし、クライアントのみでレンダリングします

判断フロー：すぐにインタラクションが必要ですか？ → client:load | 重要度が低いですか？ → client:idle | ファーストビューより下ですか？ → client:visible | モバイル／デスクトップでのみ必要ですか？ → client:media | SSR で動作しませんか？ → client:only

3. 複数のフレームワークへの対応

同じプロジェクト内で React、Vue、Svelte を組み合わせられます：

npx astro add react vue svelte

---
import ReactForm from './Form.jsx';
import VueChart from './Chart.vue';
import SvelteCounter from './Counter.svelte';
---
<ReactForm client:idle />
<VueChart client:visible />
<SvelteCounter client:load />

クイックスタート

npm create astro@latest my-project
cd my-project
npx astro add tailwind react
npm run dev

プロジェクト構成

src/
├── components/       # .astro, .jsx, .vue, .svelte
├── layouts/          # Page layouts
├── pages/            # File-based routing
│   └── blog/[slug].astro
├── content/          # Content Collections (Markdown/MDX)
│   └── blog/         # Collection folders
├── styles/           # Global CSS
└── content.config.ts # Content collections schema (Astro 5+)

設定

// astro.config.mjs
import { defineConfig } from 'astro/config';
import tailwind from '@astrojs/tailwind';
import react from '@astrojs/react';

export default defineConfig({
  site: 'https://example.com',
  output: 'static',  // or 'server'
  integrations: [tailwind(), react()],
});

出力モード（Astro 5）：

static - ブログ、ドキュメント、マーケティングサイト（デフォルト）。SSR ページには export const prerender = false を使用します。
server - すべてのページを SSR でレンダリングします（アダプターが必要です）

Astro 5 の変更点：output: 'hybrid' は削除されました。ハイブリッドの動作は、static モードのデフォルトになりました。

ビュートランジション

クライアントルーターを使用して、SPA のようなナビゲーションを有効にします：

---
import { ClientRouter } from 'astro:transitions';
---
<html>
  <head>
    <ClientRouter />
  </head>
  <body><slot /></body>
</html>

注：Astro 5 では、ViewTransitions の名称が ClientRouter に変更されました。

コマンド

npm run dev              # Start dev server (localhost:4321)
npm run build            # Build for production
npm run preview          # Preview production build
npx astro check          # TypeScript checks