Node.js 再入門メモ(その 2)

なにこれ

前回の続き。 今回は、テンプレートエンジン EJS を使ってみる。

また、EJS の導入にあたり、パッケージマネージャ npm も使用する。

プロジェクトの作成

まずは、プロジェクトをセットアップするため、ターミナルで以下のコマンドを入力する。

当然ながら [プロジェクトディレクトリ] は適宜読み換えること。 プロジェクト名に使用できない文字がいくつかあるため、もし npm init 実行中にエラーメッセージが出たら注意すべし。

$ mkdir [プロジェクトディレクトリ]
$ cd [プロジェクトディレクトリ]
$ npm init -y

すると、プロジェクトディレクトリ直下に package.json が自動生成される。

package.json
{
  "name": [プロジェクト名],
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

EJS インストール

ターミナルで以下のコマンドを叩く。

$ npm install --save ejs

EJS で Hello World

完全に静的な例。 テンプレートエンジンと言いつつ、EJS の中身は HTML ドキュメントそのままである。

index.ejs
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta http-equiv="content-type" 
      content="text/html; charset=utf-8">
    <title>Hello EJS</title>
  </head>
  <body>
    <h3>Hello EJS</h3>
    <p>すっごーい!</p>
  </body>
</html>

ただし app.js は前回とはやや異なり、EJS の読み込み処理が非同期ではなくなっている。

サーバ起動時に EJS を同期読み込みし、以後リクエストが発生した場合は、読み込み結果を返すようにしている。

app.js
const http = require('http')
const fs = require('fs')
const ejs = require('ejs')

const page = fs.readFileSync('./index.ejs', 'utf8')

let server = http.createServer(
  (request, response) => {
    response.writeHead(200, {
      'Content-Type': 'text/html'
    })

    response.write(ejs.render(page))
    response.end();
  })

server.listen(3000)

変数の流し込み

次に、やや動的な例。

EJS で <%=[変数名] %> というタグを用いると、バックエンドから変数を媒介してフロントエンドに値を流し込むことができる。

app.js で、フロントエンドに流し込みたい変数をオブジェクトに固め、ejs.render() の第2引数に引き渡せばよい。

index.ejs
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta http-equiv="content-type" 
      content="text/html; charset=utf8">
    
    <title>
      <%=pageTitle %>
    </title>
  </head>
  <body>
    <h3>
      <%=sectionTitle %>
    </h3>
    <p>
      <%=sectionContent %>
    </p>
  </body>
</html>
app.js
const http = require('http')
const fs = require('fs')
const ejs = require('ejs')

const page = fs.readFileSync('./index.ejs', 'utf8')

let server = http.createServer(
  (request, response) => {
    response.writeHead(200, {
      'Content-Type': 'text/html'
    })

    response.write(ejs.render(page, {
      pageTitle: "ようこそジャパリパーク",
      sectionTitle: "どったんばったん",
      sectionContent: "おおさわぎ"
    }))
    response.end();
  })

server.listen(3000)

ブラウザの開発者ツールでページのソースを表示すると、確かに変数が設定されていることが確認できる。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta http-equiv="content-type" 
      content="text/html; charset=utf8">
    <title>ようこそジャパリパーク</title>
  </head>
  <body>
    <h3>どったんばったん</h3>
    <p>おおさわぎ</p>
  </body>
</html>