LogoMark.png

Node.js/TemplateEngine

Node.js|TemplateEngine


テンプレートエンジンとは

テンプレートエンジンとは、テンプレートファイルと呼ばれる HTMLの雛形に、<% %> や {{ }} などのスクリプトデリミタ*1を使って書かれた変数部分にデータを埋め込んでHTMLを生成する仕組みです。テンプレートファイルは、サーバーにリクエストがある都度必要なデータを読み込んで HTMLに変換・応答します。Node.js で利用できるテンプレートエンジンには以下のようなものがあります。テンプレート特有の表現があるので、それぞれ、学習コストがかかります。




EJS で体験

EJS の概要

以下、実際に簡単なプロジェクトを作ってみましょう。

プロジェクトの準備

プロジェクトの初期化(package.json の生成)

package.json はパッケージのバージョン情報を保持したJSON形式のデータで、この存在によってフロントエンドで使用するパッケージのバージョン管理を一元化することができます。

EJS のインストール

$ npm install ejs

.ejsファイルの作成

myProject フォルダに以下のコードを template.ejs として保存します。

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <title><%= title %></title>
</head>
<body>
  <%- heading %>
  <ul>
    <% arr.forEach(function(val) { %>
    <li><%= val %></li>
    <% }) %>
  </ul>
</body>
</html>


index.js (サーバー)の作成

myProject フォルダに以下を index.js として保存して下さい。
index.js は、 package.json に記載された "main": "index.js", のことです。
Node.js で実行させるファイルになります。

var http = require('http');
var fs = require('fs');
var ejs = require('ejs');

var temp = fs.readFileSync('./template.ejs', 'utf-8');

var server = http.createServer(function(req, res) {
  // 第一引数:テンプレート、第二引数:値
  var data = ejs.render(temp, {
    title: 'SampleSite',
    heading: '<h1>EJS Sample</h1>',
    arr:['美術', 'デザイン', '写真']
  });
  res.writeHead(200, {'Content-Type': 'text/html'});
  res.write(data);
  res.end();
});

//Localhost の 8000 ポートで待機
server.listen(8000);
console.log('Server running at http://127.0.0.1:8000. QUIT > [CTRL + C]');


起動と動作確認

起動するには、node コマンドを使う方法と、package.json に起動コードを書いて npm コマンドを使う方法があります。

参考:package.json のプロパティー

PAGES

GUIDE

TOOL

DATA


*1 スクリプトデリミタ(script delimiter)とはスクリプトにおける開始と終了の合図を使って具体的なデータを埋め込むための仕組みです。
Last-modified: 2019-10-15 (火) 17:43:48