Loading

  • LIGHT

  • DARK

ROUTE

ルートゼロの
アクティビティ

Vite×WordPress環境構築の決定版！5ステップで高速導入・エラー対策も完全網羅

技術情報
3

【コピペでOK】Vite×WordPressの爆速開発環境、最短構築ガイド

「WordPressのテーマ編集、なぜこんなに反映が遅い？」
webpackのビルド待ちや、細かな修正のたびに数十秒…。
私たち開発者の“モヤモヤ”、よくわかります。

そんな現場の悩み、Viteが一発で解決できます。
でも「node.jsはちょっと苦手」「WordPressとどう組み合わせるの？」と不安もあるはず。

ご安心ください――この記事で、“現場目線”の最短構築手順とつまずき回避Tipsまで、一気通貫で解説します。
コピペで即試せる内容なので、明日の自分のために手元で動かしてみましょう。

用語解説：WordPress
世界中で使われているCMS（コンテンツ管理システム）。ブログやWebサイトを簡単に作成・管理できる。

用語解説：webpack
JavaScriptやCSSなどのファイルをまとめて最適化するビルドツール。従来はビルドに時間がかかることが多い。

用語解説：Vite
モダンなフロントエンド開発向けのビルドツール。高速な開発サーバー起動と即時反映が特長。

用語解説：node.js
サーバーサイドでもJavaScriptを動かせる実行環境。npmでパッケージ管理もできる。

（Viteやフロントエンド開発の全体像については『フロントエンドフレームワーク徹底比較！React・Vue・Angular違いと選び方』もご参照ください）

ViteがWordPress開発を変える2つの仕組み

Vite（ヴィート）は「遅い」を解消するモダンビルドツールです。
従来型（webpackなど）の“全部バンドル型”とは違い、2つのポイントで“爆速”を実現します。

用語解説：モダンビルドツール
開発効率や反映速度を重視した新しい世代のビルドツール。Viteやwebpackなどが代表例。

用語解説：バンドル
複数のファイル（JSやCSSなど）を1つにまとめて配信する仕組み。従来は全ファイルをまとめていた。

1. ESMが叶える「その場ロード」

  • ESM（ECMAScript Modules）を活用
  • ファイルを「全部まとめる」のでなく、「必要な分だけ」その場で配信
  • サーバー起動・反映が圧倒的に速い

用語解説：ESM（ECMAScript Modules）
JavaScriptの標準的なモジュール管理方式。必要なファイルだけを個別に読み込める。

2. HMRで“待たない”修正サイクル

  • HMR（Hot Module Replacement）が変更部分のみ即時反映
  • CSS・JSを直した瞬間、ページが自動で更新
  • リロード待ちゼロの快適開発体験

用語解説：HMR（Hot Module Replacement）
コードの一部を変更した際、ページ全体をリロードせずに変更部分だけを即時反映する仕組み。

5ステップで完了：Vite×WordPress構築手順

「npmもViteも初めて」でも迷わない、“最短ルート”を紹介します。

用語解説：npm
Node.jsのパッケージ管理ツール。ライブラリのインストールやスクリプト実行に使う。

用語解説：package.json
プロジェクトの依存関係やスクリプト、設定情報を記述するファイル。

用語解説：Sass
CSSを効率的に記述できる拡張言語。Viteで簡単にビルドできる。

ステップ1：package.json生成＋Viteインストール

npm init -y
npm install --save-dev vite sass

ステップ2：ディレクトリ構成を準備

my-theme/
├── src/
│   ├── js/
│   │   └── main.js
│   └── scss/
│       └── style.scss
├── functions.php
├── index.php
├── package.json
└── ...他テーマファイル

用語解説：functions.php
WordPressテーマの機能を拡張するためのPHPファイル。スクリプトやスタイルの読み込み設定もここで行う。

