これまでフロントエンドのビルドにはWebpackを使うことが多く、設定や運用にも慣れていました。ただ、今回Webで遊べるReactアプリを作るにあたり、初めてViteを使ってみました。

本記事では、実際に使って感じたWebpackとの違いと、レンタルサーバーへの配置方法をまとめます。

---

プロジェクトの要件

今回の制作物は以下の要件でした：

• CMSを使わず、React製のSPA（Single Page Application）を静的ファイルとして配信
• コンテンツはJSONデータと画像が中心
• クライアント側ルーティングは使わない（シンプルな単一ページ構成）
• レンタルサーバーにFTPで配置予定
• SEOは考慮不要（Webアプリケーションとしての用途）

環境構築に時間をかけたくなかったため、Viteを採用しました。

SEOについての注意：
SPAはJavaScriptでコンテンツを動的生成するため、検索エンジンのクローラーに適切にインデックスされない場合があります。もしSEOが重要なサイト（コーポレートサイト、ブログ、ECサイトなど）を作る場合は、Next.jsやRemixなどのSSR（Server Side Rendering）またはSSG（Static Site Generation）に対応したフレームワークの使用を検討してください。

---

体感で一番違ったのは「待ち時間」

Webpackと比べて、まず感じたのは以下です。

• 開発サーバーの起動が圧倒的に速い
• ファイル変更後の反映が速い（WebpackもHMRはあるが、Viteの方が軽量で高速）
• デフォルトでJSX変換が動作（追加のBabel設定が不要）
• ローダーの明示的な設定が不要

開発中に発生する「待ち」が減ると、思考が途切れにくくなります。個人制作では、この差がそのまま作業効率に影響しました。

---

WebpackとViteの実用上の違い

細かい内部構造は省きますが、実用上の違いは以下です。

Webpack

すべてをバンドルしてから動かす設計。開発環境でもその影響を受けやすく、プロジェクトが大きくなると起動やHMRが遅くなりがちです。

Vite

開発時はネイティブESM（ES Modules）を活用し、ブラウザが必要なモジュールを直接読み込みます。本番ビルド時はRollupでバンドル・最適化を行います（将来的にはRolldownへの移行も予定されています）。

そのため、Viteは開発中の体感速度が軽いと感じやすいです。

ブラウザ対応の注意：
ViteはネイティブESMを使うため、IE11は非対応です。モダンブラウザ（Chrome、Firefox、Safari、Edgeの最新版）を前提としています。

---

今回使った環境

{
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "vite": "^5.0.0",
    "@vitejs/plugin-react": "^4.2.0"
  }
}

開発サーバー起動：

npm run dev

本番ビルド：

npm run build

---

vite.config.js の設定

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    emptyOutDir: true  // デフォルトでtrueだが、意図を明示
  }
});

---

各設定の意図

@vitejs/plugin-react

公式のReactプラグインを入れるだけで、JSX変換が動作します。内部ではesbuildを使っているため高速です。Babel特有の機能（decoratorsなど）が必要な場合は追加設定が必要ですが、今回のような標準的な構成では不要でした。

outDir: 'dist'

ビルド結果の出力先を指定。デフォルトでもdistですが、明示しています。

assetsDir: 'assets'

生成されたJSやCSS、画像がassets/にまとまるため、構造が分かりやすくなります。FTPアップロード時も迷いません。

emptyOutDir: true

ビルド前に出力先を空にします（これはデフォルト動作ですが、意図を明示）。古いファイルが残らないため、FTPアップロード後も不要なファイルが残りません。

---

画像の扱い

今回のプロジェクトでは画像を以下のように扱いました：

• 動的にimportする画像：JSX内でimportして使用
• 静的に配信する画像：public/ディレクトリに配置

public/内のファイルはビルド後も同じパスで参照できるため、JSONで画像パスを管理する場合に便利です。

---

レンタルサーバーへの配置

ビルド後、dist/に生成されたファイルをそのままレンタルサーバーにアップロードします。

手順

1. npm run build でビルド
2. FTPクライアント（FileZillaなど）で接続
3. dist/の中身を /public_html/ にアップロード

注意：
公開ディレクトリはサーバーの設定により異なります。/public_html/、/htdocs/、/www/など、利用しているサーバーの仕様を確認してください。

サブディレクトリに配置する場合

例えば /app/ のようなサブディレクトリに配置する場合、vite.config.jsに以下を追加します：

export default defineConfig({
  base: '/app/',
  // ...
});

今回はドメイン直下での配信を想定していたため、baseは指定していません（未指定時は自動的に/が設定されます）。

---

この構成で困らなかった理由

ルーティング不要

今回はシンプルな単一ページ構成だったため、React Routerなどのクライアント側ルーティングは使っていません。もしルーティングを使う場合は、サーバー側で.htaccessの設定が必要になります（全てのリクエストをindex.htmlにリダイレクト）。

プラグイン1つで完結

@vitejs/plugin-reactだけで、JSX変換からHMRまで全て動作しました。

dist出力＋FTPアップロード

特別なサーバー設定は不要。dist/の中身をアップロードするだけで完了します。

---

Webpackの方が向いているケースもある

以下のような場合は、Webpackを使い続ける方が合理的です：

• 既存案件でWebpack前提の構成がある
• 独自ローダーやプラグイン資産が多い
• ビルド要件が複雑で、細かいカスタマイズが必要

こうした場合は、無理にViteへ移行する必要はないと思います。

---

まとめ

• 小〜中規模のReact SPAなら、Viteは非常に快適
• レンタルサーバーでも「distを置くだけ」で成立する
• 設定で悩む時間が少ないのは、個人制作では大きなメリット
• モダンブラウザ前提の構成であることに注意
• SEOが重要なサイトには向かない（SSR/SSG対応フレームワークを検討すべき）

今回の構成では、今後もViteを第一候補にするつもりです。