はじめに

始めまして、ドゥカンパニーでWEBディレクターとフロントエンドエンジニアをしております、今回はこのWEBサイトで使用している技術について語ります。

いまどきのWEBサイトの開発はJamstackがトレンドに入り、爆速のWEBサイトを制作するケースが増えてきました。

しかし、ユーザーの運用やプラグインの資産を考えたとき、あえてモノリスなWordPress構成を選択するケースの方が多い気がします。
そこで考えたのが、「WordPressを、モダンな技術で再構築する」というアプローチです。
ビルドツールを使い開発速度の向上、配信ファイルの圧縮を行い開発者、WEBサイトの訪問者にも嬉しい内容になっています。

使用技術

• ビルドツール：Vite
• 環境構築：@wordpress/env
• 画像処理： Sharp
• ライブラリ：GSAP,Swup

Viteについて

開発中はViteの開発サーバー（ポート5173）からアセットを直接配信、本番ではビルド時に生成される manifest.json を参照し、ハッシュ付きの最適化済みアセットを読み込むことで、キャッシュ破棄とパフォーマンスの向上を考えています。

HMRは本来Laravel向けの laravel-vite-plugin を流用して実現しています。hotFile の生成/削除や、PHPファイル変更時のブラウザリロードが一括で賄えるためです。

2026年、WEBサイトの制作にHMRがない開発なんてもうできないと思っている。

viteのコンフィグ抜粋（HMRとビルド周り）

laravel({
  input: ['src/js/main.js', 'src/css/main.scss'],
  publicDirectory: '.dist',
  buildDirectory: 'assets',
  hotFile: 'theme/hot',          // ← dev起動時に生成・停止時に削除で開発モード判定
  refresh: ['theme/**/*.php'],   // ← PHPファイルの更新でブラウザをリロード
})

server: {
  host: 'localhost',
  port: 5173,
  strictPort: true,
  hmr: {
    host: 'localhost',
    protocol: 'ws',
    port: 5173,
    overlay: true,
  },
}

functions.php抜粋（開発モード判定とHMR配信）

<?php
private function is_dev_mode(): bool {
  return file_exists($this->hot_file); // hotファイルがあれば開発モード
}

private function get_dev_server_url(): string {
  if (!$this->is_dev_mode()) return '';
  return trim(file_get_contents($this->hot_file)); 
}

private function enqueue_dev_assets(): void {
  $dev_server = $this->get_dev_server_url();

  // Vite HMRクライアント
  wp_enqueue_script('vite-client', $dev_server . '/@vite/client', [], null, false);

  // 開発中のエントリJSを直接配信
  wp_enqueue_script('theme-main', $dev_server . '/src/js/main.js', [], null, true);

  // type="module"を付与（HMRに必要）
  add_filter('script_loader_tag', [$this, 'add_module_type'], 10, 3);
}

今後も改善を積み重ねてより早く良い開発環境の構築を目指します。