Node.js

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

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

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

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

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

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

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

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

npm install ejs

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

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

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

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

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

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

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

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

基本のタグ

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

コメント用タグ

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

※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>

  <% } %>
出力用タグ

出力する時は「<% = %>」を通常使う

上記のように、画面への表示は、通常エスケープした「<% = %>」で行います。

なぜかというと、エスケープ処理を行わず出力すると、クロスサイトスクリプティング(XSSをされる可能性があります。

クロスサイトスクリプティングは、サイバー攻撃の1つで、入力フォームなどを入力するさいに、悪意のあるデータを入力してスクリプトを実行させるものです。

詳しくは、下記記事を確認してください。

PHPでhtmlspecialcharsを使ったエスケープ処理をしてみた!クロスサイトスクリプティング(XSS)って知ってますか?? クロスサイトスクリプティングは、サイバー攻撃の1つで、入力フォームなど...

 

では、「<%- %>」を利用することがないかと言えばそんなことありません。
「<%- %>」の利用例としては、include() を使って、共通部分をまとめる時に利用します。

利用方法としては、下記記事でinclude()を使うところで解説しています。

Node.jsで共通する部分をまとめる方法をわかりやすく解説この記事では、Node.jsのプロジェクトで共通する部分をまとめる方法について解説します。 なお、共通部分をまとめるには、Node...