2020年12月19・20日に調べた
EJS(テンプレートエンジン)の使い方と
EJSの今後(2020〜)について考えました
想定としては、React, Angular, Vue を覚える前のサーバ初心者が
Node + Express を使って
サーバ側でレンダリングを気軽にやってみたいなと思った時に
EJS で手軽に出来るよ、という内容です
目次
始めに
この記事で
想定している事
- HTMLを数分〜数十分でレンダリングする
- Node + Express を使ってサーバ側でレンダリングする
- 基本タグ (<% %>, <%= %>, <%- %>) を足すだけなので学習コストが低い
- クライアント側でのinclude(パス, オブジェクト値)のあつかい方も簡単に紹介
- ローカルサーバ側のオブジェクト値が、クライアント側に送れているかを確認する
想定していない事
- 複雑な事や中〜大規模な事は React, Angular, Vue で覚えて下さい
- 複数ではなく、1ページのみのレンダリングを想定しています
- gulp は使いません
- 代わりに nodemon でレンダリングの自動更新を行います
ubuntu18.04conda4.8.4npm6.14.8node12.4.0express4.16.1$ express -h
Options:
-e, --ejs add ejs engine support
--pug add pug engine support
--hbs add handlebars engine support
-H, --hogan add hogan.js engine support
express -hコマンドを試してみると、ejs 以外にも pug, hbs, hogan があつかえる
サーバ側の事前準備
サーバ環境構築は下記の記事を参考にしてみて下さい
(Node, npm は既にインストールされている事とします)
ターミナルで express nodemon ejs をインストールして
$ mkdir myFirstEJSapp
$ cd myFirstEJSapp
$ npm init -y$ npm install--save express nodemon ejs
index.js ファイルを作り、最低限の設定をします
constexpress=require('express') // expressを準備constapp=express()constport=3000// express に ejs のテンプレートエンジンを設定app.set("view engine","ejs");// express に ejs のテンプレートエンジンを設定した場合// /views フォルダが index.ejs のデフォルトになりますapp.get("/",function(req,res){res.render("index");// これで /views/index.ejs をレンダリング});app.listen(port,()=>{console.log(`Example app listening at http://localhost:${port}`)})次に、 package.json ファイルに "start": "nodemon ./index.js"
を加えて、 npm startで nodemon が起動する様にします
{"name":"myFirstEJSapp","version":"1.0.0","description":"","main":"index.js","scripts":{"start":"nodemon ./index.js","test":"echo \"Error: no test specified\"&& exit 1"},"keywords":[],"author":"","license":"ISC","dependencies":{"ejs":"^3.1.5","express":"^4.17.1","nodemon":"^2.0.6"}}次に、 index.ejs ファイルを views フォルダ内に作成します
<!DOCTYPE html><html><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><title>myFirstEJSapp</title></head><body><div>テスト
</div></body></html>今の段階で
myFirstEJSapp (root)
--- node_modules
--- views
------ views/index.ejs
--- index.js
--- package-lock.json
--- package.json
といった構成になります
この段階で
ターミナルで npm startとやると
nodemon（自動更新）が作動し
index.ejs が、サーバ側からレンダリングされた状態で
http://localhost:3000にローカルサーバが構築されています
もしローカルサーバを構築するのも大変な人は、
ここまでで疲れてしまう人もいるかもしれませんが
ここまで来れば、ほぼ終わったも同然ですので頑張ってみて下さい
EJSの使い方
ここからEJSの使い方を紹介していきます
タグ
この記事では
基本的な４つのタグの使い方を紹介していきます
タグは全て index.ejs 内で使っていく事を想定しています
<%# %>コメント用タグ<% %>コード用タグ<%= %>出力用タグ（タグはエスケープ）<%- %>出力用タグ（タグ込）
下記は省略
- <%_
- <%%
- %%>
- %>
- -%>
- _%>
もしローカルサーバを構築出来なかった人・今は手元にない人でも
オンラインでコードをテスト出来る、下記サイトを使ってみて下さい
https://ionicabizau.github.io/ejs-playground/
1. <%# %>コメント用タグ
先ず、最初に紹介したいのは<%# %>コメント用タグで
HTML（クライアント）側には見られない
サーバ側だけが読めるコメントになります
これは
javascript で言う所の // コメント
HTML で言う所の <!-- コメント -->
になります
先ずは下記リンクで
https://ionicabizau.github.io/ejs-playground/
<%#これはコメント用%>と試してみて下さい
何も表示されない筈です
index.ejs内(サーバ側)でも<%# これはコメント用 %>が見られますが
<!DOCTYPE html><html><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><title>myFirstEJSapp</title></head><body><div>テスト</div><%#これはコメント用%><---サーバ側からは見られる</body></html>ローカルサーバ ( http://localhost:3000 ) の
クライアント側 ( index.html ) からは
何も表示されません
<html><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>myFirstEJSapp</title></head><body><div>テスト</div> <---クライアント側からは見られません</body></html>2. <% %>コード用タグ
次に紹介したいのが<% %>コード用タグ
通常 JavaScript コードを
HTMLに反映させたい時は <script></script>タグ内にコードを書いていきますが
EJS内のコードをHTMLに反映させたい時は<script></script>タグを使わず<% %>タグを使って JavaScript コードを書いていきます
ここでのポイントは、
最終的なゴールは
<% %>内で定義した代数(例： const daisu = "代数")や関数を
<%= %>, <%- %> に出力して
HTML上で見られるようにする事です
例えば
下のサンプルコードの様に
先ずは <% %>内で test_codeという代数を定義して<%= %>内で "このコードが見られます" という出力を出します
<%#下記で代数を定義します%><%consttest_code = "このコードが見られます"%><%=test_code%>先ずは
下記リンクで上記のコードがどんな風に出力されているか試してみて下さい
https://ionicabizau.github.io/ejs-playground/
次に
index.ejs（サーバ側）で下記の様に書くと
<!DOCTYPE html><html><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><title>myFirstEJSapp</title></head><body><div>テスト</div><%#下記で代数を定義します%><%consttest_code = "このコードが見られます"%><%=test_code%><---ここの内容しかHTML上では見られません</body></html>HTML上（クライアント側）に出力されているのは
<%= %>
内の部分だけになり
他のコードは見られません
<html><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>myFirstEJSapp</title></head><body><div>テスト</div>
"このコードが見られます"
</body></html>出力用タグ ( <%= %>と <%- %> ) の違い
<% %>タグ内で定義した代数を<%= %>タグ内で出力出来る様になりました
次は<%= %>タグと <%- %>タグの違いについて説明していきます
<%= %>はタグ内で定義したタグをエスケープして出力する<%- %>はタグ内で定義したタグをエスケープしないで出力する
サンプルコードで説明すると
https://ionicabizau.github.io/ejs-playground/
このリンクで、下記のサンプルコードを試すと
<%#下記で代数を定義します%><%consttest_code = "<p>このコードが見られます<p>"%><%=test_code%><p>このコードが見られます<p>
(<>がエスケープされて上記の状態になる)
といった出力になるのに対して
下記のサンプルコードを試すと
<%#下記で代数を定義します%><%consttest_code = "<p>このコードが見られます<p>"%><%-test_code%><p>このコードが見られます<p>
という風に<p>タグや色んなタグを出力出来るようになり
HTMLの見た目をサーバ側から弄ることが出来るようになります
なのでEJS上で<>タグが使いたい場合は<%- %>
オブジェクト値を確認したり、純粋な出力の値だけを確認したい場合は<%= %>
と使い分ける事が出来ます
include()
incldue()の使い方は
来週書き足しますが
@y_hokkey さんの書いた
を参考にしてみて下さい
今後
2020年12月現在
Qiitaサイト内で
EJS ( 又はテンプレートエンジン ) についての記事を調べていると
勢いがあったのは大体2-4年前までの記事な気がしました
下記の英語の質問箱を見ると
Are template engines still relevant in 2020? - DEV
原因としては
React, Vue, Angular の登場でテンプレートエンジン自体が下火になっている説
フロントエンドの方が人気でバックエンドはあまり人気が無い説
もうテンプレートエンジンの機能をアップデートする必要性があまり無い説
があるそうです
そこで
2020年現在
テンプレートエンジンを使うメリットを考えてみると
- 小規模、パイロットプロジェクトをテスト・デバッグが簡単に出来る
- JAM (JavaScript, API, Markup) stack 人気がきている
といった利点があるらしいです
JAM stackとは (Qiita 記事@ozaki25)
なので
サーバ初心者、特にレンダリングが良く分からない
React, Angular, Vue を触る前の
サーバ側からどうやってHTMLをレンダリングしているか
ちょっといじってみたい人用に
ちょっと小規模テスト・べバッグ用に使いたい人用に
EJS、他テンプレートエンジンは使い勝手が良いのかな？
と思いました
まとめ
来週まとめます
参考リンク & Qiita内トップEJS記事まとめ (2020)
３年以内
テンプレートエンジンEJSで使える便利な構文まとめ - Qiita
@y_hokkey
2017年02月02日に更新
@miwashutaro0611
2018年06月23日
@kamihork
2018年10月07日に更新
３年以上前
gulpで手軽にEJSテンプレートをHTMLに変換 - Qiita
@yuichiroharai
2014年10月15日に更新
@fnobi
2013年07月25日
@oden
2016年03月15日
トップ JavaScript テンプレートエンジン (2020)
"JavaScript template engine 2020"とググった時に出てきた
人気 JavaScript テンプレートエンジン 6 (2020)
| . | Pug (Jade) | Handlebars | Mustache | doT | EJS | Nunjucks |
|---|---|---|---|---|---|---|
| 記事数 | 11 | 10 | 9 | 9 | 8 | 8 |
| npm | LINK | LINK | LINK | LINK | LINK | LINK |
| github | LINK | LINK | LINK | LINK | LINK | LINK |
| Licenses | MIT | MIT | MIT | MIT | Apache-2.0 | BSD-2-Clause |
| Dependecies | 8 | 5 | 0 | 0 | 1 | 4 |
| Weekly Downloads | 1,121,333 | 7,265,726 | 1,933,955 | 240,792 | 8,145,826 | 294,753 |
| Unpacked Size | 59.7 kB | 2.72 MB | 113 kB | 73.8 kB | 134 kB | 1.74 MB |
| npm内: 人気 | 61% | 67% | 60% | 33% | 80% | 47% |
| npm内: 質 | 63% | 63% | 63% | 75% | 62% | 93% |
| npm内: メンテ | 28% | 33% | 33% | 47% | 33% | 33% |
| npm collaborator | 2 | 5 | 3 | 2 | 1 | 5 |
| github star | 19.8k | 15.7k | 14.3k | 4.6k | 5.1k | 7.1k |
| github used by | 286k | 3m | 215 | 14.1k | - | 121k |
| github contributor | 248 | 175 | 110 | 13 | 113 | 137 |
ソース記事
- Social Network for Programmers and Developers
- 31 Best JavaScript templating engines as of 2020 - Slant
- Openbase
- 7 JavaScript Templating Engines with Code Examples - Developer Drive
- The best open source javascript template engines | Web Design and Web Development news, javascript, angular, react, vue, php
- What good template language is supported in JavaScript?
- 10 Best Open-source JavaScript template engine ( 2019 )
- Templating engines
- GitHub - marko-js/templating-benchmarks: Benchmarking framework for multiple templating engines
- Template Engines in Node JS with Express | EJS Vs Nunjucks
- 15 JavaScript Template Engines for Front-end Development
- Intro to JavaScript Template Engines