Pug文法入門 - どん底から這い上がるまでの記録

この記事は以前書いた記事の続きになります。

www.pytry3g.com

pugは開始タグと終了タグを使わずにタグ名を記述し、インデントと改行で全体を構成していきます。Pugでは変数やif文、ループ文が使うことができます。

この記事ではPugの書き方と文法について勉強したものを書いていきます。

関連リンク
Pug
Pugの書き方
Pugの文法
- 変数
- if文
まとめ

Pug

Pugの導入方法については以前書いた記事で紹介しています。

www.pytry3g.com

Pugの書き方

改行とインデント

Pugは改行とインデントで構造を表現します。HTMLと違って＜＞で囲まずに、タグ名に半角スペースを入れて文字列を書きます。（※全角スペースだとエラーが出ます。）

例えば、以下のような感じです。

  body
    h1 Hello!!!

ここでやっていることは、body要素の中に見出し要素をつくっています。そして、見出し要素のタグ名h1の後に半角スペースを入れ文字列を書いています。

Electronを起動すると以下のような画面が表示されます。

f:id:pytry3g:20180730183923p:plain

生成されたHTMLを見てみると、見出し要素がbody要素に囲まれています。

  <body>
    <h1>Hello!!!</h1>
  </body>

改行とインデントを用いて構造を表現できていることがわかります。

では、以下のようにすると、どうなるでしょう？

  body
    h1 Hello!!!
      p IN
    p OUT

Electronの画面はこうなります。

f:id:pytry3g:20180730184249p:plain

なぜなら、p INは見出し要素h1の次の行でインデントして記述されているために、見出し要素の中にp INが作られているのです。

生成されたHTMLは下のようになっています。

  <body>
    <h1>Hello!!!
      <p>IN</p>
    </h1>
    <p>OUT</p>
  </body>

属性

hrefやsrc、metaといった属性は半角の()の中に記述します。

    meta(charset='utf-8')

クラスとID

クラスは.（ドット）、IDは#で表現します。

  body
    h1 Hello!!!
    .board
      #clip
        
    div.sample
      #sample

これをHTMLにコンパイルすると、

  <body>
    <h1>Hello!!!</h1>
    <div class="board">
      <div id="clip"></div>
    </div>
    <div class="sample">
      <div id="sample"></div>
    </div>
  </body>

コメントアウト

Pugのコメントアウトは２種類あります。

ひとつは、HTMLに残るコメントアウト//、もう一つはHTMLに残らないコメントアウト//-です。複数行のコメントアウトはインデントを使います。

  body
    // HTMLに書き込まれます
    //- HTMLに書き込まれません
    h1 Hello!!!
    .board
      //
        複数行のコメントアウトは
        インデントしまーす
      #clip

HTMLにコンパイルすると、

  <body>
    <!-- HTMLに書き込まれます-->
    <h1>Hello!!!</h1>
    <div class="board">
      <!--
      複数行のコメントアウトは
      インデントしまーす
      -->
      <div id="clip"></div>
    </div>
  </body>

Pugの文法

変数

変数の宣言はこのようにします。 - var 変数名 = データ 半角ハイフン、半角スペースに続いてJavaScriptと同じように変数を宣言します。

- var h = "変態宣言"

変数を参照するには2通りの方法があります。

方法①

#を使う方法。このとき、タグ名と#の間には半角スペースが必要です。

title #{h}

方法②

プログラムでよく見る形。このとき、タグ名と＝、変数と＝の間に半角スペースを入れてはならない。

title=h

サンプルプログラム

index.pug

doctype html
html
  head
    meta(charset='utf-8')
    - var h = "私は変態です。"
    //title #{h}
    title=h
    
  body
    h1 Hello!!!

index.pugからHTMLにコンパイルすると下のようになる。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!--title #{h}-->
    <title>私は変態です。</title>
  </head>
  <body>
    <h1>Hello!!!</h1>
  </body>
</html>

if文

xの中身によって見出しの表示が変わるプログラム

doctype html
html
  head
    include client.pug
    meta(charset='utf-8')
    - var h = "私は変態です。"
    title=h
    - var x = 3
    
  body
    if x === 3
      h1 私は変態です。
    else if x === 4
      h1 あなたは変態です。
    else
      h1 変態宣言

まとめ

Pugの書き方や文法についてほんの少し書いてみました。

正直、変数とかif文の使いどころがわからない。

まだまだ勉強中なので、今後更新していけたらと思います。

関連リンク

Pug