EJS まとめ #JavaScript

EJSとは

JavaScriptで利用するシンプルなテンプレートエンジン。
拡張子は「.ejs」で、ビルドでHTMLを書き出します。
複数ページで共通のパーツがある時にPHPのようにまとめることができます。
EJS公式サイト

EJSの導入

前提として、npmコマンドを使える状態にしておいてください。

プロジェクトファイル作成

dirという名前でプロジェクトフォルダを作成します。
dirという名前はお好きな名前に変えてOKです。

ターミナル

mkdir dir
cd dir

npm初期化

ターミナル

npm init -y

EJS CLIのインストール

ターミナル

npm i -D ejs-cli

package.jsonの書き換え

package.json

"scripts": {
  "build:ejs": "ejs-cli -b ejs/ -f '!(_)*.ejs' -o ./"
}

EJSファイルを作成

プロジェクトファイル直下にejsという名前でフォルダを作成
ejsフォルダにejsファイルを作成(ページ以外は先頭に_(アンダーライン)をつける)

フォルダ構成イメージ

- dir
    - node_modules
    - package.json
    - ejs
        - index.ejs
        - _header.ejs
        - _footer.ejs
    - index.html ## 書き出されたHTMLファイル

ビルド

ビルドコマンドを使用して、HTMLファイルを書き出します。

ターミナル

npm run build:ejs

EJS 記法

基本的にEJSは、感覚的にPHPのような感じで使っていきます。

<% %>

このタグの中に、JavaScriptのように記述します。
変数の値は、他のファイルに引き継がれます。

ejs

<% var hoge = 'Hello World'; %>
<% include _header %>

<%= %>

このタグの中に、出力したいコードを書いていきます。
HTMLエスケープされて出力されます。

ejs

<% var hoge = '<p>Hello World</p>'; %>
<%= hoge %>

出力されるHTMLファイル



<p>Hello World</p>

<%- %>

このタグの中に、出力したいコードを書いていきます。
HTMLエスケープされないで出力されます。

ejs

<% var hoge = '<p>Hello World</p>'; %>
<%- hoge %>

出力されるHTMLファイル



&lt;Hello World&gt;

<%_ _%>

このタグの中に、JavaScriptのように記述します。
<% %>との違いは、ホワイトスペースが取り除かれることです。
例えばif文の条件に当てはまらない時に余計な空白を消せるので出力されたコードがすっきりします。

ejs

<%_ var hoge = '<p>Hello World'; _%>
<%= hoge %>

出力されるHTMLファイル

<p>Hello World</p>

<% -%>

このタグの中に、JavaScriptのように記述します。
<% %>との違いは、改行をなくすことができることです。
includeを使った時に改行されることがありますが、それをなくせるので、出力されたコードがすっきりします。

ejs

<% include _header -%>

<%# %>

このタグの中に、出力されたコードで表示したくないコメントを記述します。

ejs

<%# コメント %>

EJS 文法

for文

繰り返しHTMLを生成したい場合はfor文を使うことができます。

ejs

<ul>
<%_ for (var i = 1; i <= 3; i++) { _%>
  <li><%= i %></li>
<%_ } _%>
</ul>

出力されるHTMLファイル

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

if文

条件によってHTMLを生成したい場合はif文を使うことができます。

ejs

<%_ var hoge = 'yes'; _%>
<%_ if(hoge === 'yes') { _%>
  <p>Yes！！！</p>
<%_ } else { _%>
  <p>No！！！</p>
<%_ } _%>

出力されるHTMLファイル

<p>Yes！！！</p>

include (引数なし)

引数なしの場合は、includeしたいejsファイルをそのまま書いていきます。

ejs

<% include _header %>

include (引数あり)

引数ありの場合は、includeしたいejsファイルを第1引数で引数を第2引数で書いていきます。

ejs

<% include('_header', {
  pageTitle: 'タイトル',
  pageDescription: 'ディスクリプション'
%>

まとめ

書き方	出力の仕方
<% %>	改行あり。ホワイトスペースあり。出力されない。
<%= %>	エスケープあり。改行なし。ホワイトスペースなし。出力される。
<%- %>	エスケープなし。改行なし。ホワイトスペースなし。出力される。
<%_ _%>	改行なし。ホワイトスペースなし。出力されない。
<% -%>	改行なし。ホワイトスペースなし。出力されない。
<%# %>	出力されない。コメント。

この記事が良いと思った方は、LGTMをしていただければ嬉しいです！
フォローも是非お願い致します(^^)