WebDesigner's Memorandumウェブデザイナーの備忘録

HTMLが書ければすぐ習得できるテンプレートエンジン「EJS」の基本的な書き方

EJS

HTMLを効率的に書くためのテンプレートエンジンといえば「Pug(パグ)（旧：Jade）」が有名ですが、書き方がインデント必須で独特な書き方になってしまいます。

Webrandum
効率的にHTMLを生成できるPugの特徴や記述方法
https://webrandum.net/pug
Pug(パグ)はHTMLを生成するためのテンプレートエンジンで、ものすごくざっくり言うとSassのHTML版です。好き嫌いが別れたり、使い所も考える必要がありますが、今回はPugの特徴や記述方法についてまとめておきます。Pugの特徴Pugの特徴をまとめると下記のようになります。 閉じタグが不要 山括弧<>も不要 インデントで構造を管理 ファイルの分割ができる 変数が使える if文やfor文が使える閉じタグが無い変わりにインデントがかなり重要になってきます。そのため、普段からインデントを付けながら書いている人であれば、単純に書...

コードの質を担保するという意味では、書き方がある程度制限されていた方が良い場面もあるのですが、あまりにもHTMLの書き方と差があるため、複数人のチームでコーディングするときにPugが書けない人がいると使えなくなる可能性があります。

今回紹介するEJS(イージェイエス)は、書き方はHTMLと全く同じで、それに追加して便利な機能が使えるようになったテンプレートエンジンなので、「最悪の場合、普通にHTMLも書ける」というメリットがあります。

EJSの特徴

EJS

ejs.co
EJS -- Embedded JavaScript templates
https://ejs.co
'E' is for 'effective'. EJS is a simple templating language that lets you generate HTML markup with plain JavaScript. No religiousness about how to organize things. No reinvention of iteration and control-flow. It's just plain JavaScript.

EJSは、HTMLにJavaScriptを埋め込む（Embedded）ような形でHTMLを生成できるテンプレートエンジンです。

基本的な書き方はHTMLで、特殊な処理をしたい場所にだけ、EJS用の開始タグと閉じタグを設置し、その中にJavaScriptを書いて使用します。

EJSの基本的な特徴をまとめると下記のようになります。

  • あくまで書き方はHTMLと同じ
  • 拡張子は.ejs
  • ファイルの分割ができる
  • if文やfor文などのJavaScriptと同じ構文が使える

これらの機能をうまく使いこなすことで、効率的にHTMLを生成します。

EJSの使い方

基本的な書き方

基本的にはHTMLと同じような書き方をして、EJSの処理は<% %>などの専用の開始タグと閉じタグの中に書きます。

EJSタグ内容
<%  %>中にJavaScriptをかけて、HTMLとしては出力されない
<%=  %>中にある変数がエスケープ込みで展開される
<%-  %>中にある変数がエスケープなしで展開される（HTMLタグを直接出力したい場合に使用）
<%#  %>コメント扱いになり、HTMLとしては出力されない
<%%  %>EjsそのものをEjsでテンプレート化したいときにEjsタグのエスケープとして使用します（普段は使用しない）

基本的にEJSで何か処理して表示させたい場合は<%=  %>を使用して、単に変数の定義だけしたい場合などは<%  %>を使用します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>タイトル</title>
  </head>
  <body>
    <%= ここにEjsの処理を追加する %>
  </body>
</html>

ファイルの分割管理

include()関数を使うと、外部のファイルを読み込むことができます。

<%- include('./_common/header', {vars:'vars'}) %>

第一引数には読み込むファイルへの相対パスを入力します。自ファイルが基準になっていて拡張子の.ejsを省略できます。

第二引数にはそのEJSに渡すパラメータを指定できます。

これを使ってヘッダーやフッターを別ファイルにして管理するだけで、EJSを使うメリットはあります。

変数を使う

変数を定義したいときは、<%  %>の中で宣言するのですが、varを使う方法（ローカル変数）と使わない方法（グローバル変数）の2通りがあります。

<% var localSample = 'ローカル変数：varを使って宣言'; %>
<% globalSample = 'グローバル変数：varを使わずに宣言'; %>

ローカル変数の場合はファイル間での変数の共有はできませんが、グローバル変数であれば共有可能です。

if文を使う

あらかじめ変数を用意しておいて、変数に応じてif文で条件分岐することも可能です。
書き方はJavaScriptとほとんど同じですね。

<%
var meta = {
  title: 'トップページ',
};
-%>

<% if (meta.title == 'トップページ') { %>
  <div class="top">トップページに表示</div>
<% } else if (meta.title == 'アバウトページ') { %>
  <div class="about">アバウトページに表示</div>
<% } else { %}
  <div class="other">それ以外のページ</div>
<% } %>

ヘッダーをトップページとそれ以外のページで分岐するときなどに使います。

for文を使う

for文を使えば、複数回必要になる要素を短く書けます。

<% for (var i = 1; i <= 10; i++) { %>
<p><%= i %>回目</p>
<% } %>

まとめ

「複数人で作業する必要があり、Pugだと書けない人がいるから導入ができない」「Pugだと社内で書ける人が自分しかいない」といった状態でも、EJSであれば基本的な書き方はHTMLと一緒です。

最悪の場合、拡張子は.ejsだけど中身は普通のHTMLというのも可能です。
とりあえずヘッダーとフッターだけは分割管理しておけば、あとから修正が入っても比較的ラクに修正できるようになるので、メリットは十分あるのではないでしょうか？

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね
カテゴリー
タグ
文章量
ソート
Twitterをフォロー Facebookでいいね

記事一覧

関連記事 人気記事 ランダム

目次

表示設定

ダークモード

この機能はCookieを使用して、設定した内容を保存しています。個人を特定したりするものではありませんが、気になる方はプライバシーポリシーをご覧ください。