テンプレートエンジンejsの使い方まとめ
静的htmlで大量ページを作ったりした時に便利なejsの使い方を紹介します。
ejsのメリット
最初にejsを使うメリットを以下にまとめます。
- htmlをパーツ化してヘッダーやフッターなどを別ファイルに作れる
- 変数を設定して、それを反映したhtmlが生成できる
- html内でループ処理を書いて楽に記述できる
htmlを大量に量産したり、ちょっと細かいことしてhtmlを生成したい時にejsは便利です。
ejsと他のテンプレートエンジンの比較
pugやslim、Middlemanなどのhtml作る時に使う他のテンプレートエンジンとも比較しました。
- htmlの記述の中に、<%= ejs %>のように記述して書くので簡単（phpと同じ感じ）
- 文法がjavascriptなのでejsの学習コストが少ない
- 学習コストが少ない分、他のテンプレートエンジンに比べて機能が少ない
ejsは他のテンプレートエンジンよりもシンプルに扱うことができます。
ejsの導入
ejsを使用するには、Nodejsが必要です。コンパイルするために、Gulpかnpm scriptが必要になるので使用環境に合わせて各々導入してください。この記事ではGulpでejsを導入する方法を解説します。
以下の外部記事が参考になります。
- Gulp：EJSとSassとgulpで静的HTMLサイトを作る
- npm script：npm-scriptで開発環境を作ってみよう
ejsの使い方
ejsは基本的にhtmlで記述します。で、ejsを使いたい部分だけ、「<% %>」か「<%= %>」か「<%- %>」のどれかで囲ってその中にejsを書けばOK。それぞれの違いは以下に。
- <% %>：Javascriptの変数の宣言やifやforなどのjavascriptの記述をします。
- <%= %>：囲われた中にあるejsの変数の出力を行います（エスケープする）
- <%- %>：囲われた中にあるejsの変数の出力を行います（エスケープしない）
以下に基本的な使い方を掲載しています。と言ってもjavascriptそのままなので、簡単かと思います。
変数を宣言する
<% let text = "テキスト" %>文字を代入
<% let text = "テキスト" %>
<p><%- text %></p><p>テキスト</p>if文
<% let page = "top" %>
<% if(param !== 'top'){ %>
<p>トップ</p>
<% }else{ %>
<p>下層ページ</p>
<% } %><p>トップ</p>for文
let nameList = [
"田中",
"岡本",
"高木"
];
<% for (var i = 0; i < nameList.length; i++) { %>
<li><%= i+1 %>：<%= nameList[i]%></li>
<% } %><li>1：田中</li>
<li>2：岡本</li>
<li>3：高木</li>ejsの中でコメントアウト
<%# htmlに出力されない。ここの中で変数宣言とかしても無効 %>パーツのインクルード
<%# parts/_header.ejsをインクルード %>
<% include parts/_header %>
<%# parts/_header.ejsをインクルード。data='test'という引数を渡す %>
<%- include('parts/_header', {data: 'test'}) %>パーツのインクルードは相対パスで絶対パスにならないので以下のようにやると楽です。
<% var path = './'; %>
<%- include(path + 'parts/_header') %>
<%# インクルードされるのが'./parts/_header'になります。 %>ejsのテンプレートのサンプル
ejsのテンプレートのサンプルを置いておきます。こんな感じにしていくと楽です。
ejsの階層が変わった時は、pathの変数を変更すればOK。
<%# baseMetaにページの基本情報を。 %>
<%
const baseMeta = {
ttl: 'ページタイトル',
desc: 'ディスクリプション',
url: 'test.html',
path: './'
};
%>
<%#
インクルード時に、baseMetaに最初に定義したbaseMetaを渡す。
するとインクルード先で、baseMeta.ttlという風にして使用できる。
%>
<%- include(baseMeta.path + 'parts/_head', {baseMeta: baseMeta}) %>
<%- include(baseMeta.path + 'parts/_header', {baseMeta: baseMeta}) %>
<!-- ここにメインの記述 -->
<%- include(baseMeta.path + 'parts/_footer', {baseMeta: baseMeta}) %>
<%- include(baseMeta.path + 'parts/_footerHead', {baseMeta: baseMeta}) %>インクルード先の例を全部書いても仕方がないので1つだけ書いておきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title><%= baseMeta.ttl %></title>
<meta name="description" content="<%= baseMeta.desc %>">
<link rel="stylesheet" href="<%= baseMeta.path %>/css/index.css">
</head>
<body>baseMetaに色々入れておくとテンプレート先で楽になります。
まとめ：ejsはhtml作るのに便利
ejsを使えば、headerやfooterなどの共通部分をインクルードしてhtmlを量産することができるようになります。
変数やhtmlのテンプレート化ができるようになるので、使ったことない人は使ってみてください。
【読み放題】kindleアンリミテッドで実は技術書が読める
Amazonに、読み放題のkindleアンリミテッドがあるのですが、実は技術書もあります。
技術書は、3,000円とかが当たり前の値段だったりして結構高いのでkindleアンリミテッドで技術書を読むのも結構アリだなと思ってます。
kindleアンリミテッドは月額980円するのですが、全部無料で読むことができるため、本を買うよりお得。
月に1冊技術書を読むのなら、確実に得するので、本で勉強するのが好きな人は、kindleアンリミテッドに入るのがおすすめです。
初回は30日の無料体験ができて微妙ならすぐに解約できるので、一度登録してみるのはアリなんじゃないかと。