EJSでコンポーネントのインクルードや値の受け渡しなどを試してみる

EJS2020.4.1

最終更新日：2020.4.2 Update!!

Javascript製のテンプレートエンジンであるEJSは、HTMLを扱うのに近い感覚で色々な処理ができるのでとても便利です。今回はEJSで使えるコンポーネントファイルのインクルードや、コンポーネント間での変数の値の受け渡し方法をまとめてみたいと思います。

EJSで基本となるタグの書き方や処理

EJSでは％の記号が入ったタグを扱うことで、その機能を使うことができます。基本的にはJavascriptがそのまま使えるイメージですが、あまり複雑な処理を書きすぎると可読性が下がってしまうので注意が必要です。慣れるまでは少し違和感を感じましたが覚えると簡単です。まずはEJSで使える独自のタグについてです。

<% 〜 %>	Javascriptのコードがそのまま入ります。制御構文や変数定義などに使います。
<%= 〜 %>	文字列を出力する場合に使います。主に変数に入った値の出力時などです。
<%- 〜 %>	HTMLを出力する場合に使います。インクルードする際などに使います。
<%# 〜 %>	EJS内のみで適用されるコメントです。HTMLへの変換後は表示されません。

これらの独自タグは、実際に使う場合にはこのような形で使われます。

<% const hoge = 'hoge'; %>

<%= hoge %>

<%- <span>インクルードされるコンポーネント</span> %>

<%# EJSでのコメントが入ります %>

【条件分岐：if else 文】 Javascriptの時と同じような形になりますが、1行ごとに先ほどの独自タグで囲まれる形になります。条件が複雑になるとかなりコードが読みにくくなるのでその場合は後述するインクルード機能などで分けるなどの工夫が必要です。

<% if(条件式) { %>
 <span>TUREの場合に出力</span>
<% } else { %>
 <span>FALSEの場合に出力</span>
<% } %>

【繰り返し：forEach関数】 配列を扱う際の繰り返し処理も同じく使うことができます。こちらも1行ごとに独自タグで囲む形となります。関数自体はJavascriptのものと全く同じように使えます。

<% 配列.forEach(function (value, index) { %>
 <span>値は<%= value %>で、インデックスは<%= index %>で出力</span>
<% }); %>

これ以外にも、Javascriptで扱えるものはEJS内でも所定の独自タグの中であれば同じように使うことができます。

include()で切り分けたコンポーネントをインクルードする

EJSの大きな機能として、コンポーネントとして切り分けた別のファイルをインクルードさせることができます。その際にはinclude()を使う形になり、引数でインクルードされるEJSファイルを指定します。今回は下記のような構成でコンポーネントを切り分けてみました。

index.ejs
  ┗ components
    ┣ _header.ejs
    ┗ _footer.ejs

上記のうち、HTMLとしてコンパイルされるものは「index.ejs」のみで、他のEJSファイルはインクルードされて呼び出される専用となります。その場合にはファイル名の前にアンダーバーをつけてパーシャルファイルとすることでコンパイルの対象外とすることができます。それでは具体的にインクルードする方法についてみていきます。【index.ejs】

<%- include( 'components/_header.ejs' ); %>
  <main>メインコンテンツ</main>
<%- include( 'components/_footer.ejs' ); %>

まずは呼び出す側となる親コンポーネントのEJSファイルです。タグは「＜％ー％＞」とHTMLを出力する用のものを使います。その中にinclude()関数を設置し、引数には相対パスで呼び出すコンポーネントファイルのパスを指定します。ちなみに「.ejs」の拡張子は省略可能です。【components/_header.ejs】

<!doctype html>
 <html lang="ja">
  <head>
   <meta charset="utf-8">
  </head>
  <body>
   <header>ヘッダーエリア</header>

【components/_footer.ejs】

  <footer>フッターエリア</footer>
 </body>
</html>

そして呼び出される側の子コンポーネントも同じく用意しておきます。親コンポーネントから値を受け継いだ時には、この子コンポーネント内でその値を扱うことができます。これで実際にコンパイルすると下記のようにHTMLファイルが出力されます。【index.html】

<!doctype html>
<html lang="ja">
 <head>
  <meta charset="utf-8">
 </head>
 <body>
  <header>ヘッダーエリア</header>
  <main>メインコンテンツ</main>
  <footer>フッターエリア</footer>
 </body>
</html>

インクルードされたコンポーネントが合体し、1つのファイルとなって生成されています。このように共通パーツをインクルードさせることで、大量のページが必要な場合でも修正コストをコントロールすることが可能です。テンプレートエンジンの強みでもありますね。

include()を使ってコンポーネント間で値の受け渡しを行う

インクルードさせた際には、合わせてコンポーネントへ値を受け渡すことができます。親コンポーネントから受け継いだ値は、子コンポーネント内で出力させたりして扱うことができます。では具体的なコードをみていきます。【index.ejs】

<%
 const pageMeta = {
  title: 'トップページ',
  description: 'トップページの説明文です'
 }
%>
<%- include( 'components/_header.ejs', { meta: pageMeta } )%>
  <main>メインコンテンツ</main>
<%- include( 'components/_footer.ejs' ); %>

まずは呼び出す側の親コンポーネントのEJSファイルです。まずは子コンポーネントに受け渡す値を変数として定義しておきます。ここではページのメタデータをページ側で持たせて、ヘッダーのコンポーネントへ受け渡すような想定になっています。先ほどと同じようにinclude関数でコンポーネントファイルを指定しますが、第一引数で対象となるファイルのパスを指定し、第二引数で受け渡す値を指定します。値が単一の場合にはそのまま変数を入れますが、複数あるなどの場合にはオブジェクトや配列の形にする必要があります。【components/_header.ejs】

<!doctype html>
 <html lang="ja">
  <head>
   <meta charset="utf-8">
   <meta name="description" content="<%= meta.description %>">
   <title><%= meta.title %></title>
  </head>
  <body>
   <header>ヘッダーエリア</header>

次に値を受け取る側の子コンポーネントの中身です。ここでは親コンポーネントからオブジェクトの形で値を受け取っているので、キーを指定して値を参照するようにしています。変数の文字列を出力する形になるので「＜％＝％＞」のタグ内で変数の出力処理を行っています。これで実際にHTMLへコンパイルされたファイルを確認すると、親コンポーネントで設定した値が子コンポーネントへ受け渡されて、文字列として出力されているのが確認できます。【index.html】

<!doctype html>
 <html lang="ja">
  <head>
  <meta charset="utf-8">
  <meta name="description" content="トップページの説明文です">
  <title>トップページ</title>
 </head>
 <body>
  <header>ヘッダーエリア</header>
  <main>メインコンテンツ</main>
  <footer>フッターエリア</footer>
 </body>
</html>

今回はEJSで値の受け渡しやコンポーネントのインクルードについての方法をまとめてみました。EJSにはそのほかにもいろんなことができますが、だいたいEJSを使う理由としてこの2つが挙げられるのではないでしょうか。基本ではありますが、大量のページ量産作業などには威力を発揮するので、ぜひ使いこなして有効に活用してみたいですね。（参考にさせて頂いたサイト）テンプレートエンジンEJSで使える便利な構文まとめ