最近は早く帰って子供と遊びたい。という思いが強いために仕事の効率化を求めるようになったバナナです。

仕事の割合的に静的サイトを構築することが多いのですが、その時にheaderやfooterはwordpressみたいに共通化したいなー。と思ってて。

headerやfooterに変更があるたびに全部のページを回って修正していくの面倒じゃないですか？

5、6ページならいいんですけど10ページ以上あるともう面倒くさい。

EJSは共通部分をテンプレート化してインクルードすることで修正が楽になったり他にも色々とメリットがあります。

とりあえずバナナ的には「テンプレート化」だけでも楽です。


EJSを使用するにあたって基本的な部分を勉強したので、まとめます。

<% %>

EJS内でJavaScriptを実行することができます。
例えば、条件分岐やループさせてリスト表示するなどの際に使用します。

<%	
  var date = new Date()
  var year = date.getFullYear()
  var month = date.getMonth()+1
  var day = date.getDate()
%>
<p><%= year %>年<%= month %>月<%= day %>日</p>

<p>2019年2月7日</p>

<%= %>

文字列を出力することができる。
変数などを設定しておいて表示させることができる。

<% str ='これは文字列です。' %>
<p><%= str %></p>

<p>これは文字列です。</p>

<%- %>

こっちはHTMLを出力する際に使う。
基本的には<%= %>を使い、HTMLタグを含めて表示したい際に使う。

<% str_html ='<span>これは文字列です。</span>' %>
<p><%= str_html %></p>
<p><%- str_html %></p>

// <%= %>で囲んでいるので、特殊文字が実体参照になっている
<p>&lt;span&gt;これは文字列です。&lt;/span&gt;</p> 

<p><span>これは文字列です。</span></p>

<%# %>

EJSファイル内でのコメントアウト。
<%# %>でかこまれたものは、HTMLに出力されない。

<% str ='これは文字列です。' %>
<p><%# str %></p>
<!-- <p><%= str %></p> -->

<p></p>
<!-- <p>これは文字列です。</p> -->

公式HP

https://ejs.co/

まとめ

これからもっと深くEJSを理解して積極的に効率化していきたいなー。
似たようなテンプレートエンジンで「 Pug 」も触ったことあるけど、書き方が独特なので、実際に仕事で実用するまでに時間かかるなと思って。

ちょっと触ってやめちゃったんですよね。
慣れたらPugのほうが早くコーディングできると思うのですが…。

EJSだとHTMLのまま記述できるのが使いやすくていいですよね。

子供たちと遊ぶためにもパパ頑張るよ。

またね。