【2022年最新版】初心者のためのEJS使い方まとめ

駆け出しマン

EJSというテンプレートエンジンを会社で使うらしいんだけど、テンプレートってなんや？なんか難しそうやから使い方知りたいデス

本記事では、ド初心者に向けたEJSの使い方をまとめました。

EJSはJSのテンプレートエンジン。サイト全体の共通パーツなどをphpを使わずに分割することができる優れものです。

EJSの使い方をマスターして効率的にコーディングを進めていきましょうっ！

EJSとは

EJSとは主にJavaScriptで使用されるテンプレートエンジンです。EJSを利用することでHTMLをヘッダーやフッターで分割して管理することやHTML内でループ処理を書いて簡単に記述できるなどを実現できます。
EJSを理解する | 案件評判

上記説明の通りですが、EJSを使用することで、静的なHTMLファイルを分割して効率的に作業を進めることができます。

phpを使ったことがある人なら、ヘッダー部分を「header.php」、フッター部分を「footer.php」というようにァイルを分割してincludeで呼び出すと思います。

しかし、静的なHTMLファイルはそのように分割して呼び出すことができません。（正確には、できるが手間がかかる）案件によっては、phpが使えないこともあります。その際に活躍するのがEJSというわけですね。

それでは、実際に使っていきましょう！

EJSの使い方

今回はejs cliというnpmパッケージを使って、EJSを使っていきましょう。手順は以下の通り。

必要ファイルの準備
ejs cliをインストール
EJS記法で記入
コンパイル

ちなみに今回は下記の環境でやっていきますっ

OS → Mac Book Pro（mac OS Big Sur v.11.64）
エディタ→ Visual Studio Code
EJS CLI →@2.3
Node.js → v14.17.6

ここからは、Node.jsをインストール済である前提で進めていきます。
Node.jsのインストールがまだな方は、下記記事が参考になるかと思います。

Windows：https://qiita.com/sefoo0104/items/0653c935ea4a4db9dc2b
Mac：MacにNode.jsをインストール

必要ファイルの準備

まずは必要ファイルを準備していきます。プロジェクトファイルを適当に作りましょう。今回はejs-pacticeという名前でプロジェクトを作りました。

プロジェクトをvscodeで開き、ターミナルで下記を実行します。

cli

npm init -y

これでプロジェクト内にpackage jsonが生成されます。

ejs cli をnpm install

次にejs cliをインストールしていきます。ターミナルで下記コマンドを実行しましょう。

cli

npm i -D ejs-cli

省略してますが、npm install –save-dev ejs-cliでもOKです。

無事にインストールできたら、package-json内が下記のように追記されているはずです。

これでプロジェクト内は下記の構成になるかと思います。

project

ejs-practice（プロジェクト名）
 L package-json
 L package-lock.json
 L node_modules

npmスクリプトの準備

次にEJSコンパイルを実行するためのコードを書いていきます。

package.jsonのscriptsを下記に置き換えましょう。

package.json

  "scripts": {
    "ejs": "ejs-cli --base-dir ejs/ 'index.ejs' --out dest/"
   }

上記コマンドの中身は次のようになります。

package.json

ejs-cli --base-dir 参照するディレクトリ 'コンパイルするファイル' --out 出力先のディレクトリ名

–base-dir	コンパイルするファイルの参照先
–out	出力先

今回は、ejsディレクトリのindex.ejsを、destディレクトリにコンパイルするように設定しました。

他にもオプションがあるので、詳細は公式をご確認ください。

これでコンパイルの準備は整いました！

ejsファイルの準備

次にejsファイルを準備していきます。今回は、ヘッダー、フッターで分ける想定で下記の３ファイルを準備します。

index.ejs
_header.ejs
_footer.ejs

上記ファイルを、ejsディレクトリを作り、その中に入れます。

project

ejs-practice（プロジェクト名）
 L ejs
  L index.ejs
  L _header.ejs
  L _footer.ejs
 L package-json
 L package-lock.json
 L node_modules

これで準備は完了です！では早速EJSを体験していきましょう。

【EJS実践】 EJSの使い方

STEP１：EJS CLIでHello,Worldを表示させてみよう

まずはejsファイルをコンパイルして「Hello,World」を表示させてみましょう。

