Preact は軽量で高速な React 代替フレームワークとして、多くの開発者から注目を集めています。この記事では、全くの初心者でも安心して Preact 開発を始められるよう、環境構築からアプリケーションの本番デプロイまでを段階的に解説いたします。

最初の Preact プロジェクトを作ることで、モダンフロントエンド開発の魅力を実感していただけるでしょう。

背景

Preact の特徴と他のフレームワークとの比較

Preact は「Fast 3kB alternative to React」というキャッチフレーズの通り、React と同じ API を持ちながら非常に軽量なフレームワークです。

主要フレームワークのバンドルサイズを比較すると以下の通りです。

フレームワーク	バンドルサイズ	初期化速度	学習コスト
React	42.2kB	普通	高
Vue.js	34.4kB	速い	中
Preact	3.1kB	非常に速い	低
Angular	130kB+	遅い	高

Preact の最大の特徴は、React の既存知識をそのまま活用できる互換性の高さにあります。React から Preact への移行は非常にスムーズで、既存のコンポーネントやライブラリの多くがそのまま動作します。

mermaidCopy codeflowchart LR
  react[React知識] -->|そのまま適用| preact[Preact開発]
  preact -->|3kBの軽量性| fast[高速読み込み]
  preact -->|小さなバンドル| mobile[モバイル対応]
  preact -->|互換性| ecosystem[React エコシステム]

図で理解できる要点：

• React 知識がそのまま活用できる高い互換性
• 3kB という軽量性により高速読み込みを実現
• React エコシステムの豊富なライブラリが利用可能

軽量性とパフォーマンスの優位性

Preact の軽量性は単なる数値以上の価値を提供します。モバイルデバイスでの初期読み込み時間が大幅に改善され、ユーザー体験の向上に直結するのです。

特に注目すべき点は以下の通りです。

• バンドルサイズの削減: React 比で約 93%の削減を実現
• 初期化速度の向上: DOM 操作の最適化により高速レンダリング
• メモリ使用量の削減: 効率的なメモリ管理でデバイス負荷を軽減

実際のパフォーマンステストでは、同じ機能のアプリケーションでも初期読み込み時間が 40%以上短縮されることが確認されています。これにより、離脱率の低下とユーザーエンゲージメントの向上が期待できるでしょう。

課題

初心者が直面する Preact 開発の壁

Preact を始めようとする初心者の方々から、よく以下のような声をお聞きします。

セットアップの複雑さ 「どのツールを使えばいいの？」「設定ファイルが多すぎて何から始めればいいかわからない」といった環境構築の迷いが最初の大きな壁になっています。

情報の少なさ React に比べて Preact の日本語情報は限定的で、問題に直面した際の解決策を見つけるのに時間がかかってしまいます。

エコシステムの理解不足 どのライブラリが Preact で動作するのか、どんなツールチェーンが最適なのか判断に迷われる方が多くいらっしゃいます。

mermaidCopy codeflowchart TD
  beginner[初心者] -->|直面する| setup_wall[セットアップの壁]
  beginner -->|直面する| info_wall[情報不足の壁]
  beginner -->|直面する| ecosystem_wall[エコシステムの壁]

  setup_wall -->|解決策| step_guide[段階的ガイド]
  info_wall -->|解決策| practical[実践的な例]
  ecosystem_wall -->|解決策| tool_selection[ツール選定指針]

セットアップから本番環境への道のり

開発環境の構築ができても、本番環境へのデプロイまでの道のりは決して平坦ではありません。

開発とプロダクションの設定差異 開発環境では動作するコードが、本番環境でエラーになるケースがあります。バンドル設定やパフォーマンス最適化の違いが原因となることが多いです。

デプロイプラットフォームの選択 Vercel、Netlify、AWS、Heroku など多数の選択肢があり、それぞれメリット・デメリットが異なります。初心者の方には判断が困難な状況です。

パフォーマンス最適化の考慮 せっかく Preact の軽量性を選択しても、適切な最適化を行わなければその恩恵を十分に受けられません。

これらの課題を一つずつ解決していくことで、確実に Preact 開発をマスターしていただけます。

解決策

開発環境の構築

まずは開発環境を整えましょう。Preact 開発に必要な基本ツールをインストールします。

Node.js のインストール

