テンプレートをレンダリングしてHTMLを出力する
Pugはnpmライブラリのテンプレートエンジンです。
テンプレートファイルに従ってHTMLファイルを生成してくれます。
テンプレートは簡易記法が使えるのでHTMLを直書きするよりも楽です。
また、テンプレート内で変数を展開したりループや条件分岐などのプログラム処理ができます。
Javascriptの配列やオブジェクトを渡して動的にHTMLファイルを生成できます。
とりあえず自分がよく使う機能をまとめておきました。
PugはExpresssのようなWebアプリケーションフレームワークから利用することが多いみたいですが、ここでは node スクリプト名 で呼び出しています。
Pugの最もシンプルな使い方は以下のような感じです。
単純にテンプレートをHTMLに変換するだけ、変数の差し込みは行っていません。
//インストール
npm install pug
//テンプレートファイル"template.pug"があると仮定
//pug.js
const pug = require('pug');
console.log(pug.renderFile('template.pug');
//実行
node pug.js
で、テンプレートをHTMLに変換して表示Pugテンプレートの書き方。<> や閉じタグは不要，入れ子はインデントで表現する
Pugテンプレートはタグ名だけ書けば済みます。閉じタグもいらないので楽です。
インデントをつけることで親子関係を表現します。
タグ以外のテキストはタグに続けて書けばタグで挟まれて出力されます。
テキストはインデントと縦棒"|"をつけて複数行に分けて書くこともできます。
改行は br です。
右側の空白とかもそのまま出力されるので注意しましょう。
あとインデントをミスるとエラーや事故のもとになります。
//テンプレート
html
head
sytle
body
div
p テキスト
p
|テキスト
br
|続き
script
// 結果
<html>
<head>
<sytle></sytle>
<body>
<div>
<p>テキスト</p>
<p>テキスト<br/>続き</p>
</div>
<script></script>
</body>
</head>
</html>
コメントは // スラッシュ2つ。HTMLに書き出したくないコメントは//-
Pugテンプレート内のコメントは // スラッシュ二つもしくは //-です。
インデントを使ってブロックコメントも書けます。
// HTMLに書き出される
//- HTMLに書き出されない
//
ブロックコメント
・・・・・
//-
ブロックコメント
・・・・・・属性は（）の中に書く
タグに属性を着けたいときには、タグ名に（）をつけてその中に書きます。
//テンプレート
div(class="myclass",id="myId",name="myname")
//こんな風に行を分けて書くこともできる
div(
class="myclass",
id="myId",name="myname"
)
//結果
<div class="myclass" id="myId" name="myname"></div>スタイル属性はオブジェクトみたいに{ }でくくって書く
Style属性を書く時には、{ } で囲んでJavascriptオブジェクトのように書きます。
//テンプレート
div(style={color: 'red', background: 'green'})
//結果
<div style="color:red;background:green;"></div>pugテンプレート内で変数（Javascript）を使う
変数を使って動的なHTMLを生成できるのがPugの最大の特徴です。
先頭にハイフンを付けた行はJavascriptとして解釈されます。
Javascript変数をpugで使う時は#{変数名}のように書きます。通常テキストの間に#{変数名}と書けば変数の値を埋め込めます。
// pugテンプレート
// 先頭にハイフンを付けるとjavascriptとして解釈される
- const arg = 123
p resutl:#{arg}
//インデントで複数行のjavascriptをまとめて書ける
-
let arg2 = 456;
arg2 = arg + arg2;
p resutl:#{arg2}
//結果
<p>result:123</p>
<p>resutl:579</p>あるいはタグ名の後ろに = イコールを付けると何も付けなくても変数として解釈されます。
この場合は四則演算や文字列の連結も行えます。
-
data1 = 123
data2 = "ABC"
//data1を2倍にして文字列と連結
p= data1 * 2 + ":" + data2
//結果
<p>246:ABC</p>class、IDはCSS的に書ける。属性に変数を使うときは（）内に変数を書く
classやidを静的に指定する時にはcssセレクタ的な記法が使えます。
div.class_name
div#id_name
結果
<div class="class_name"></div>
<div id="id_name"></div>classやid名を変数で動的に指定したいときには属性を記述するときの（）やバッククオートを使います。
属性に変数を使う時も同じ書き方で行います。バッククオートは（）の中でしか使えないみたいです。
- var name="hoge"
div(class=name)
div(id=`${name}`)
結果
<div class="hoge"></div>
<div id="hoge"></div>
styleタグを書く
pug内にstyleタグを書く時は以下のように行末にドットを付けます。
style(type="text/css").
.test {
font-size:24px;
}
p(class="test") テスト
Javascriptから変数（JSON）を受け取る
JavascriptからPugにデータを渡すことができます。
データはpug.renderFileの引数optionsとして渡します。
テンプレート内ではoptionsで指定した名前（キー）で参照できます。
受け取った変数は #{変数名}で展開できます。
配列はeachでひとつずつ取り出すこともできますし、#{array[1]}のように直接指定することもできます。
オブジェクトの場合は#{obj.key}のように参照できます。
配列は each datum in data のようにして繰り返し処理できます。
//Javascript
const pug = require('pug');
const obj = [
{ name: "hoge", value: 123 },
{ name: "fuga", value: 456 }
];
options = { pretty: true, data: obj };
//pretty:trueはHTMLに読みやすいように改行を入れるオプション
console.log(pug.renderFile('template.pug',options));
//template.pug
each datum in data
div
p
span name = #{datum.name} ,
span value = #{datum.value}
//配列の直接指定もできる
#{data[1].name}
繰り返し for , each , while
繰り返しにはfor、each、whileがあります。
forループはJavascriptのforとPugの構文を組み合わせて使います。
See the Pen Untitled by Ryoji Kimura (@ryjkmr) on CodePen.
eachループは配列を順番に取り出して処理します。indexも取得できます。なぜか書く順番はvalueよりindexが後です。
See the Pen each Loop of Pug by Ryoji Kimura (@ryjkmr) on CodePen.
eachの後にelseを書くと、配列が空だった場合の処理を記述できます
See the Pen Pug each emptly array by Ryoji Kimura (@ryjkmr) on CodePen.
whileループも使えます。
See the Pen while Loop of Pug by Ryoji Kimura (@ryjkmr) on CodePen.
条件分岐
ifとcaseがあります。
ifはほぼJavascriptと同じように使えます。else、else ifも使えます。
See the Pen pug test by Ryoji Kimura (@ryjkmr) on CodePen.
caseはJavascriptのswitch文と似ています。switch~caseではなく、case~when文です。
See the Pen Pug case by Ryoji Kimura (@ryjkmr) on CodePen.
外部ファイルを挿入する include
includeを使うと任意の位置に外部ファイルを挿入できます。
定型のhead要素とかはincludeすると楽です。複数のHTMLファイル感で共通部品化してもよいでしょう。
挿入するファイルはpugテンプレート、プレーンテキスト、js、css、htmlなど基本的にはなんでもOKみたいです。
PugファイルはHTMLに変換して挿入されます。
パスも指定できます。
html
include includes/head.pug
style
include style.css
body
script
include script.js