HTMLを表示してみる(EJS)

パッケージの管理方法はなんとなく理解できたものの、HTMLの表示方法がわからない私のような方。
テンプレートエンジンEJSを使用したHTMLの表示方法について学習してみます。


EJSをインストールする

では、cherryディレクトリにnpmを使用してEJSをインストールします。

$ npm install ejs

正常に終了すると、node_modulesディレクトリが作成され、その中にejsディレクトリと必要なファイルが出来上がります。準備はたったこれだけ。


とりあえず使ってみる

前回作ったcherry.jsを編集します。

const http = require('http')
const ejs = require('ejs')
const html = ejs.render("<h1>Hello World</h1>")

const hostname = '127.0.0.1'
const port = 3000

const server = http.createServer((req, res) => {
res.statusCode = 200
res.setHeader('Content-Type', 'text/html')
res.write(html);
res.end()
})

server.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`)
})

で、nodeを起動します。

$ node cherry.js
Server running at http://127.0.0.1:3000/

Webブラウザでhttp://127.0.0.1:3000/にアクセスすると、大きなHello Worldが表示されます。


レンダリングする

ただ、これではわざわざejsをインストールした意味がありませんね。
ejsを導入するメリットは、特殊なタグ内に変数や命令文を使用することにより、レンダリングできるところにあります。

const http = require('http')
const ejs = require('ejs')
const html = ejs.render("<h1><%= message %></h1>", {message: "written by ejs."})

const hostname = '127.0.0.1'
const port = 3000

const server = http.createServer((req, res) => {
res.statusCode = 200
res.setHeader('Content-Type', 'text/html')
res.write(html);
res.end()
})

server.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`)
})