Node.js 16 以上が推奨されています。公式サイトから LTS 版をダウンロードしてインストールしてください。

bashCopy code# Node.jsバージョン確認
node --version
# v18.17.0 以上が表示されれば OK

パッケージマネージャーの選択

この記事では Yarn を使用します。npm でも問題ありませんが、Yarn の方が依存関係の管理が安定しています。

bashCopy code# Yarnのインストール
npm install -g yarn

# バージョン確認
yarn --version

エディタの設定

Visual Studio Code を使用される場合は、以下の拡張機能をインストールしておくと開発効率が大幅に向上します。

• ES7+ React/Redux/React-Native snippets
• Prettier - Code formatter
• ESLint
• Auto Rename Tag

これらのツールにより、コード補完やフォーマット、エラー検出が自動化され、スムーズな開発体験が得られます。

プロジェクトの初期化

Preact プロジェクトを作成する最も簡単な方法は、公式の CLI ツールを使用することです。

Preact CLI のインストールと実行

bashCopy code# Preact CLIをグローバルインストール
yarn global add preact-cli

# 新しいプロジェクト作成
preact create default my-preact-app

作成されるプロジェクト構造は以下の通りです。

arduinoCopy codemy-preact-app/
├── src/
│   ├── components/
│   │   └── app.js
│   ├── routes/
│   │   ├── home/
│   │   └── profile/
│   ├── style/
│   └── index.js
├── preact.config.js
├── package.json
└── README.md

代替手段: Vite を使用したセットアップ

より現代的なビルドツールを使用したい場合は、Vite テンプレートを利用できます。

bashCopy code# Vite + Preactテンプレートを使用
yarn create vite my-preact-app --template preact

# プロジェクトディレクトリに移動
cd my-preact-app

# 依存関係のインストール
yarn install

どちらの方法でも、必要なツールチェーンが自動的に設定されるため、すぐに開発を開始できます。

基本的なコンポーネント開発

Preact でのコンポーネント開発は、React とほぼ同じ記法で行えます。関数コンポーネントと Hooks を使った現代的なスタイルで進めましょう。

最初のコンポーネント作成

src​/​components​/​ディレクトリに新しいコンポーネントを作成します。

javascriptCopy code// src/components/Welcome.js
import { h } from 'preact';
import { useState } from 'preact/hooks';

const Welcome = ({ name }) => {
  const [count, setCount] = useState(0);

  return (
    <div className='welcome'>
      <h2>こんにちは、{name}さん！</h2>
      <p>クリック回数: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        クリック
      </button>
    </div>
  );
};

export default Welcome;

スタイリングの追加

CSS Modules を使用してスタイルを適用します。

cssCopy code/* src/components/Welcome.module.css */
.welcome {
  padding: 20px;
  border-radius: 8px;
  background: linear-gradient(
    135deg,
    #667eea 0%,
    #764ba2 100%
  );
  color: white;
  text-align: center;
}

.welcome h2 {
  margin-top: 0;
  font-size: 1.8rem;
}

.welcome button {
  background: white;
  color: #667eea;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  transition: transform 0.2s;
}

.welcome button:hover {
  transform: translateY(-2px);
}

メインアプリケーションでの使用

作成したコンポーネントをメインアプリケーションで使用します。

javascriptCopy code// src/components/app.js
import { h } from 'preact';
import { Router } from 'preact/router';
import Header from './header';
import Welcome from './Welcome';

// ルートコンポーネント
const Home = () => (
  <div>
    <Welcome name='Preact開発者' />
  </div>
);

export default function App() {
  return (
    <div id='app'>
      <Header />
      <Router>
        <Home path='/' />
      </Router>
    </div>
  );
}

この段階で、ローカル開発サーバーを起動してコンポーネントの動作確認ができます。

ビルドとデプロイの準備

本番環境向けのビルド設定とデプロイ準備を行います。

ビルド設定の最適化

Preact CLI を使用している場合、デフォルトでビルド最適化が設定されています。追加の設定が必要な場合はpreact.config.jsを編集します。

javascriptCopy code// preact.config.js
export default (config, env, helpers) => {
  // プロダクションビルド時の最適化
  if (env.isProd) {
    // バンドルサイズの最小化
    config.optimization.splitChunks = {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    };
  }
};

