コンテンツにスキップ

@astrojs/ preact

v4.1.0 GitHub npm チェンジログ

このAstroインテグレーションは、Preactコンポーネントのレンダリングとクライアントサイドハイドレーションを有効にします。

なぜPreactなのか

Section titled “なぜPreactなのか”

Preactは、ウェブ用のインタラクティブなUIコンポーネントを構築できるライブラリです。JavaScriptを使用してサイトにインタラクティブな機能を構築したい場合、ブラウザAPIを直接使用する代わりに、コンポーネント形式を好むかもしれません。

Preactは、以前にReactを使用したことがある場合にも優れた選択肢です。PreactはReactと同じAPIを提供しますが、はるかに小さい3kBのパッケージです。compat設定オプション（下記参照）を使用して、多くのReactコンポーネントのレンダリングもサポートしています。

このインテグレーションを使用する前にPreactについてもっと知りたいですか 彼らのウェブサイトのインタラクティブなチュートリアルである「Preactを学ぶ」をチェックしてください。

インストール

Section titled “インストール”

Astroには、公式インテグレーションのセットアップを自動化するためのastro addコマンドが含まれています。もしよろしければ、手動でインテグレーションをインストールできます。

@astrojs/preactをインストールするには、プロジェクトディレクトリから次のコマンドを実行し、プロンプトに従ってください。

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

問題が発生した場合は、GitHubで報告してください。そして、以下の手動インストール手順を試してください。

手動インストール

Section titled “手動インストール”

まず、@astrojs/preactパッケージをインストールします。

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

ほとんどのパッケージマネージャーは、関連するピア依存関係もインストールします。Astroの起動時にCannot find package 'preact'（または同様の）警告が表示される場合は、Preactをインストールする必要があります。

ターミナルウィンドウ
npm install preact

次に、integrationsプロパティを使用して、インテグレーションをastro.config.*ファイルに適用します。

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


export default defineConfig({
  // ...
  integrations: [preact()],
});

そして、次のコードをtsconfig.jsonファイルに追加します。

tsconfig.json
{
  "extends": "astro/tsconfigs/strict",
  "include": [".astro/types.d.ts", "**/*"],
  "exclude": ["dist"],
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "preact"
  }
}

使い方

Section titled “使い方”

Astroで最初のPreactコンポーネントを使用するには、UIフレームワークのドキュメントにアクセスしてください。以下について探求します。

  • 📦 フレームワークコンポーネントがどのように読み込まれるか
  • 💧 クライアントサイドハイドレーションのオプション
  • 🤝 フレームワークを混在させてネストする機会

インテグレーションの詳細については、Astroインテグレーションのドキュメントも確認してください。

設定

Section titled “設定”

Astro Preactインテグレーションは、Preactコンポーネントのレンダリング方法を処理し、独自のオプションがあります。これらは、プロジェクトのインテグレーション設定が存在するastro.config.mjsファイルで変更します。

基本的な使用法では、Preactインテグレーションを設定する必要はありません。

compat

Section titled “compat”

preact/compatを有効にできます。これは、Reactのより大きなライブラリをユーザーのWebブラウザーにインストールまたは配布することなく、ReactコンポーネントをレンダリングするためのPreactの互換性レイヤーです。

そのためには、Preactインテグレーションにオブジェクトを渡し、compat: trueを設定します。

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


export default defineConfig({
  integrations: [preact({ compat: true })],
});

compatオプションを有効にすると、Preactインテグレーションはプロジェクト内のPreactコンポーネントだけでなくReactコンポーネントもレンダリングし、Preactコンポーネント内でReactコンポーネントをインポートできます。詳細については、Preactのウェブサイトの「Preactへの切り替え（Reactから）」を参照してください。

Reactコンポーネントライブラリをインポートする場合、reactおよびreact-domの依存関係をpreact/compatとしてスワップアウトするために、overridesを使用できます。

package.json
{
  "overrides": {
    "react": "npm:@preact/compat@latest",
    "react-dom": "npm:@preact/compat@latest"
  }
}

それぞれのオーバーライド機能については、pnpmオーバーライドおよびyarn解決のドキュメントを確認してください。

devtools

Section titled “devtools”

追加： @astrojs/preact@3.3.0

preact()インテグレーション設定にdevtools: trueを持つオブジェクトを渡すことで、開発中にPreact devtoolsを有効にできます。

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


export default defineConfig({
  // ...
  integrations: [preact({ devtools: true })],
});

オプション

Section titled “オプション”

複数のJSXフレームワークの組み合わせ

Section titled “複数のJSXフレームワークの組み合わせ”

同じプロジェクトで複数のJSXフレームワーク（React、Preact、Solid）を使用している場合、Astroは各コンポーネントにどのJSXフレームワーク固有の変換を使用するかを決定する必要があります。プロジェクトにJSXフレームワークインテグレーションを1つしか追加していない場合は、追加の設定は必要ありません。

include（必須）およびexclude（オプション）設定オプションを使用して、どのファイルがどのフレームワークに属するかを指定します。使用している各フレームワークのincludeにファイルおよび/またはフォルダの配列を指定します。ワイルドカードを使用して、複数のファイルパスを含めることができます。

インクルードの指定を容易にするために、共通のフレームワークコンポーネントを同じフォルダ（例えば、/components/react/および/components/solid/）に配置することをお勧めしますが、必須ではありません。

astro.config.mjs
import { defineConfig } from 'astro/config';
import preact from '@astrojs/preact';
import react from '@astrojs/react';
import svelte from '@astrojs/svelte';
import vue from '@astrojs/vue';
import solid from '@astrojs/solid-js';


export default defineConfig({
  // あらゆる種類のコンポーネントをサポートするために多くのフレームワークを有効にします。
  // 単一のJSXフレームワークのみを使用している場合は、`include`は必要ありません！
  integrations: [
    preact({
      include: ['**/preact/*'],
    }),
    react({
      include: ['**/react/*'],
    }),
    solid({
      include: ['**/solid/*'],
    }),
  ],
});

例

Section titled “例”
  • Astro Preactの例は、AstroプロジェクトでインタラクティブなPreactコンポーネントを使用する方法を示しています。
  • Astro Nanostoresの例は、Astroプロジェクトで異なるコンポーネント間、さらには異なるフレームワーク間で状態を共有する方法を示しています。

他のインテグレーション

UIフレームワーク

SSRアダプター

その他

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