Vite+EJSで実現するモダンなHTML量産環境の構築（pnpm対応・静的ルーティング）
- 公開日:
- メンテナンス日:
広告
広告
FAQ
- なぜ現在、GulpではなくVite+EJSを使うべきなのですか？
- ViteはGulpに比べて環境構築（設定ファイルの記述）が非常にシンプルで、ビルドやブラウザへのホットリロードが劇的に高速だからです。Gulpのように複雑なタスクランナーの維持管理に時間を取られることなく、最小限の設定で爆速な静的サイトコーディング環境が手に入ります。
- EJSファイルでコードを保存・コピペするとインデントがガタガタに崩れてしまいます。
- VS Codeの標準HTMLフォーマッタや、Prettierなどの自動整形ツールが、EJSのタグ（
<% %>）を正しく解析できずに暴走しているのが原因です。本記事で紹介している VS Codeの設定（settings.json） を導入し、保存時とコピペ時の自動整形（Format On Save / Paste）をオフにすることで完全に解決できます。
- ローカル開発用の dev と、ビルド後に動かす preview の違いは何ですか？
- 「dev」はEJSやSassをリアルタイムにコンパイルしながら動作させる、開発作業用のスピード重視サーバーです。一方「preview」は、実際にビルドされて dist フォルダに書き出された「純粋な静的ファイル」を擬似本番環境で動かすサーバーです。静的ルーティング（フォルダ構成）のリンクが切れていないかの確認には必ず preview を使いましょう。
- ページを増やしてさらに量産したい時はどうすればいいですか？
- 手順は2つだけです。① src/data/site.json の pages に新しいページID（例: work）とタイトル等を追加。② src/work/index.ejs を作成。これだけで Viteの自動ルーティング設定 により、ビルド時に自動で検出されて /work/index.html として書き出されます。
広告
