[Sy] Express で EJS を使って「Hello Express!」

2018/02/13

前回 Express を使って「Hello Express!」と表示してみましたが、今回はテンプレートエンジンの EJS (Embedded JavaScript templates) を使って少しだけ View をそれっぽくしてみます。

前回の記事はこちら。

⇒ [Sy] はじめての Express (yarn でインストール＆動作確認)

以下、上の記事で作成した hello-express ディレクトリでの作業を想定して書きます。

1. EJS をインストール

EJS を使うためには、別途 ejs というモジュールをインストールする必要があるので yarn を使ってインストールします。

$ yarn add ejs
・
・
success Saved 1 new dependency.
└─ ejs@2.5.7

2. app.js を編集

前回作成した app.js を以下のように編集します。

const express = require('express');
const app = express();

const port = 3000;

app.get('/', (req, res) => {
  // ↓ ここから
  res.render('index.ejs', {
    title: 'はじめてのexpress',
    content: '<h1>Hello Express!</h1>'
  });
  // ↑ ここまでを編集
});

app.listen(port, () => {
  console.log('listen: ' + port);
});

前回はただ単に Hello Express! という文字列を出力していただけですが、今回はこの後作成する index.ejs というファイルに title と content というパラメータの値を埋め込んで、出来上がった HTML をレスポンスとして返す、という動きをします。

3. index.ejs を作成

新しく views ディレクトリを作成し、その下に index.ejs というファイルを作成します。

$ mkdir views
$ vim views/index.ejs

index.ejs の内容は以下のようにします。

(views/index.ejs)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title><%= title %></title>
</head>
<body>
  <div id="container">
      <%- content %>
  </div>
</body>
</html>

基本は HTML になってます。その中に、先ほど app.js から渡された title と content を埋め込むための記述があります。（今回は EJS の細かい説明はしません）

これでファイルの準備は完了です。

4. 動作確認

前回と同じように起動して、ブラウザで動作確認をします。

以下のコマンドで起動して、

$ node app.js
listen: 3000

ブラウザで http://localhost:3000 にアクセスし、以下のように表示されればOKです。

ソースコードを確認すると、きちんとサーバサイド（Express）で EJS にパラメータが展開されたあと、クライアント（ブラウザ）に HTML としてレスポンスが返されていることがわかります。