コンテンツにスキップ

インテグレーションの追加

Astroのインテグレーションにより、わずか数行のコードでプロジェクトに新たな機能や動作を追加できます。公式のインテグレーションだけでなく、コミュニティが作成したものを使用したり、独自にカスタムインテグレーションを作成することも可能です。

インテグレーションにより以下のようなことができます。

  • レンダラー (EN)により、React、Vue、Svelte、Solidなど人気のUIフレームワークを使用する。
  • SSRアダプターにより、オンデマンドレンダリングを有効にする。
  • MDXやPartytownなどのツールをわずか数行のコードで組み込む。
  • サイトマップの自動生成など、プロジェクトに新しい機能を追加する。
  • ビルドプロセスや開発サーバーなどにフックするカスタムコードを記述する。

公式インテグレーション

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

以下のインテグレーションはAstroによってメンテナンスされています。

UIフレームワーク

SSRアダプター

その他

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

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

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

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

ターミナルウィンドウ
npx astro add react

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

ターミナルウィンドウ
npx astro add react sitemap 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)リファレンスを確認してください。

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

Section titled “NPMパッケージのインストール”

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

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

  1. お好みのパッケージマネージャーを使用して、プロジェクトの依存関係にインテグレーションをインストールします。

    ターミナルウィンドウ
    npm install @astrojs/sitemap

  2. 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で適用してください。

カスタムオプション

Section titled “カスタムオプション”

インテグレーションは、ほぼ常にファクトリ関数として作成され、実際のインテグレーションオブジェクトを返します。これにより、ファクトリ関数に引数やオプションを渡して、プロジェクトに合わせたカスタマイズが可能です。

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

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

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

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

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

インテグレーションの更新

Section titled “インテグレーションの更新”

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

自動アップグレード

Section titled “自動アップグレード”
ターミナルウィンドウ
# Astroと公式インテグレーションを最新バージョンにアップグレード
npx @astrojs/upgrade

手動アップグレード

Section titled “手動アップグレード”

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

ターミナルウィンドウ
# 例: ReactとPartytownのインテグレーションをアップグレード
npm install @astrojs/react@latest @astrojs/partytown@latest

インテグレーションの削除

Section titled “インテグレーションの削除”

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

    ターミナルウィンドウ
    npm uninstall @astrojs/react

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

    astro.config.mjs
    import { defineConfig } from 'astro/config';
    

    import react from '@astrojs/react';
    

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

その他のインテグレーションを探す

Section titled “その他のインテグレーションを探す”

コミュニティによって開発された多くのインテグレーションをAstroインテグレーションディレクトリで見つけることができます。詳しい使い方や設定方法については、各リンク先を参照してください。

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

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

AstroのインテグレーションAPIはRollupやViteに影響を受けており、RollupやViteのプラグインを書いたことがある人にとって馴染みやすい設計になっています。

インテグレーションでできることやその作成方法については、インテグレーションAPI (EN)リファレンスを確認してください。

貢献する コミュニティ スポンサー