はじめに

このガイドはPreact初心者向けの内容です。

ここではPreactアプリケーションを開発する主要な3つの方法を紹介します。

ビルドツールを使わない方法

Preactはビルドやツールなしでブラウザで直に使うためのパッケージを提供しています。

<script type="module">
  import { h, Component, render } from 'https://esm.sh/preact';

  // アプリケーションを作成する。
  const app = h('h1', null, 'Hello World!');

  render(app, document.body);
</script>

この方法で開発する欠点はJSX（ビルドが必要）が使えないことです。代わりに使用できるパフォーマンスの良い便利な方法を次に説明します。

JSXの代替

上の例のように、直にhやcreateElementの呼び出しを書くことは面倒かもしれません。 JSXはHTMLと見た目が似ているので多くの開発者にとって理解が容易であるという利点があります。 JSXはビルドステップを必要とします。ビルドステップなしで開発したい場合は、JSXの代わりにHTMを使うことをお勧めます。

HTMは標準的なJavaScriptで動作し、JSXに似た構文で記述します。 HTMはビルドステップの代わりにJavaScriptのTagged Templatesを使います。 Tagged TemplatesはES2015で追加され、すべてのモダンブラウザでサポートされています。 HTMは今までのフロントエンドのビルドツールよりシンプルで学習コストが低いのでPreactアプリケーションを開発する方法としてよく使われるようになってきています。

<script type="module">
  import { h, Component, render } from 'https://esm.sh/preact';
  import htm from 'https://esm.sh/htm';

  // htmをPreactで使う用意をする。
  const html = htm.bind(h);

  const app = html`<h1>Hello World!</h1>`;
  render(app, document.body);
</script>

HTMについて詳しく知りたい場合はHTMのドキュメントをチェックしてください。

既存のビルドシステムとの統合

既にビルドシステムを設定済みの場合、バンドラを使っている可能性が高いです。よく使われているバンドラはwebpack、 rollupもしくはparcelです。 Preactはそれらをすぐに使うことができます。変更は必要ありません。

JSXの設定

JSXをJavaScriptに変換するためにBabelプラグインを使用する必要があります。それには@babel/plugin-transform-react-jsxを使います。インストールが終わったら、JSXの変換後に使用する関数を設定します。

{
  "plugins": [
    ["@babel/plugin-transform-react-jsx", {
      "pragma": "h",
      "pragmaFrag": "Fragment",
    }]
  ]
}

Babelの素晴らしいドキュメントがこちらにあります。Babelに関する疑問や設定方法についてはこちらを確認することをお勧めします。

ReactをPreactにエイリアスする

Reactの広大なエコシステムを利用したいと思うことがあるでしょう。 React用に書かれたライブラリやコンポーネントも互換レイヤ(preact/compat)によりシームレスに動作します。これを利用するにはすべてのreactとreact-domのimportをPreactへ向ける必要があります。このことをエイリアスすると言います。

webpackでエイリアスする

webpackでエイリアスするには、設定にresolve.aliasセクションを追加する必要があります。既にこのセクションが存在する場合は、そこにPreact用の設定が必要です。

const config = { 
   //...
  "resolve": { 
    "alias": { 
      "react": "preact/compat",
      "react-dom/test-utils": "preact/test-utils",
      "react-dom": "preact/compat",
      // test-utilsの下にある必要があります。
    },
  }
}

Parcelでエイリアスする

Percelではpackage.jsonに以下のようなaliasキーを追加します。

{
  "alias": {
    "react": "preact/compat",
    "react-dom/test-utils": "preact/test-utils",
    "react-dom": "preact/compat"
  },
}

Rollupでエイリアスする

Rollupでエイリアスするには、@rollup/plugin-aliasをインストールする必要があります。このプラグインは@rollup/plugin-node-resolveの前に配置する必要があります。

import alias from '@rollup/plugin-alias';

module.exports = {
  plugins: [
    alias({
      entries: [
        { find: 'react', replacement: 'preact/compat' },
        { find: 'react-dom', replacement: 'preact/compat' }
      ]
    })
  ]
};

Jestでエイリアスする

Jestもバンドラと同様にモジュールのパスを書き換えることができます。シンタックスが正規表現に基づいているためwebpackとは少し違います。以下をJestの設定に加えてください。

{
  "moduleNameMapper": {
    "^react$": "preact/compat",
    "^react-dom/test-utils$": "preact/test-utils",
    "^react-dom$": "preact/compat"
  }
}

Snowpackでエイリアスする

Snowpackでエイリアスするには、以下のようにsnowpack.config.jsonファイルにエイリアスの設定を加えます。

// snowpack.config.json
{
  alias: {
    "react": "preact/compat",
    "react-dom": "preact/compat"
  }
}

preact/compatのTypeScriptの設定

あなたのプロジェクトはより広範囲のReactエコシステムを扱う必要があるかもしれません。アプリケーションをコンパイルできるようにするには、以下のようにnode_modulesの型チェックを無効にする必要があるでしょう。これによって、ライブラリがReactをimportした時、エイリアスが正常に動作します。

{
  ...
  "skipLibCheck": true
}