インテグレーションを追加する

Astroインテグレーションにより、わずか数行のコードでプロジェクトに新しい機能や挙動を追加できます。自分でカスタムインテグレーションを書いたり、公式のインテグレーションを利用したり、コミュニティによって作られたインテグレーションを利用できます。

インテグレーションにより…

React、Vue、Svelte、Solidなどの一般的なUIフレームワークを使用できます。
TailwindやPartytownのようなツールを数行のコードで組み込めます。
サイトマップの自動生成など、プロジェクトに新機能を追加できます。
ビルドプロセスや開発サーバーなどにフックするカスタムコードを書けます。

公式インテグレーション

UIフレームワーク

SSRアダプター

その他

インテグレーションの自動セットアップ

Astroには、公式インテグレーションのセットアップを自動化するためのastro addコマンドが含まれています。一部のコミュニティプラグインもこのコマンドを使用して追加できます。astro addがサポートされているかどうか、あるいは手動でインストールする必要があるかどうかは、各インテグレーションのドキュメントを確認してください。

好みのパッケージマネージャーを使用してastro addコマンドを実行すると、インテグレーション用の自動ウィザードが設定ファイルの更新と必要な依存関係のインストールを行います。

npx astro add react

pnpm astro add react

yarn astro add react

複数のインテグレーションを同時に追加することも可能です。

npx astro add react tailwind partytown

pnpm astro add react tailwind partytown

yarn astro add react tailwind partytown

手動インストール

Astroインテグレーションは、常にastro.config.mjsファイルのintegrationsプロパティを通じて追加します。

Astroプロジェクトにインテグレーションをインポートするには、3つの主要な方法があります。

npmパッケージのインテグレーションをインストールする。
プロジェクト内のローカルファイルから独自のインテグレーションをインポートする。

インテグレーションを設定ファイルに直接インラインで記述する。

import { defineConfig } from 'astro/config';
import installedIntegration from '@astrojs/vue';
import localIntegration from './my-integration.js';

export default defineConfig({
  integrations: [
    // 1. インストール済みのnpmパッケージからインポート
    installedIntegration(),
    // 2. ローカルのJSファイルからインポート
    localIntegration(),
    // 3. インラインオブジェクト
    {name: 'namespace:id', hooks: { /* ... */ }},
  ]
});

インテグレーションAPIのリファレンスで、インテグレーションを書くための様々な方法について参照してください。

npmパッケージのインストール

パッケージマネージャーを使用してnpmパッケージのインテグレーションをインストールし、astro.config.mjsを手動で更新します。

たとえば、@astrojs/sitemapインテグレーションをインストールするには以下のようにします。

好みのパッケージマネージャーを使用してプロジェクトの依存関係にインテグレーションをインストールします。
- npm
- pnpm
- Yarn
ターミナルウィンドウ
npm install @astrojs/sitemap
ターミナルウィンドウ
pnpm add @astrojs/sitemap
ターミナルウィンドウ
yarn add @astrojs/sitemap
astro.config.mjsにインテグレーションをインポートし、設定オプションとともにintegrations[]配列に追加します。
astro.config.mjs
```
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';

export default defineConfig({
  // ...
  integrations: [sitemap()],
  // ...
});
```
インテグレーションごとに設定方法は異なる可能性があるため、各インテグレーションのドキュメントを読み、使用するインテグレーションの設定オプションを必要に応じてastro.config.mjsで適用してください。

カスタムオプション

インテグレーションは、ほとんどの場合は実際のインテグレーションオブジェクトを返すファクトリ関数として定義されます。これにより、ファクトリ関数に引数やオプションを渡して、プロジェクト用にインテグレーションをカスタマイズできます。

integrations: [
  // 関数の引数によりインテグレーションをカスタマイズする例
  sitemap({filter: true})
]

インテグレーションの切り替え

Falsyなインテグレーションは無視されるため、undefinedや真偽値が設定されてしまうことを気にすることなく、インテグレーションのオンとオフを切り替えられます。

integrations: [
  // サイトマップのビルドをWindowsではスキップする例
  process.platform !== 'win32' && sitemap()
]

インテグレーションをアップグレードする

公式インテグレーションを一括でアップグレードするには、@astrojs/upgradeコマンドを実行します。これにより、Astroとすべての公式インテグレーションが最新バージョンにアップグレードされます。

自動アップグレード

# Astroと公式インテグレーションを一括で最新にアップグレードする
npx @astrojs/upgrade

# Astroと公式インテグレーションを一括で最新にアップグレードする
pnpm dlx @astrojs/upgrade

# Astroと公式インテグレーションを一括で最新にアップグレードする
yarn dlx @astrojs/upgrade

手動アップグレード

1つ以上のインテグレーションを手動アップグレードするには、パッケージマネージャーの適切なコマンドを使用します。

# ReactとTailwindのインテグレーションをアップグレードする例
npm install @astrojs/react@latest @astrojs/tailwind@latest

# ReactとTailwindのインテグレーションをアップグレードする例
pnpm add @astrojs/react@latest @astrojs/tailwind@latest

# ReactとTailwindのインテグレーションをアップグレードする例
yarn add @astrojs/react@latest @astrojs/tailwind@latest

インテグレーションを削除する

インテグレーションを削除するには、まずプロジェクトからインテグレーションをアンインストールします。

npm uninstall @astrojs/react

pnpm remove @astrojs/react

yarn remove @astrojs/react

続いて、astro.config.*ファイルからインテグレーションを削除します。

import { defineConfig } from 'astro/config';

import react from '@astrojs/react';

export default defineConfig({
  integrations: [
    react()
  ]
});

他のインテグレーションを見つける

Astroインテグレーションのリストには、コミュニティによって開発された多くのインテグレーションが掲載されています。詳細な使い方や設定方法については、上のリンクをたどってみてください。

独自のインテグレーションを作成する

AstroのインテグレーションAPIはRollupとViteに影響を受けており、RollupやViteのプラグインを書いたことがある人なら誰でも親しみやすいように設計されています。

インテグレーションAPIリファレンスを確認し、インテグレーションができること、自分で作成する方法について学んでみてください。

貢献する

コミュニティ

インテグレーションを追加する

公式インテグレーション

UIフレームワーク

@astrojs/alpinejs

@astrojs/preact

@astrojs/react

@astrojs/solid⁠-⁠js

@astrojs/svelte

@astrojs/vue

SSRアダプター

@astrojs/cloudflare

@astrojs/netlify

@astrojs/node

@astrojs/vercel

その他

@astrojs/db

@astrojs/markdoc

@astrojs/mdx

@astrojs/partytown

@astrojs/sitemap

@astrojs/tailwind