現代の Web 開発において、高速で軽量なフロントエンド環境の構築は重要な要素となっています。React ライクな UI ライブラリでありながら軽量性を重視した Preact と、次世代のビルドツールである Vite を組み合わせることで、開発効率と実行パフォーマンスの両方を向上させることができます。

本記事では、Vite と Preact を使った最短のプロジェクト作成手順を、公式プラグインの活用方法も含めて詳しく解説いたします。初心者の方でも迷わず進められるよう、段階的に説明していきますので、ぜひ最後までお読みください。

背景

Preact と Vite の組み合わせの利点

Preact と Vite の組み合わせは、現代の Web 開発において非常に魅力的な選択肢です。両者の利点を理解することで、なぜこの組み合わせが注目されているのかが分かります。

まず、開発体験の大幅な向上が挙げられます。Vite の高速な開発サーバーとホットモジュールリプレースメント（HMR）により、コードの変更が瞬時に反映されます。これにより、従来の webpack ベースの環境と比較して、開発中の待機時間を大幅に短縮できるでしょう。

パフォーマンス面でも優れた効果を発揮します。Preact の軽量性（約 3KB）と Vite の最適化されたバンドリングにより、最終的な成果物のサイズを小さく保てます。これは、特にモバイル環境でのユーザー体験向上に直結します。

mermaidCopy codeflowchart LR
    developer["開発者"] -->|コード変更| vite["Vite<br/>開発サーバー"]
    vite -->|瞬時反映| hmr["HMR<br/>ホットリロード"]
    hmr -->|即座に確認| browser["ブラウザ"]

    preact["Preact<br/>軽量ライブラリ"] -->|高速レンダリング| ui["UI コンポーネント"]
    ui -->|軽量バンドル| browser

    vite -->|最適化ビルド| bundle["軽量バンドル<br/>3KB + α"]
    bundle -->|高速ロード| production["本番環境"]

上図は、Vite と Preact による効率的な開発フローを示しています。開発時の高速性と本番環境での軽量性を両立できることが分かります。

また、TypeScript サポートも標準で提供されており、型安全な開発環境を簡単に構築できます。これにより、大規模なプロジェクトでも安心して開発を進められるでしょう。

React との違いと選択理由

Preact が React の代替として選ばれる理由は、その軽量性と互換性にあります。パフォーマンス重視のプロジェクトでは、この選択が大きなメリットをもたらします。

サイズ比較を見ると、その差は明確です。React + ReactDOM の組み合わせが約 45KB なのに対し、Preact は約 3KB という驚異的な軽量性を実現しています。これは、初期ロード時間の短縮に大きく貢献するでしょう。

項目	React + ReactDOM	Preact	差分
バンドルサイズ	約 45KB	約 3KB	93%軽量
API 互換性	100%	95%以上	高い互換性
パフォーマンス	標準	高速	レンダリング速度向上
学習コスト	-	低い	React 知識活用可能

API 互換性については、Preact は 95%以上の React API と互換性を持っています。これにより、既存の React の知識やライブラリの多くをそのまま活用できます。特に、関数コンポーネントや hooks については、ほぼ同じように使用できるため、移行コストを最小限に抑えられるでしょう。

パフォーマンス面では、Preact は軽量性だけでなく、レンダリング速度においても優位性を示します。DOM 更新の最適化により、特に頻繁な更新が発生するアプリケーションでその効果を実感できます。

ただし、一部の React 専用ライブラリについては、互換性レイヤーであるpreact​/​compatを使用する必要がある場合もあります。この点を理解した上で選択することが重要です。

課題

従来の開発環境構築の問題点

従来のフロントエンド開発環境の構築には、いくつかの課題がありました。これらの問題を理解することで、Vite と Preact の組み合わせがもたらす改善点がより明確になります。

最も大きな問題は、設定の複雑さでした。webpack を使った環境構築では、設定ファイルの記述が非常に複雑になることが多く、初心者にとって大きな障壁となっていました。ローダーやプラグインの設定、最適化オプションなど、理解すべき概念が多すぎたのです。

javascriptCopy code// 従来のwebpack設定例（一部抜粋）
module.exports = {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react'],
          },
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin(),
    // 他多数のプラグイン設定...
  ],
};

上記のような複雑な設定が必要で、プロジェクトごとに異なる調整が求められていました。

ビルド時間の長さも深刻な問題でした。開発サーバーの起動に数十秒、コード変更後の反映に数秒かかることは珍しくありませんでした。これにより、開発者の集中力が削がれ、生産性が大幅に低下していたのです。

さらに、依存関係の管理も複雑でした。babel、webpack、各種ローダーなど、多くのパッケージをプロジェクトごとに管理する必要があり、バージョン間の競合が頻繁に発生していました。

Preact 特有の設定課題

Preact を使用する際の特有の課題も存在していました。これらの課題を事前に理解しておくことで、適切な対策を講じることができます。

エイリアス設定の必要性が主な課題の一つでした。既存の React ライブラリを使用する際に、reactをpreact​/​compatにマッピングする設定が必要になることがあります。この設定を忘れると、ライブラリが正常に動作しない場合がありました。

