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

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

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

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

公式インテグレーション

Section titled 公式インテグレーション

UIフレームワーク

SSRアダプター

その他

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

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

Astroには、インテグレーションのセットアップを自動化するためのastro addコマンドが含まれています。

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

Terminal window
npx astro add react

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

Terminal window
npx astro add react tailwind partytown

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

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

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

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

  1. npmパッケージのインテグレーションをインストールする。
  2. プロジェクト内のローカルファイルから独自のインテグレーションをインポートする。
  3. インテグレーションを設定ファイルに直接インラインで記述する。
astro.config.mjs
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})
]

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

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

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

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

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

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

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

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

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

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

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