ステップ3：vite.config.jsを設置

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    outDir: 'dist',
    assetsDir: '',
    rollupOptions: {
      input: {
        main: 'src/js/main.js',
        style: 'src/scss/style.scss',
      },
      output: {
        entryFileNames: 'js/[name].js',
        assetFileNames: 'css/[name].[ext]',
      },
    },
    manifest: true,
  },
  server: {
    origin: 'http://localhost:5173',
  },
});
  • import { defineConfig } from ‘vite’;
    Viteの設定ファイルを型安全に記述するための公式ヘルパー。設定内容の補完やエラー検出が強化されます。
  • build.outDir: ‘dist’
    ビルド成果物（JS/CSSなど）を出力するディレクトリ。WordPressテーマ内のdistフォルダにまとめて配置されます。
  • build.assetsDir: ”
    アセット（CSSや画像など）の出力先サブディレクトリ。空文字にすることでdist直下にファイルが出力され、WordPressからのパス解決が簡単になります。
  • rollupOptions.input
    ビルドのエントリーポイントを指定。ここでmain.js（JS）とstyle.scss（CSS/Sass）を個別に指定し、WordPressで個別に読み込めるようにします。
  • rollupOptions.output.entryFileNames / assetFileNames
    出力されるファイル名の命名規則。js/やcss/サブフォルダに分けて整理しやすくしています。
  • manifest: true
    ビルド後にmanifest.jsonを自動生成。WordPress側でビルド後ファイルのパスを自動解決するために必須です。
  • server.origin: ‘http://localhost:5173’
    開発サーバーのURLを明示。WordPressがViteの開発サーバーからアセットを正しく取得できるようにします。

用語解説：vite.config.js
Viteの動作やビルド方法を設定するファイル。エントリーポイントや出力先などを指定する。

用語解説：manifest.json
ビルド後のファイル名と元ファイルの対応表。WordPressで正しくアセットを読み込むために使う。

ステップ4：functions.phpでアセット自動読込

function vite_asset_loader($entry) {
    $manifest_path = get_theme_file_path('/dist/manifest.json');
    if (wp_get_environment_type() === 'local' && is_file($manifest_path)) {
        $manifest = json_decode(file_get_contents($manifest_path), true);
        if (isset($manifest[$entry])) {
            wp_enqueue_script($entry, get_theme_file_uri('/dist/' . $manifest[$entry]['file']), [], null, true);
            if (isset($manifest[$entry]['css'])) {
                foreach ($manifest[$entry]['css'] as $css_file) {
                    wp_enqueue_style($entry . '-css', get_theme_file_uri('/dist/' . $css_file), [], null);
                }
            }
        }
    } else {
        wp_enqueue_script($entry, 'http://localhost:5173/' . $entry, [], null, true);
    }
}