javascriptCopy code// 従来必要だったエイリアス設定
resolve: {
  alias: {
    "react": "preact/compat",
    "react-dom": "preact/compat"
  }
}

JSX の設定についても、細かな調整が必要でした。Preact の JSX は React と若干異なるため、babel 設定や TypeScript 設定で適切な jsxFactory を指定する必要がありました。

typescriptCopy code// tsconfig.jsonでの設定例
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "preact"
  }
}

これらの設定ミスにより、ランタイムエラーや型エラーが発生することがあり、デバッグに時間を要することが多かったのです。

また、開発ツールの対応も課題でした。React DevTools を Preact で使用するには、追加の設定が必要で、開発体験が劣る場合がありました。

これらの課題があったため、多くの開発者が Preact の導入を躊躇していました。しかし、Vite の登場により、これらの問題の多くが解決されることになります。

解決策

Vite + Preact の導入メリット

Vite と Preact の組み合わせは、従来の課題を根本的に解決する強力なソリューションです。ここでは、具体的なメリットを詳しく解説いたします。

ゼロコンフィグでの開始が最大のメリットです。Vite は設定ファイルなしでも動作し、Preact プラグインを追加するだけで完全な開発環境が構築されます。複雑な webpack 設定は一切不要になりました。

javascriptCopy code// 最小限のvite.config.js
import { defineConfig } from 'vite';
import preact from '@preact/preset-vite';

export default defineConfig({
  plugins: [preact()],
});

この 3 行だけで、TypeScript、JSX、ホットリロードすべてが動作します。

劇的な高速化も実現されています。開発サーバーの起動は数秒、ホットリロードは瞬時に反映されます。これにより、開発者の待機時間が大幅に削減され、集中力を維持したまま開発を続けられるでしょう。

mermaidCopy codeflowchart TD
    start["プロジェクト開始"] -->|数秒| server["開発サーバー起動"]
    server -->|即座| hmr["HMR有効化"]

    code_change["コード変更"] -->|<100ms| update["画面更新"]
    update -->|継続| development["快適な開発"]

    build["ビルド実行"] -->|最適化| bundle["軽量バンドル生成"]
    bundle -->|高速| deploy["デプロイメント"]

上図は、Vite + Preact による高速な開発サイクルを示しています。各ステップでの時間短縮により、全体的な開発効率が向上します。

自動最適化機能により、本番ビルドでは自動的にコード分割、ツリーシェイキング、ミニファイが実行されます。開発者が手動で設定する必要はありません。

TypeScript 完全サポートも標準で提供されており、型チェック、インテリセンス、リファクタリング支援がすぐに利用できます。

公式プラグインの活用方法

@preact​/​preset-viteプラグインは、Preact と Vite の統合を完璧に行う公式プラグインです。このプラグインの活用により、手動設定の手間を大幅に削減できます。

プラグインが自動的に行う設定は多岐にわたります。JSX 設定の自動化では、Preact の JSX ファクトリーが自動設定され、手動で jsxImportSource を指定する必要がありません。

javascriptCopy code// プラグインが自動設定する内容
{
  esbuild: {
    jsxImportSource: 'preact',
    jsxInject: `import { Fragment } from 'preact'`
  }
}

エイリアス設定の自動化により、React 互換性のためのエイリアスが自動設定されます。これにより、既存の React ライブラリを追加設定なしで使用できるようになります。

javascriptCopy code// 自動設定されるエイリアス
{
  resolve: {
    alias: {
      "react": "preact/compat",
      "react-dom": "preact/compat"
    }
  }
}

開発ツール統合も自動化されており、Preact DevTools が開発モードで自動的に有効化されます。これにより、コンポーネントの状態やプロパティを簡単にデバッグできます。

プラグインのカスタマイズオプションも豊富に用意されています。

オプション	説明	デフォルト値
devtools	DevTools の有効/無効	true
devtoolsInProd	本番環境での DevTools	false
prefreshEnabled	Prefresh の有効/無効	true
babel	Babel 設定のカスタマイズ	{}

これらのオプションにより、プロジェクトの要件に応じた細かな調整が可能です。

具体例

プロジェクト作成の完全手順

実際に Vite と Preact を使ったプロジェクトを作成していきましょう。この手順に従うことで、確実に動作する開発環境を構築できます。

環境準備

まず、必要な環境を確認し、準備を行います。事前準備を怠ると、後の手順でエラーが発生する可能性があります。

Node.js のバージョン確認から始めましょう。Vite は Node.js 14.18+ または 16+ が必要です。現在のバージョンを確認してください。

bashCopy codenode --version
npm --version

バージョンが古い場合は、Node.js 公式サイトから最新版をダウンロードしてインストールしてください。

Yarn の確認も行います。このプロジェクトでは Yarn を使用しますので、インストールされていない場合は事前にインストールしてください。

bashCopy codeyarn --version

Yarn がインストールされていない場合は、以下のコマンドでインストールできます。

bashCopy codenpm install -g yarn

作業ディレクトリの準備を行います。プロジェクトを作成したいディレクトリに移動し、権限を確認してください。

