Node.jsのパッケージEJSのインストール方法と使用方法を解説

この記事では、EJSのインストール方法と使用方法について初心者向けに解説していきます。

まず、EJS(Embedded JavaScrip)ですが、Node.jsのパッケージで、EJSを利用することで、JavaScriptのコードをHTMLの中に埋め込むことができるようになります。

※埋め込むのイメージは、PHPを使うようなイメージです。

【これだけで初心者脱出！】Node.jsの初心者が0から学習するロードマッププログラミングで新しい言語を学ぶ時ってこうゆう悩みが多いですよね！この記事では、こうしたNode.jsの...

1 Node.jsのパッケージEJSをインストール
2 インストールしたEJSを利用する

Node.jsのパッケージEJSをインストール

それでは、EJSをインストールしてきます。

Node.jsのプロジェクトでEJSを利用するには、まずそのプロジェクトにEJSをインストールする必用があります。

インストールは、プロジェクトの「package.json」のあるディレクトリで下記コマンドをコマンドプロンプトで実行します。

npm install ejs

下記のようになれば成功です。

成功すると、下記のように「package.json」にejsが追加されます。

インストールしたEJSを利用する

EJSを利用するには、まず拡張子を「ejs」とします。

EJSの基本タグは下記の４つです。

基本のタグ

<%# %>　//コメント用タグ
<% %>　//コード用タグ
<%= %> //出力用タグ（エスケープ）
<%- %> //出力用タグ（タグ込）

コメント用タグ

コメント用タグ「<% # %>」は、コメントを記述するタグで、開発などでコメントを記入するために使うもので、実際のコードには影響を与えないものになります。

※javascript だと「 // 」　HTML だと「≤!- – – -> 」と一緒。

<%# タイトル %>
<h1>index.ejsです</h1>

コメントなどで実際の画面には表示されない

コード用タグ

コード用タグ「<% 　 %>」は、HTMLのコードの中にJavaScriptのコードを記入していく時に利用します。

JavaScriptの記述はしているものの、このコード自体は、画面に表示されません。このコードで記述した結果を出力したい場合は、出力用タグを使って出力します。

※利用紹介は、出力タグと一緒に紹介します。

出力用タグ

出力用タグ「<% ＝ %>」「<%- %>」は、言葉のとおり、出力したい（画面に表示）させたい時に利用します。

「<% ＝ %>」「<%- %>」の違いですが、「<% ＝ %>」はエスケープして出力した場合に利用し、「<%- %>」エスケープしないで出力します。

※エスケープ処理とは、マークアップ言語やプログラミング言語、スクリプト言語等で文字列を扱う際に、その言語にとって特別な意味を持つ文字や記号を、別の文字列に置き換えることです。例えばHTMLでは、タグの記述に「<」「>」という記号（文字）を使用します。これらの記号をHTMLの中で使うと、Webブラウザはこれらを「タグ記述の記号」とみなすため、文字として表示することができません。そこで「<」を表示する場合には「<」、「>」を表示する場合には「>」という文字列を、HTMLの中に記述します。Webブラウザはこれらのエスケープ文字列を、表示の際に「<」「>」に置き換えて表示します。この処理をエスケープ処理とよびます。

＜利用例＞

<%# 配列を定義 %>

<% const arr = ["太郎","花子","次郎","三郎"] %>

<%#出席番号及び配列から順番に名前を出力 %>

  <% for(let i=0; i<=3 ; i++ ) { %>
    <h3><%= `出席番号${i+1}` %>
      <span><%= arr[i]  %></span>
    </h3>

  <% } %>