インテグレーションを使う

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

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

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

Astroには、インテグレーションのセットアップを自動化するための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つの主要な方法があります。

1. npmパッケージのインテグレーションをインストールする。
2. プロジェクト内のローカルファイルから独自のインテグレーションをインポートする。
3. インテグレーションを設定ファイルに直接インラインで記述する。

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 (EN)のリファレンスで、インテグレーションを書くための様々な方法について参照してください。

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

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

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

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

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

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

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