この記事は以前書いた記事の続きになります。
pugは開始タグと終了タグを使わずにタグ名を記述し、インデントと改行で全体を構成していきます。Pugでは変数やif文、ループ文が使うことができます。
この記事ではPugの書き方と文法について勉強したものを書いていきます。
関連リンク
Pug
Pugの導入方法については以前書いた記事で紹介しています。
Pugの書き方
改行とインデント
Pugは改行とインデントで構造を表現します。HTMLと違って<>で囲まずに、タグ名に半角スペースを入れて文字列を書きます。(※全角スペースだとエラーが出ます。)
例えば、以下のような感じです。
body h1 Hello!!!
ここでやっていることは、body要素の中に見出し要素をつくっています。そして、見出し要素のタグ名h1
の後に半角スペースを入れ文字列を書いています。
Electronを起動すると以下のような画面が表示されます。
生成されたHTMLを見てみると、見出し要素がbody要素に囲まれています。
改行とインデントを用いて構造を表現できていることがわかります。
では、以下のようにすると、どうなるでしょう?
body h1 Hello!!! p IN p OUT
Electronの画面はこうなります。
なぜなら、p IN
は見出し要素h1
の次の行でインデントして記述されているために、見出し要素の中にp IN
が作られているのです。
生成されたHTMLは下のようになっています。
属性
href
やsrc
、meta
といった属性は半角の()の中に記述します。
meta(charset='utf-8')
クラスとID
クラスは.(ドット)
、IDは#
で表現します。
body h1 Hello!!! .board #clip div.sample #sample
これをHTMLにコンパイルすると、
コメントアウト
Pugのコメントアウトは2種類あります。
ひとつは、HTMLに残るコメントアウト//
、もう一つはHTMLに残らないコメントアウト//-
です。複数行のコメントアウトはインデントを使います。
body // HTMLに書き込まれます //- HTMLに書き込まれません h1 Hello!!! .board // 複数行のコメントアウトは インデントしまーす #clip
HTMLにコンパイルすると、
Pugの文法
変数
変数の宣言はこのようにします。 - var 変数名 = データ
半角ハイフン、半角スペースに続いてJavaScriptと同じように変数を宣言します。
- var h = "変態宣言"
変数を参照するには2通りの方法があります。
方法①
#を使う方法。このとき、タグ名と#の間には半角スペースが必要です。
title #{h}
方法②
プログラムでよく見る形。このとき、タグ名と=、変数と=の間に半角スペースを入れてはならない。
title=h
サンプルプログラム
index.pug
index.pugからHTMLにコンパイルすると下のようになる。
if文
xの中身によって見出しの表示が変わるプログラム
まとめ
Pugの書き方や文法についてほんの少し書いてみました。
正直、変数とかif文の使いどころがわからない。
まだまだ勉強中なので、今後更新していけたらと思います。