エンジニアを目指す日常ブログ

日々勉強したことのメモ。独学ですので間違っていたらコメント等で教えてください。

トップ > プログラミングの勉強 > Node.js + ejsでフロントエンドを作成する方法メモ

Node.js + ejsでフロントエンドを作成する方法メモ

プログラミングの勉強 Node.js ejs

はじめに

本記事の目的

前回、Node.jsを利用してWEB APIサーバを立ち上げた。

流れで、テンプレートエンジンを利用してフロントエンドをNode.jsで実装する方法も学んだので、メモしておく。

以下の講座を参考に実施している。
Node.js + Express で作る Webアプリケーション 実践講座 | Udemy

前提

  • Node.jsとnpm（Node.jsのパッケージマネージャ）がインストールされていること。

tomiko0404.hatenablog.com

  • Node.js + Expessを利用してHTTPサーバを立ち上げていること。

前回の記事 tomiko0404.hatenablog.com

テンプレートエンジンを利用しない場合の書き方

画面サーバとしてNode.jsサーバを利用する場合、ブラウザが理解できるようにHTML形式のデータを返してあげる必要がある。

前回学んだ方法で実装しようとすると以下のようになる。

app.js

const express = require("express");

// ポート番号を変数に設定
const portNumber = 8000;

// app変数にexpress関数を設定する
const app = express();

app.get("/", (req, res) => {
    let data = "<!DOCTYPE html>\r\n";
    data += "<html>\r\n";
    data += "<head>\r\n";
    data += "   <meta charset='UTF-8'>\r\n";
    data += "   <title>startup-ay-sugiura</title>\r\n";
    data += "</head>\r\n";
    data += "<body>\r\n";
    data += "  <h1>Hello World</h1>\r\n";
    data += "  <p>ejsを使わずにHTMLをres.send(data)</p>\r\n";
    data += "</body>\r\n";
    data += "</html>";
    res.status(200).send(data);
});

// リクエストを待ち受ける
app.listen(portNumber);
console.log(`PortNumber is ${portNumber}`);

dataにHTMLを1行ずつ追加していき、最後にres.status(200).send(data)を実行している。

node app.jsを実行し、Postmanで応答を確認すると、HTMLが返却されたことがわかる。

Postmanでの確認結果
Postmanでの確認結果

ブラウザでは以下の表示。

ブラウザで表示
ブラウザで表示

テンプレートエンジン（ejs）を使った作成方法

今回はejsを利用する。

テンプレートエンジンも奥が深そう。

参考文献
anken-hyouban.com

ejsのモジュールをインストール

npmでejsをインストールする。

$ npm install ejs --save

ejsファイルを作成する

app.jsと同じ階層に、viewsフォルダを作成し、その中にindex.ejsを作成する。

後で利用するrenderメソッドでは、パスを指定しないとデフォルトでviewsフォルダ配下を見に行くので、このフォルダ構成にしておくこと。

フォルダ構成
フォルダ構成

app.jsでejsファイルを呼び出す

app.jsは以下のように記載する。

//expressをrequireする
const express = require("express");

// ポート番号を変数に設定
const portNumber = 8000;

// app変数にexpress関数を設定する
const app = express();

// app.setでコンフィグを設定する
app.set("view engine", "ejs");

//sendではなくrenderを使う
app.get("/", (req, res) => {
    res.status(200).render("index.ejs");
});

// リクエストを待ち受ける
app.listen(portNumber);
console.log(`PortNumber is ${portNumber}`);

app.set()

コンフィグを設定するメソッド。

app.set("view engine", エンジン名)

res.render()

http.ServerResponseクラスのメソッド。

res.render(viewファイル（viewsフォルダからの相対パス）, locals（引き渡したい値）)

index.ejsにHTMLを記載する

以下のように普通のHTMLを記載してみる。

views/index.ejs

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>サンプルay-s</title>
    </head>
    <body>
        <h1>Hello world</h1>
        <p>ejsでrenderする</p>
    </body>

</html>

問題なくHTMLが返却された。

