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

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

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

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

公式インテグレーション

UIフレームワーク

SSRアダプター

その他

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

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つの主要な方法があります。

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

カスタムオプション

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

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

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

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

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

インテグレーションをアップグレードする

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

自動アップグレード

# Astroと公式インテグレーションを一括で最新にアップグレードする
npx @astrojs/upgrade

# Astroと公式インテグレーションを一括で最新にアップグレードする
pnpm dlx @astrojs/upgrade

# Astroと公式インテグレーションを一括で最新にアップグレードする
yarn dlx @astrojs/upgrade

手動アップグレード

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

# ReactとTailwindのインテグレーションをアップグレードする例
npm install @astrojs/react@latest @astrojs/tailwind@latest

# ReactとTailwindのインテグレーションをアップグレードする例
pnpm add @astrojs/react@latest @astrojs/tailwind@latest

# ReactとTailwindのインテグレーションをアップグレードする例
yarn add @astrojs/react@latest @astrojs/tailwind@latest

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

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

npm uninstall @astrojs/react

pnpm uninstall @astrojs/react

yarn remove @astrojs/react

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

import { defineConfig } from 'astro/config'

import react from "@astrojs/react";

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

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

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

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

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

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

GitHub Issueを作成

フィードバックを送信

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

公式インテグレーション

UIフレームワーク

@astrojs/alpinejs

@astrojs/lit

@astrojs/preact

@astrojs/react

@astrojs/solid⁠-⁠js

@astrojs/svelte

@astrojs/vue

SSRアダプター

@astrojs/cloudflare

@astrojs/netlify

@astrojs/node

@astrojs/vercel

その他

@astrojs/markdoc

@astrojs/mdx

@astrojs/partytown

@astrojs/prefetch

@astrojs/sitemap

@astrojs/tailwind