ejs-cliとnpm scriptsで静的サイト制作環境を構築する

最終更新：2026.03.02

Tech HTML/CSS

概要

以前、Sassのコンパイル環境をnpm scriptsで構築しましたが、今回はさらにHTMLをEJSに置き換えて、ヘッダーやフッターなどの共通パーツを効率的に管理できる環境を作ります。

1. 必要なツールのインストール

EJSをコマンドラインから変換（コンパイル）するために ejs-cli を導入します。また、複数コマンドを並列実行するために npm-run-all なども合わせてインストールします。

npm install -D ejs-cli onchange npm-run-all

2. package.json の設定

package.json の scripts 部分に、EJSを変換するためのコマンドを追加します。

"scripts": {
  "build:ejs": "ejs-cli --base-dir src/ejs \"**/*.ejs\" --out public",
  "scss": "..." (今のSCSSコマンド)
}

3. 「共通パーツ」と「ページ本体」の分割

header部分を_header.ejsに移動、footer部分を_footer.ejsに移動した後
ページで両方を読み込みます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>トップページ</title>
  <link rel="stylesheet" href="/css/style.css">
</head>
<body>

  <%- include('_header') %>

  <main>
    <p>ここがメインコンテンツです。管理が楽！</p>
  </main>

  <%- include('_footer') %>

</body>
</html>

4. ページごとにタイトルやJSを動的に変える

include する際にオブジェクトを渡すことで、ページごとにタイトルや読み込むJSファイルを制御できます。

_header.ejs（タイトル制御）：

<% 
  let titleParts = [];
  if (typeof title !== 'undefined' && title !== '') { titleParts.push(title); }
  titleParts.push('サイト名');
%>
<title><%= titleParts.join(' | ') %></title>

注意：記述ミス（.の欠落やスペースの有無）で動かなくなることがあるため、EJS内のスクリプトタグは慎重に記述しましょう…。

_footer.ejs

<script src="/js/common.js"></script>

  <% if (typeof pageJs !== 'undefined') { %>
    <% pageJs.forEach(function(url) { %>
      <script src="<%= url %>"></script>
    <% }); %>
  <% } %>

5.【重要】発生した問題と解決策

問題1：共通パーツ用のファイル（_footer.html等）が出力される
_から始まるファイルは出力不要なので、package.json のコマンドで除外設定を行います。

"build:ejs": "ejs-cli --base-dir src/ejs \"**/!(_)*.ejs\" --out public",

問題2：でリンクが機能しない
public フォルダをルートとして認識させる必要があります。 .vscode/settings.json に以下を追記します。

{
  "liveServer.settings.root": "/public"
}

6. npm scripts の完成形

最終的な package.json の設定です。SassとEJSの「監視（watch）」を1つのコマンドで同時に実行できるようにします。

{
  "scripts": {
    "sass:watch": "sass --watch src/scss:public/css --style expanded --no-source-map",
    "sass:build": "sass src/scss:public/css --style compressed --no-source-map",
    "ejs:build": "ejs-cli --base-dir src/ejs \"**/!(_)*.ejs\" --out public",
    "ejs:watch": "onchange \"src/ejs/**/*.ejs\" -- npm run ejs:build",
    "build": "npm-run-all -p sass:build ejs:build",
    "start": "npm-run-all -p sass:watch ejs:watch"
  }
}

7. チーム向けREADMEの更新

移行後は、以下のルールをチームに周知します。

開発開始： npm start を実行

ソース管理： src フォルダを編集する

画像・JS：これらは直接 public フォルダ内に配置する（※ビルドフローに入れない場合）

拡張機能： Live Sass CompilerなどのVS Code拡張機能は競合するためオフにする