HTMLが返却された
HTMLが返却された

ejsに外から値を渡すパターンの作成方法

app.jsへの記載

render関数を利用している部分を書き換え、以下のようにする。

//expressをrequireする
const express = require("express");

// ポート番号を変数に設定
const portNumber = 8000;

// app変数にexpress関数を設定する
const app = express();

// app.setでコンフィグを設定する
app.set("view engine", "ejs");

//★renderメソッドにオブジェクトを渡す
app.get("/", (req, res) => {
    res.status(200).render("index.ejs",{title: "ejsに外から変数を渡すパターン"});
});

// リクエストを待ち受ける
app.listen(portNumber);
console.log(`PortNumber is ${portNumber}`);

ejsの文法

出力タグ （エスケープ有り）

<%=と%>でくくると、変数の値をそのまま出力する。 ただし<などはエスケープされる。

<%= title %>

出力タグ（エスケープ無し）

<%-と%>でくくると、変数の値をそのまま出力する。エスケープもされない。

<%- title %>

ejsへの変数の渡し方

res.renderメソッドの第二引数で、オブジェクト形式として引き渡すことができる。

ejsの記載

ejsに<h2>タイトル：<%= title %></h2>を追加。

views/index.ejs

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>サンプルay-s</title>
    </head>
    <body>
        <h1>Hello world</h1>
        <h2>タイトル：<%= title %></h2>
        <p>ejsでrenderする</p>
    </body>

</html>

結果確認

変数で渡した値もHTMLに含まれて返却された。

変数で渡した値もHTMLに含まれて返却された。
変数で渡した値もHTMLに含まれて返却された。

ejs内でJavaScriptを記載するパターンの作成方法

ejsの文法

スクリプト <% %>

<%と%>でくくるとJavaScript扱いとなる。

<% 処理 %>

app.jsの記述

title項目だけでなくtextsフィールド（配列）もejsに引き渡す。

app.js（app.get文だけ記載）

app.get("/", (req, res) => {
    res.status(200).render("index.ejs", {
        title: "ejsに外から変数を渡すパターン",
        texts: [{ text: "テキスト1" }, { text: "テキスト2" }, { text: "テキスト3!" }],
    });
});

ejsの記述

ejs中で、受け取ったtextsフィールドをfor文で繰り返し呼び出し、<li>要素に入れる。 ここで、<li>や</li>は、スクリプトタグ<% %>で囲ってはいけないため、複数のタグを記載する必要がある。

views/index.ejs

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>サンプルay-s</title>
    </head>
    <body>
        <h1>Hello world</h1>
        <h2>タイトル：<%= title %></h2>
        <ul>
            <% for (let data of texts) { %>
                <li><%= data.text %></li>
            <% } %>
        </ul>
        <p>ejsでrenderする</p>
    </body>
</html>

結果確認

結果の確認。for文が実行されて3要素返却された。

for文が実行されて3要素返却された
for文が実行されて3要素返却された

ブラウザでも表示された。

ブラウザ表示
ブラウザ表示

【補足】その他のejs文法

終了タグについて

通常の終了タグは %>だが、 -%>とすると改行を削除して出力される。

<%のエスケープについて

<%という値を返却したいときは、<%%と記載することでエスケープできる。

【参考】ejs以外のテンプレートエンジンの例

ejs以外にも以下のようなテンプレートエンジンがある。

  • pug (jade)
  • hjs
  • hbs

pugはExpressのデフォルトテンプレートエンジンとのこと。 また、昔はjadeと呼ばれていたが、呼び方が変わったらしい。

これらを使いたい場合は（例：hjsを利用）、先ほどのejsを利用した記載から、以下の変更が必要になる。

  • index.ejs　というファイル名を　index.hjs　に変更する
  • app.setの中身を書き換える
app.set("view engine", "hjs");
  • res.renderを書き換える
res.status(200).render("index.hjs",{title: "hjsを利用するパターン"});

おわりに

テンプレートエンジンを利用して、HTMLを返却する方法をメモした。