はじめに
最近、Webサイトを作成する際にejsを使用したので、使い方をまとめようと思います。
ejsとは
主にJavaScriptで使用されるテンプレートエンジンで、HTMLの中にjavascriptの構文を埋め込むことができます。
インストール
Node.jsがインストールされているか確認する。
以下のコマンドを実行し、バージョンが表示されればインストールされています。
インストールされていない場合はこちらからインストールしてください。
https://nodejs.org/en
node -v
npmがインストールされているか確認する。
以下のコマンドを実行し、バージョンが表示されればインストールされています。
npm -v
インストールされていない場合は以下のコマンドを実行してください。
npm install -g npm
package.jsonを作成する
npm init
ejsをインストールする
npm install ejs
下記のようにpackage.jsonにejsが表示されたら成功です。
記法
ejsを利用するには名前を「views」にしたフォルダを作成し、その中に拡張子を「ejs」にしたファイルを作成します。
コメント用タグ <%# %>
この中にコメントを記述することができます。
HTMLには表示されません。
test.ejs
<%# これはコメントです。 %>
コード用タグ <% %>
この中に、javascriptを記述することができます。
繰り返しや条件分岐なども使用できます。
test.ejs
<% let temp = "Hello World"; %>
forやwhile、for ofなども使用できます。
繰り返し
<% for(let i = 0; i < 5; i++){ %>
//ループさせたい処理
<% } %>
if、switchなども使用できます。
条件分岐
<% if(temp === ''){ %>
//処理
<% }else{ %>
//処理
<% } %>
出力用タグ（エスケープ）<%= %>
この中に、出力したいコードを記述すると、エスケープされて出力されます。
test.ejs
<% let temp = "<p>Hello World</p>";%>
<%= temp %>
出力されたHTMLファイル
<p>Hello World</p>
Chromeの開発者ツールの表示
"<p>Hello World</p>"
表示
<p>Hello World</p>
出力用タグ（エスケープなし）<%- %>
この中に、出力したいコードを記述すると、エスケープされずに出力されます。
test.ejs
<% let temp = "<p>Hello World</p>";%>
<%- temp %>
出力されたHTMLファイル
<p>Hello World</p>
表示
Hello World
おわりに
今回、ejsの使い方を紹介させていただきました。
タグの中にコードを記述するだけなので、結構簡単に使えると感じました。
今回紹介した内容以外にもできることがあるので、機会があれば使ってみたいと思います。
最後まで、読んでいただきありがとうございました。