コンテンツにスキップ

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

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

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

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

公式インテグレーション

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

UIフレームワーク

SSRアダプター

その他

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

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

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

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

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

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

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

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とTailwindのインテグレーションをアップグレードする例
npm install @astrojs/react@latest @astrojs/tailwind@latest

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

Section titled “インテグレーションを削除する”

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

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

続いて、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)リファレンスを確認し、インテグレーションができること、自分で作成する方法について学んでみてください。

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