Vite プロジェクトの初期化

Vite プロジェクトの初期化を行います。この手順により、基本的なプロジェクト構造が自動生成されます。

プロジェクトの作成を Vite のテンプレート機能を使って行います。

bashCopy codeyarn create vite my-preact-app --template preact

このコマンドにより、my-preact-appディレクトリが作成され、Preact 用の基本テンプレートが配置されます。

プロジェクトディレクトリへの移動を行います。

bashCopy codecd my-preact-app

依存関係のインストールを実行します。

bashCopy codeyarn install

この時点で、基本的な Preact プロジェクトの構造が完成しています。生成されたファイル構造を確認してみましょう。

cssCopy codemy-preact-app/
├── index.html
├── package.json
├── src/
│   ├── app.jsx
│   ├── index.css
│   └── main.jsx
└── vite.config.js

各ファイルの役割を理解することで、プロジェクトの全体像が把握できます。

Preact プラグインのインストール

Preact プラグインは既にテンプレートに含まれていますが、手動でインストールする場合の手順も解説いたします。

プラグインの確認をpackage.jsonで行います。

jsonCopy code{
  "devDependencies": {
    "@preact/preset-vite": "^2.5.0"
  }
}

設定ファイルの確認をvite.config.jsで行います。

javascriptCopy codeimport { defineConfig } from 'vite';
import preact from '@preact/preset-vite';

export default defineConfig({
  plugins: [preact()],
});

この設定により、Preact と Vite の統合が完了しています。

手動インストールの場合は、以下のコマンドを使用します。

bashCopy codeyarn add -D @preact/preset-vite

設定ファイルの調整

基本設定は完了していますが、プロジェクトの要件に応じて追加設定を行うことができます。

TypeScript サポートの追加を行う場合は、以下の設定を追加します。

bashCopy codeyarn add -D typescript @types/node

tsconfig.json の作成を行います。

jsonCopy code{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["DOM", "DOM.Iterable", "ES6"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "jsxImportSource": "preact"
  },
  "include": ["src"]
}

パフォーマンス最適化設定をvite.config.jsに追加できます。

javascriptCopy codeimport { defineConfig } from 'vite';
import preact from '@preact/preset-vite';

export default defineConfig({
  plugins: [preact()],
  build: {
    target: 'es2015',
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['preact'],
        },
      },
    },
  },
});

動作確認とテスト

設定が完了したら、動作確認を行います。この確認により、環境が正しく構築されているかを検証できます。

開発サーバーの起動を行います。

bashCopy codeyarn dev

サーバーが正常に起動すると、以下のようなメッセージが表示されます。

arduinoCopy code  VITE v4.4.5  ready in 324 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

ブラウザでの確認を行います。http:​/​​/​localhost:5173​/​にアクセスし、Preact のサンプルページが表示されることを確認してください。

ホットリロードのテストも重要です。src​/​app.jsxを編集し、変更が瞬時に反映されることを確認しましょう。

javascriptCopy code// src/app.jsx の一部を変更
export function App() {
  return (
    <>
      <h1>Hello Vite + Preact!</h1>
      <p>環境構築が正常に完了しました！</p>
    </>
  );
}

変更を保存すると、ブラウザが自動的に更新され、新しい内容が表示されます。

ビルドテストも実行しましょう。

bashCopy codeyarn build

ビルドが成功すると、distディレクトリに最適化されたファイルが生成されます。

bashCopy codeyarn preview

このコマンドで、ビルド結果をローカルでプレビューできます。

これで、Vite と Preact を使った完全な開発環境の構築が完了しました。高速な開発体験と軽量なバンドルサイズを両立した、理想的な環境が手に入ったのです。

まとめ

Vite と Preact の組み合わせは、現代の Web 開発における理想的なソリューションの一つです。従来の複雑な設定作業を大幅に簡素化し、開発者が本来集中すべきアプリケーション開発に専念できる環境を提供します。

導入の簡単さは特筆すべき点です。わずか数行のコマンドと最小限の設定ファイルで、TypeScript、JSX、ホットリロードを含む完全な開発環境が構築できます。これにより、プロジェクトの立ち上げ時間を大幅に短縮できるでしょう。

パフォーマンスの向上も見逃せません。開発時の高速性と本番環境での軽量性を両立し、開発者体験とエンドユーザー体験の両方を向上させます。特に、モバイルファーストが重要視される現在において、Preact の軽量性は大きなアドバンテージとなります。

将来性への配慮も重要な要素です。Vite と Preact は積極的に開発が続けられており、最新の Web 標準にも対応しています。長期的なプロジェクトでも安心して使用できる技術選択と言えるでしょう。

今回解説した手順を参考に、ぜひ Vite と Preact を組み合わせた開発環境を構築してみてください。高速で快適な開発体験を実感していただけるはずです。

関連リンク

• Vite 公式ドキュメント
• Preact 公式サイト
• @preact/preset-vite プラグイン
• Preact TypeScript 設定ガイド
• Vite プラグイン開発ガイド
• Node.js 公式サイト
• Yarn パッケージマネージャー