function my_theme_scripts() {
    vite_asset_loader('src/js/main.js');
    vite_asset_loader('src/scss/style.scss');
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');

用語解説：wp_enqueue_script / wp_enqueue_style
WordPressでJSやCSSをテーマに読み込むための関数。依存関係や出力順も制御できる。

用語解説：ローカル環境
開発者の手元PC上で動かすテスト用の環境。本番公開前の動作確認に使う。

ステップ5：開発サーバー起動＆即反映体験

"scripts": {
  "dev": "vite",
  "build": "vite build"
}

npm run dev

WordPress側を開いて、即時反映を確認しましょう。

vite.config.jsを深掘り：なぜこの設定？

Vite×WordPress連携のキモ、vite.config.js。
各項目の役割を知れば、“カスタム構成”も怖くありません。

  • server.origin
    WordPressがViteサーバーのアセットを認識できるように設定
  • build.outDir
    本番ビルド時の出力先（例：dist）
  • rollupOptions.input
    JS・CSSそれぞれのエントリーポイント
  • manifest:true
    出力ファイルと元ファイルの対応表（manifest.json）生成

用語解説：エントリーポイント
ビルド時に最初に読み込まれるファイル。ここから依存ファイルがまとめられる。

用語解説：アセット
サイトで使う画像・CSS・JSなどの静的ファイル全般。

プラグイン活用例

  • vite-plugin-live-reloadでPHP編集時も自動リロード対応可

用語解説：プラグイン
機能を追加する拡張モジュール。ViteやWordPressで多用される。

Dockerでチーム開発も“誰でも同じ環境”

「他のメンバーも同じ環境で開発したい…」
その悩み、Dockerで解消できます。

  • docker-compose.ymlにWordPress＋Node.js環境を定義
  • 「docker compose up」一発で誰でも同じローカル環境
  • 環境差異トラブルをゼロへ

用語解説：Docker
アプリや開発環境を「コンテナ」としてまとめて配布・再現できる仮想化技術。

用語解説：docker-compose.yml
複数のコンテナ（WordPressやDBなど）を一括で起動・管理するための設定ファイル。

用語解説：ローカル環境
開発者の手元PC上で動かすテスト用の環境。本番公開前の動作確認に使う。

（Dockerの基礎やWeb開発での活用については『DockerでLinuxを効率学習｜環境構築からエラー解決まで完全ガイド』もご参照ください）

“あるある”エラー5選＆対策リスト

「動かない…？どこで詰まった？」を、5パターンで“予習”しましょう。

  • CORSエラー：
    ⇒ vite.config.jsのserverにcors: true追加
  • npm run devが起動しない：
    ⇒ ポート競合ならserver.portを別番号に
  • 画像やフォントのパスがずれる：
    ⇒ CSS内url()は相対パス or publicディレクトリ配置
  • 本番CSS/JSが読めない：
    ⇒ dist/manifest.jsonの有無・パス設定・環境タイプを再確認
  • jQueryが動かない：
    ⇒ main.jsでimport $ from 'jquery'など明示読込

用語解説：CORS（クロスオリジンリソースシェア）
異なるドメイン間でリソースをやり取りする際のブラウザのセキュリティ制限。設定ミスで通信がブロックされることがある。

用語解説：ポート
サーバーやアプリごとに割り当てられる通信の入り口番号。競合すると起動できない。

用語解説：相対パス
現在のファイル位置から見たファイルの場所を示す書き方。絶対パスと区別される。

用語解説：jQuery
JavaScriptの代表的なライブラリ。DOM操作やAjax通信を簡単に記述できる。

（JavaScriptやjQueryのエラー対策については『JavaScriptでよく発生するエラー「ReferenceError」「SyntaxError」などの原因と対策を具体例付きで解説』もご参照ください）

本番公開：ビルド＆配置の流れ

  • npm run buildで本番ファイル生成（distへ出力）
  • distフォルダをサーバーのテーマディレクトリにアップ
  • functions.phpの設定が自動でパス解決

用語解説：ビルド
ソースコードを本番用にまとめて最適化する作業。不要なコード削除や圧縮も含む。

用語解説：ディレクトリ
ファイルやフォルダの保存場所。テーマディレクトリはWordPressテーマの格納先。

よくある質問（FAQ）

  • Q. jQuery中心のテーマでも導入できる？
    ⇒ 可能。標準のjQueryとVite内jQueryは別物なので、importして併用を。
  • Q. フルサイト編集（FSE）テーマもOK？
    ⇒ OK。アセットビルドだけをViteで担うので、theme.jsonやブロックとの共存も可能。
  • Q. ReactやVue.jsもいける？
    ⇒ 得意分野。Vite標準サポート。WordPressブロック・管理画面にも活用可能。
  • Q. 本番でJSが読み込めない？
    ⇒ dist/manifest.jsonとfunctions.phpのパス指定・パーミッションを確認。URLのデバッグも必須です。

用語解説：フルサイト編集（FSE）
WordPress5.9以降で導入された、サイト全体をブロックで編集できる機能。

用語解説：theme.json
WordPressテーマの設定をまとめて管理できるJSONファイル。

用語解説：React / Vue.js
どちらも人気のJavaScriptフレームワーク。UI構築やSPA開発でよく使われる。

用語解説：パーミッション
ファイルやディレクトリのアクセス権限。設定ミスでファイルが読めなくなることがある。

まとめ：Viteで“待ち時間ゼロ”の開発体験を

私たちが直面する「ビルド待ちのストレス」――
Viteを使えば、修正→即確認のサイクルが日常になります。

この記事では最速構築手順からエラー対策、Docker活用法まで網羅しました。
“伴走する技術記事”を目指し、現場の困りごとを一つずつ解消できるよう構成しています。

ぜひコードをコピペして、まずは動かしてみてください。

Follow Us

RANKINGranking-icon

LATEST POSTS

SNS Feeds

YouTube

@routezero_shinnsotsu

@routezero_shibasuke

RECRUIT

募集要項・エントリー

中途採用エントリーはこちら

arrow

2027年新卒エントリーはこちら

社長と直に面談したい!
社長に直談判

arrow

管理職を目指すあなたは
まずは岡本を倒せ!

arrow

もっとルートゼロを知りたいなら

DISCOVER MORE