環境変数の設定

本番環境とローカル環境で異なる設定を管理するため、環境変数を使用します。

bashCopy code# .env.local (ローカル開発用)
PREACT_APP_API_URL=http://localhost:3000/api

# .env.production (本番環境用)
PREACT_APP_API_URL=https://your-api-domain.com/api

パフォーマンス計測

ビルド結果のパフォーマンスを計測し、最適化の効果を確認します。

bashCopy code# プロダクションビルド実行
yarn build

# バンドルサイズの分析
yarn add --dev webpack-bundle-analyzer

これらの準備により、本番環境での高速な動作が保証されます。

具体例

プロジェクトセットアップの実践

実際に Todo アプリケーションを作成しながら、Preact の開発プロセスを学んでいきましょう。

プロジェクト作成から初期設定まで

bashCopy code# 新しいプロジェクト作成
preact create default todo-preact-app

# プロジェクトディレクトリに移動
cd todo-preact-app

# 開発サーバー起動
yarn dev

開発サーバーが起動すると、http:​/​​/​localhost:8080でアプリケーションにアクセスできます。ブラウザに「Hello World!」が表示されれば、セットアップは成功です。

依存関係の追加

Todo アプリに必要な追加ライブラリをインストールします。

bashCopy code# UUID生成ライブラリ
yarn add uuid

# 日付操作ライブラリ
yarn add date-fns

# 開発用の型定義
yarn add --dev @types/uuid

この段階で package.json に必要な依存関係が追加され、開発準備が整います。

Preact アプリケーション作成

Todo アプリケーションのコンポーネント UI を段階的に構築します。

Todo アイテムコンポーネント

まず、個別の Todo アイテムを表示するコンポーネントを作成します。

javascriptCopy code// src/components/TodoItem.js
import { h } from 'preact';
import { format } from 'date-fns';
import { ja } from 'date-fns/locale';

const TodoItem = ({ todo, onToggle, onDelete }) => {
  return (
    <div
      className={`todo-item ${
        todo.completed ? 'completed' : ''
      }`}
    >
      <input
        type='checkbox'
        checked={todo.completed}
        onChange={() => onToggle(todo.id)}
      />
      <span className='todo-text'>{todo.text}</span>
      <span className='todo-date'>
        {format(new Date(todo.createdAt), 'MM/dd HH:mm', {
          locale: ja,
        })}
      </span>
      <button
        className='delete-btn'
        onClick={() => onDelete(todo.id)}
      >
        削除
      </button>
    </div>
  );
};

export default TodoItem;

Todo リストコンポーネント

複数の Todo アイテムを管理するメインコンポーネントを作成します。

javascriptCopy code// src/components/TodoList.js
import { h } from 'preact';
import { useState } from 'preact/hooks';
import { v4 as uuidv4 } from 'uuid';
import TodoItem from './TodoItem';

const TodoList = () => {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');

  const addTodo = () => {
    if (inputValue.trim() !== '') {
      const newTodo = {
        id: uuidv4(),
        text: inputValue,
        completed: false,
        createdAt: new Date().toISOString(),
      };
      setTodos([...todos, newTodo]);
      setInputValue('');
    }
  };

  const toggleTodo = (id) => {
    setTodos(
      todos.map((todo) =>
        todo.id === id
          ? { ...todo, completed: !todo.completed }
          : todo
      )
    );
  };

  const deleteTodo = (id) => {
    setTodos(todos.filter((todo) => todo.id !== id));
  };

  return (
    <div className='todo-list'>
      <h1>Preact Todoアプリ</h1>

      <div className='add-todo'>
        <input
          type='text'
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          onKeyPress={(e) => e.key === 'Enter' && addTodo()}
          placeholder='新しいタスクを入力...'
        />
        <button onClick={addTodo}>追加</button>
      </div>

      <div className='todos'>
        {todos.map((todo) => (
          <TodoItem
            key={todo.id}
            todo={todo}
            onToggle={toggleTodo}
            onDelete={deleteTodo}
          />
        ))}
      </div>

      <div className='stats'>
        総数: {todos.length} | 完了:{' '}
        {todos.filter((t) => t.completed).length} | 未完了:{' '}
        {todos.filter((t) => !t.completed).length}
      </div>
    </div>
  );
};

