astro

Astro 使用ガイド

コード例と最新の API については、必ず docs.astro.build を参照してください。

Astro は、コンテンツ主導のウェブサイト向けフレームワークです。

---

クイックリファレンス

ファイルの場所

CLI は ./ 内の astro.config.js、astro.config.mjs、astro.config.cjs、astro.config.ts を探します。カスタムパスには --config を使用してください。

CLI コマンド

• npx astro dev - 開発サーバーを起動します。
• npx astro build - プロジェクトをビルドし、ディスクに書き込みます。
• npx astro check - プロジェクトにエラーがないか確認します。
• npx astro add - インテグレーションを追加します。
• npx astro sync - すべての Astro モジュールの TypeScript 型を生成します。

プラグインを追加または変更した後は、再実行してください。

プロジェクト構成

プロジェクト構成のドキュメントを参照してください。

• src/* - プロジェクトのソースコード（コンポーネント、ページ、スタイル、画像など）
• src/pages - 必須。 すべてのページとルートを定義します。
• src/components - コンポーネント（慣例であり、必須ではありません）。
• src/layouts - レイアウトコンポーネント（慣例であり、必須ではありません）。
• src/styles - CSS/Sass ファイル（慣例であり、必須ではありません）。
• public/* - コード以外の未処理アセット（フォント、アイコンなど）。そのままビルド出力にコピーされます。
• package.json - プロジェクトのマニフェスト。
• astro.config.{js,mjs,cjs,ts} - Astro の設定ファイル。（推奨）
• tsconfig.json - TypeScript の設定ファイル。（推奨）

---

主な設定オプション

オプション	説明
site	デプロイ後の URL です。サイトマップと正規 URL の生成に使用されます。

astro.config.ts の例

import { defineConfig } from 'astro/config';

export default defineConfig({
  site: 'https://example.com',
});

---

一般的なワークフロー

基本的なページの作成

src/pages/ にファイルを追加します。ファイル名がルートになります。

---
// src/pages/index.astro
const title = 'Hello, Astro!';
---
<html>
  <head><title>{title}</title></head>
  <body>
    <h1>{title}</h1>
  </body>
</html>

コンポーネントの作成

---
// src/components/Card.astro
const { title, body } = Astro.props;
---
<div class="card">
  <h2>{title}</h2>
  <p>{body}</p>
</div>

アダプターを使用したデプロイ

1. アダプターを追加します：npx astro add vercel --yes（または node、cloudflare、netlify）
2. ビルド前に npx astro check を実行し、型と設定のエラーを検出します。
3. npx astro build を実行して、デプロイ用アーティファクトを生成します。
4. 続行する前に、ビルド出力ディレクトリ（例：dist/）が存在し、空でないことを確認します。
5. アダプターのドキュメントに従って出力をデプロイします。

---

アダプター

ビルドアダプターを使用して、お好みのサーバー、サーバーレス環境、またはエッジホストにデプロイできます。アダプターを使用すると、Astro プロジェクトでオンデマンドレンダリングを有効にできます。

astro add を使用して Node.js アダプターを追加します：

npx astro add node --yes

astro add を使用して Cloudflare アダプターを追加します：

npx astro add cloudflare --yes

astro add を使用して Netlify アダプターを追加します：

npx astro add netlify --yes

astro add を使用して Vercel アダプターを追加します：

npx astro add vercel --yes

その他のコミュニティ製アダプター

リソース

• ドキュメント
• 設定リファレンス
• llms.txt
• GitHub