pugの書き方、使い方（変数＆配列編）

7567 ワード
HTML pug HTML テキストリンク

pugをガッツリ使ったプロジェクトに入ったことがなく
ついにその時がきていくつかハマったのでメモがてらにまとめてみました。

変数の指定方法

var、let

上書き可能な変数を指定できる。
指定してあるファイルと別のファイルでも上書きが可能。
ハイフン＋改行＋インデントでいちいちハイフンを書かなくて済む
varも省くことができる
テンプレートリテラル方式で変数と文字列を繋げることができ、その時は${XXX}で呼び出し
文字列として単純に吐き出す時は#{XXX}で呼び出し

-
  var person1 = "羽川翼"
  person2 = "戦場ヶ原ひたぎ"
  test = `${person1}＆${person2}` // test = 羽川翼＆戦場ヶ原ひたぎ
  person1 = "委員長" // person1 = 委員長

//- ↓pugでの指定の仕方
p #{person1}

//- ↓吐き出されるHTML
<p>委員長</p>

cosnt

上書きできない変数を指定できる
上書きしようとするとエラーがでる
varのようにconstを省くことはできない。省くと上書き可能な変数が出来上がる。

- const person3 = "千石撫子"
  const person4 = "神原駿河"

配列の指定方法

配列・連想配列（オブジェクト）も操作可能

配列・連想配列

//- ↓配列
- var girls = ["shinobu","mayoi","yotsugi"]

//- ↓連想配列（オブジェクト）
-
  var array3 = {
    neko:"羽川翼",
    kani: "戦場ヶ原ひたぎ",
    saru: "神原駿河",
  }

連想配列はハイフン＋インデントの書き方をしないとエラーになる（らしい…）

//- このように書くとエラーになる
- var array3 = {
  neko:"羽川翼",
  kani: "戦場ヶ原ひたぎ",
  saru: "神原駿河",
}

配列の中に連想配列（オブジェクト）

-
  const array4 = [
    {
      name: "戦場ヶ原ひたぎ",
      kaii: "蟹"
    },
    {
      name: "神原駿河",
      kaii: "猿"
    },
    {
      name: "千石撫子",
      kaii: "蛇"
    },
  ]

連想配列の中に連想配列

なんか大量にデータだけ持たせて、その中から対象のデータだけ取り出したい…みたいな…

-
  var array5 = {
    nadeko: {
      name: "千石撫子",
      kaii: "蛇",
      feature: "中学生",
    },
    mayoi: {
      name: "八九寺真宵",
      kaii: "蝸牛",
      feature: "小学生",
    },
    shinobu: {
      name: "忍野忍",
      kaii: "鬼",
      feature: "吸血鬼",
    },
    yotsugi: {
      name: "斧乃木余接",
      kaii: "憑藻神",
      feature: "人形",
    }
  }

条件分岐

if文

JS同様の使い方ができる。もちろんelseも使用可能。
if文の条件にあう場合に吐き出したいソースはインデントが必要。
親要素がある場合、if文自体にもインデントが必要。

  div
    if person1 === '委員長'
      p 羽川翼
    else
      p 誰でしょう？

case

javascriptでいうswitch文

  div
    case person1
      when '委員長'
        p 羽川翼
      when '主人公'
        p 阿良々木暦
      when 'ヒロイン'
        p 戦場ヶ原ひたぎ
      when '詐欺師'
        - break
      default
        p 誰でしょう？

この場合、person1が委員長の場合

  <div>
    <p>羽川翼</p>
  </div>

とコンパイルされ、
”詐欺師”の場合

  <div>
  </div>

何も吐き出されない結果になります。

繰り返し処理

each

先述の配列を取り出してみます。

単純な配列
//- ↓配列
- var girls = ["shinobu","mayoi","yotsugi"]

//- ↓pug
ul
  each girl in girls
    li!= girl

//- ↓HTML
  <ul>
    <li>shinobu</li>
    <li>mayoi</li>
    <li>yotsugi</li>
  </ul>

li!= girl
この「！マーク＋イコール」は取り出したアイテムをコードとして埋め込んでくれます。
なので、例えば"shino<br>bu"のような配列の場合、<li>shino<br>bu</li>
というHTMLが吐き出されれます

配列の中に連想配列
-
  const array4 = [
    {
      name: "戦場ヶ原ひたぎ",
      kaii: "蟹"
    },
    {
      name: "神原駿河",
      kaii: "猿"
    },
    {
      name: "千石撫子",
      kaii: "蛇"
    },
  ]

//- ↓pugでの取り出し方
ul
  each item,index in array4
    li(class=`item${index+1}`)!= item.name
      span 怪異は#{item.kaii}

//- ↓吐き出されるHTML
  <ul>
    <li class="item1">戦場ヶ原ひたぎ<span>怪異は蟹</span></li>
    <li class="item2">神原駿河<span>怪異は猿</span></li>
    <li class="item3">千石撫子<span>怪異は蛇</span></li>
  </ul>

配列のなかにオブジェクトの場合が一番使用する頻度が多い気がします。。
配列で取り出したアイテムは変数同様に#{とりだしたアイテム}で文字列として書き出し可能
属性も配列回すごとに変えたいよって時も大丈夫
each文ではindex番号も取得できるので上記のように連番でクラスを付与するなんてことも可能

連想配列の中に連想配列
-
  var array5 = {
    nadeko: {
      name: "千石撫子",
      kaii: "蛇",
      feature: "中学生",
    },
    mayoi: {
      name: "八九寺真宵",
      kaii: "蝸牛",
      feature: "小学生",
    },
    shinobu: {
      name: "忍野忍",
      kaii: "鬼",
      feature: "吸血鬼",
    },
    yotsugi: {
      name: "斧乃木余接",
      kaii: "憑藻神",
      feature: "人形",
    }
  }
- var girls = ["shinobu","mayoi","yotsugi"]

//- ↓上記の配列から幼女と少女と童女（変数girls）を取り出したい。
p 幼女と少女と童女を取り出したい。
ul
  each girl,index in girls
    li.item(id=`${girl}` class=`item${index+1}`)!= array5[girl].name

//- ↓吐き出されるHTML
  <p>幼女と少女と童女を取り出したい。</p>
  <ul>
    <li class="item item1" id="shinobu">忍野忍</li>
    <li class="item item2" id="mayoi">八九寺真宵</li>
    <li class="item item3" id="yotsugi">斧乃木余接</li>
  </ul>

配列で指定したデータだけを表示させたい…みたいな時に…
連想配列の取り出し方はドットでつなげば取り出せるでしょ！と思って、
array5.girl.nameで取り出そうとするとエラーになります。（キーが日本語でなくても。なぜ？？）
なので、[]での取り出しが無難そうです

参考

https://pugjs.org/api/getting-started.html
https://tr.you84815.space/pug/

まとめ

ややこし〜ですけど覚えれば便利かな〜と思います
mixinについても色々ハマっているので気が向いたら更新します
ミスドの推しはダブルチョコレートです