export default TodoList;

スタイリングの追加

アプリケーションに美しいスタイルを適用します。

cssCopy code/* src/style/index.css */
.todo-list {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

.add-todo {
  display: flex;
  margin-bottom: 20px;
}

.add-todo input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
  font-size: 16px;
}

.add-todo button {
  padding: 10px 20px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

.todo-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee;
  gap: 10px;
}

.todo-item.completed .todo-text {
  text-decoration: line-through;
  opacity: 0.6;
}

.todo-text {
  flex: 1;
  font-size: 16px;
}

.todo-date {
  font-size: 12px;
  color: #888;
}

.delete-btn {
  background: #dc3545;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}

.stats {
  margin-top: 20px;
  text-align: center;
  color: #666;
  font-size: 14px;
}

このコードにより、実用的な Todo アプリケーションが完成します。

Vercel/Netlify へのデプロイ手順

作成したアプリケーションを本番環境にデプロイしてみましょう。

Git リポジトリの準備

まず GitHub にプロジェクトをプッシュします。

bashCopy code# Gitリポジトリ初期化
git init

# すべてのファイルをステージング
git add .

# 初回コミット
git commit -m "🎉 Initial commit: Preact Todo App"

# GitHubリポジトリに接続（URLは自分のリポジトリに変更）
git remote add origin https://github.com/username/todo-preact-app.git

# リモートリポジトリにプッシュ
git push -u origin main

Vercel でのデプロイ

Vercel は最もシンプルなデプロイ方法の一つです。

mermaidCopy codesequenceDiagram
  participant Dev as 開発者
  participant GitHub as GitHub
  participant Vercel as Vercel
  participant User as ユーザー

  Dev->>GitHub: git push
  GitHub->>Vercel: 自動デプロイトリガー
  Vercel->>Vercel: ビルド実行
  Vercel->>User: 本番URL提供

1. Vercelに GitHub アカウントでログイン
2. 「New Project」をクリック
3. GitHub リポジトリを選択
4. Build 設定を確認（通常は自動検出）
   • Build Command: yarn build
   • Output Directory: build
5. 「Deploy」をクリック

デプロイが完了すると、https:​/​​/​your-app-name.vercel.app形式の URL が発行されます。

Netlify でのデプロイ

Netlify も同様に簡単にデプロイできます。

1. Netlifyにアカウント作成/ログイン
2. 「New site from Git」をクリック
3. GitHub リポジトリを連携
4. Build 設定を入力
   • Build command: yarn build
   • Publish directory: build
5. 「Deploy site」をクリック

どちらのサービスも、GitHub にプッシュするたびに自動的に再デプロイされる継続的デプロイメントが設定されます。

カスタムドメインの設定

独自ドメインを使用したい場合は、各プラットフォームの管理画面から DNS 設定を行えます。SSL 証明書も自動的に設定されるため、セキュアな本番環境が手軽に構築できます。

まとめ

この記事では、Preact を使用した開発の全体フローを段階的にご紹介いたしました。環境構築から本番デプロイまでの一連の流れを把握していただけたでしょうか。

Preact の最大の魅力は、その軽量性と React 互換性にあります。わずか 3kB という小さなライブラリサイズでありながら、React の強力な機能をそのまま活用できるため、学習コストを抑えながら高性能な Web アプリケーションを開発できます。

特に今回取り上げたポイントは以下の通りです：

• 軽量性によるパフォーマンス向上: 読み込み速度の大幅な改善
• React 互換性: 既存の知識とライブラリの活用
• シンプルな開発フロー: 最小限の設定で開発開始
• 簡単なデプロイメント: Vercel や Netlify での即座の本番公開

Preact を選択することで、モダンなフロントエンド開発の恩恵を受けながら、パフォーマンスと開発効率の両立を実現できます。今回作成した Todo アプリをベースに、さらに機能を追加したり、他のライブラリと組み合わせたりして、Preact 開発を深めていただければと思います。

小さく始めて大きく育てる。それが Preact の魅力であり、持続可能な開発への第一歩となるでしょう。

関連リンク

• Preact 公式サイト
• Preact CLI GitHub
• Vite 公式サイト
• Vercel
• Netlify
• React vs Preact: パフォーマンス比較
• Preact/compat - React 互換ライブラリ