Webの勉強はじめてみた その24 〜テンプレートエンジン〜

N予備校の「プログラミング入門Webアプリ」を受講しています。
今回は第3章16節です。

テンプレートエンジン

:::note テンプレートと文字列とプログラムを組み合わせることで、 静的なユーザーインタフェースのデータである HTML を動的に出力できるライブラリのこと :::

静的なページに変数を入れてそれをベースにして動的なページにしようと言う認識。

PUGを使う

Dockerfileに記述

RUN yarn add pug@2.0.4
RUN yarn global add pug-cli

雛形となるform.pug

doctype html
html(lang="ja")
  head
    meta(charset="UTF-8")
    title アンケート
  body
    h1 どちらが食べたいですか？
    form(method="post" action=path)
      span 名前: 
      input(type="text" name="name")
      input(type="radio" name="favorite" value=firstItem)
      span #{firstItem} 
      input(type="radio" name="favorite" value=secondItem)
      span #{secondItem} 
      button(type="submit") 投稿

インデントを忘れると入れ子構造にならないので注意。

文字列にはspanを使うか、| 文字列とする。
変数は、#{変数名}とする。

index.jsで動的なページにする。

const pug = require('pug');
/**
 * アンケートの表示アイテムを変更する
 * @param {String} enURL アンケートURL
 * @param {Object} res HTTPレスポンス
 * @param {String} first アンケート内容1
 * @param {String} second アンケート内容2
 */
function enquetesChange(enURL, res, first, second){  
  res.write(pug.renderFile('./form.pug', {
    path: enURL,
    firstItem: first,
    secondItem: second
  }))  
}

pug.renderFileでpugファイルがHTML形式に出力される。
http.createServerメソッド内で呼び出し。

        const yaki_shabu = '/enquetes/yaki-shabu';
        const rice_bread = '/enquetes/rice-bread';
        const sushi_pizza = '/enquetes/sushi-pizza';

        switch(req.url){
          case yaki_shabu:
            enquetesChange(yaki_shabu, res, '焼肉', 'しゃぶしゃぶ');
            break;
          case rice_bread:
            enquetesChange(rice_bread, res, 'ごはん', 'パン');
            break;
          case sushi_pizza:
            enquetesChange(sushi_pizza, res, '寿司', 'ピザ');
          default:
            break;
        }                 

まとめ

例えば素のphpで書こうとするとちょっと面倒なところがかなり便利に書ける。 PUGってどれくらい使われてるんだろうか。 さて、次回はHerokuです。