インテグレーションを使う
Astroインテグレーションにより、わずか数行のコードでプロジェクトに新しい機能や挙動を追加できます。自分でカスタムインテグレーションを書いたり、公式のインテグレーションを利用したり、コミュニティによって作られたインテグレーションを利用できます。
インテグレーションにより…
- React、Vue、Svelte、Solidなどの一般的なUIフレームワークを使用できます。
- TailwindやPartytownのようなツールを数行のコードで組み込めます。
- サイトマップの自動生成など、プロジェクトに新機能を追加できます。
- ビルドプロセスや開発サーバーなどにフックするカスタムコードを書けます。
公式インテグレーション
Section titled 公式インテグレーションUIフレームワーク
SSRアダプター
その他
インテグレーションの自動セットアップ
Section titled インテグレーションの自動セットアップ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
インテグレーションを使う
Section titled インテグレーションを使う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 (EN)のリファレンスで、インテグレーションを書くための様々な方法について参照してください。
カスタムオプション
Section titled カスタムオプションインテグレーションは、ほとんどの場合は実際のインテグレーションオブジェクトを返すファクトリ関数として定義されます。これにより、ファクトリ関数に引数やオプションを渡して、プロジェクト用にインテグレーションをカスタマイズできます。
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)リファレンスを確認し、インテグレーションができること、自分で作成する方法について学んでみてください。