文字

Node.jsについて

Node.jsはJavascriptで構築できるサーバーサイド環境のことです。

近年、AWSなど、クラウドのサーバー環境が充実してきたことにより、サーバーレスなシステム(厳密にはサーバーは構築されている)が人気です。

その筆頭となるのがこのNode.jsで、RubyやPHPなどのいわゆるサーバーサイド言語を使わなくても、Javascriptだけでサーバー構築を行うことができます。

Node.jsについての詳しい解説や、開発環境の構築方法については、以下の記事を参考にしてください。

※この記事では、簡易なWebサイトの開発を通して、Node.jsの使い方を学んでいきます。Javascriptの知識がある方を対象に書いていますので、予めご了承ください。

EJSのインストール

ejsとは、テンプレート機能を実現するNode.jsのパッケージです。

ヘッダーやフッターなど、複数のWebページで共通で使われているコードをテンプレートとしてまとめることで、効率よく開発をすすめることができます。

ejsのインストールには、Node.jsのインストールに含まれているnpmというパッケージマネージャを使います。

それでは、ejsをインストールして、テンプレートを作っていきましょう。

まず、ejstestディレクトリを作成、ejstestディレクトリに移動し、npm initコマンドを打ちます。

$ npm init

すると対話式の入力を求められるので、ここではすべての質問にEnterを押してもらって大丈夫です。

$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install ` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (ejstest) 
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to /Users/tkmr0131/Documents/share/javascript/node/ejstest/package.json:

{
  "name": "ejstest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes) yes

これでnpmの初期化ができました。次に、ejstestディレクトリにejsをインストールします。

※今回はこのプロジェクトのみで使いたいので、-gオプションはつけずにインストールします。

$ npm install ejs
-bash: npm: command not found
tkayanoMacBook-Pro:ejstest tkmr0131$ npm install ejs
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN ejstest@1.0.0 No description
npm WARN ejstest@1.0.0 No repository field.

+ ejs@2.6.1
added 1 package from 2 contributors and audited 1 package in 1.445s
found 0 vulnerabilities

インストールが完了しました。このとき表示されるWARNは無視してもらって大丈夫です。

EJSの使い方

ejsでは、テンプレート上に用意した特殊タグに対して任意の値を埋め込むことができます。

特殊タグには3つの種類があります。

<%= キー名 %> サーバーサイドでキー名に指定した値を書き出します。値にHTMLタグが含まれていた場合はエスケープします。
<%- キー名 %> サーバーサイドでキー名に指定した値を書き出します。値にHTMLタグが含まれていてもエスケープしません。
<% 処理 %>  記述された処理がレンダリングの際に実行されます。その処理はサーバーサイドで行われます。

それでは早速、これらの特殊タグを使って、ejsの使い方を学んでいきましょう。

temp.ejs、index.jsというファイルを作成していきます。

temp.ejs

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <title><%= title %></title>
</head>
<body>
  <ul>
      <!-- サーバーサイドで処理を繰り返してHTMLタグを複数回出力する -->
      <% for(var i = 0; i < 3; i++){ %>
    <li><%= i %></li>
    <% } %>
  </ul>
  <%- contents1 %>
  <%= contents2 %>
  <ol>  
    <!-- サーバーサイド(index.js)で用意した配列を繰り返し出力 -->
    <% arr.forEach(function(val) { %>
    <li><%= val %></li>
    <% }) %>
  </ol>
</body>
</html>

index.js

var http = require('http');
var fs = require('fs');
//EJSを扱うためのオブジェクトを作成
var ejs = require('ejs');

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

var server = http.createServer(function(req, res) {
  //EJSを使ったレンダリング処理
  //第一引数にテンプレート、第二引数に値を連想配列で指定
  var data = ejs.render(temp, {
    title: 'EJSのテスト',
    contents1: '<p>ここはエスケープされない</p>',
    contents2: '<p>ここはエスケープされる</p>',
    arr:['いちご', 'メロン', 'バナナ']
  });
  res.writeHead(200, {'Content-Type': 'text/html'});
  res.write(data);
  res.end();
});

server.listen(1234);
console.log('サーバを起動しました');

nodeコマンドでindex.jsを起動し、localhost:1234にアクセスしてみましょう。

テンプレートを表示できましたね!

これで動的な画面表示を行う場合の処理が効率よく実装できるようになりました。

続編はこちら