先程作成したindex.ejsに下記をコピペしてください。

index.ejs

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>EJS</title>
  <% var hoge = '<p>hello, World</p>' %>
</head>
<body>
  <%- hoge %>
</body>
</html>

これで、先程準備したコンパイルコマンドをターミナルで実行します。

cli

npm run ejs

そうすると、destディレクトリが生成され、中身にはindex.htmlが入っていることが確認できるかと思います。

ディレクトリ構成はこんな感じ。

project

ejs-practice（プロジェクト名）
 L dest
  L index.html（生成されたファイル）
 L ejs
  L index.ejs
  L _header.ejs
  L _footer.ejs
 L package-json
 L package-lock.json
 L node_modules

EJSの記法は<% %>を使う

少し見慣れない記法ですが、EJSファイルでは出力するコードを<% %>で囲みます。

構文は様々でエスケープしなかったり、スクリプトを書く用だったり色々あります。詳細は下記をご覧ください。

参考テンプレートエンジンEJSで使える便利な構文まとめ – QiitaQiita

STEP2：ヘッダーとフッターを読み込んでみよう

では、次にheaderとfooterを読み込んでみましょう。まずはheader.ejsとfooter.ejsに下記のように記述します。

_header.ejs

<header>
  <p>headerやで</p>
</header>

_footer.ejs

<footer>
  <p>footerやで</p>
</footer>

次にこれらをincludeで呼びだすための記述をindex.ejsに書きましょう。

index.ejs

// 一部略
<body>
  <!-- header -->
  <%- include('_header') %>
  
  <!-- footer -->
  <%- include('_footer') %>
</body>

書いたらnpm run ejsを実行。そうすると出力されたindex.htmlが下記のようになるはずです。

index.ejs

<body>
  <!-- header -->
  <header>
    <p>headerやで</p>
  </header>

  <!-- footer -->
  <footer>
    <p>footerやで</p>
  </footer>
</body>

このようにheaderやfooterなど共通ファイルを呼び出すことができます。

STEP3：jsonファイルから値を出力してみよう

次にjsonファイルから値を出力してみましょう。今回はページごとのメタデータを管理するjsonファイルを用意します。

data.json

{
  "data": {
    "index": {
      "title": "TOPページ",
      "desc": "TOPページやで"
    },
    "about": {
      "title": "ABOUTページ",
      "desc": "アバウトページやで"
    }
  }
}

それから別ページ用にaboutディレクトリを作成して中にindex.ejsを入れておきましょう。またinclude用の_header.ejsや_footer.ejsはpartsディレクトリにまとめておきます。

ファイル構成はこんな感じ。

project

ejs-practice（プロジェクト名）
 L dest
  L index.html
 L ejs
  L about (NEW)
   L index.ejs (NEW)
  L index.ejs
  L parts
   L _header.ejs
   L _footer.ejs
 L package-json
 L package-lock.json
 L node_modules

次に、このjsonファイルを読み込むためにスクリプトを下記に書き換えます。

package.json

  "scripts": {
    "ejs": "ejs-cli --base-dir ejs/ '**/*.ejs' -e 'parts/' --out dest/ -O data.json"
  },

新しく追加したのは２つ。

まずは、-O data.jsonから。こちらは、–optionsの省略で、読み込ませたいJSONファイルやファイルパスを記述します。

次に、-e ‘parts/’は、出力しないディレクトリ名またはファイルを指定するためのものです。_header.ejsと_footer.ejsは出力の必要がないので除外しています。

JSONファイルの値を読み込ませる

では、JSONファイルに記述した値を読み込ませます。index.ejsとabout/index.ejsそれぞれのhead部分に下記を記述します。

index.ejs

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%- data.index.title %></title>
  <meta name="description" content="<%- data.index.desc %>">
</head>

about/index.ejs

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%- data.about.title %></title>
  <meta name="description" content="<%- data.about.desc %>">
</head>

これでコンパイルコマンドを実行します。そうすると下記のように出力されるはずです。

index.html

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TOPページ</title>
  <meta name="description" content="TOPページやで">
</head>

about/index.html

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ABOUTページ</title>
  <meta name="description" content="アバウトページやで">
</head>

こんな感じで、meta情報をjsonファイルで管理して出力させることもできます。便利だ！