【pug】pugで詰まったところまとめ

初めに

pugの記法で自分が詰まった箇所をアウトプットを兼ねてまとめました。他の記事にて既出のものばかりなので目新しいものはありません。pugの書き方で抑えておきたいことに出会う度に追記していこうと思います。

pug記法まとめ

1. デザインの場合分け

あるパラメータを参照してデザインの場合分けを行いたい時に、以前まで1つのclass名をつけるのに下記のようにif文で大きく括っていました。

失敗例

if hoge
  .content.hoge-class
    .content-body
else
  .content
    .content-body

if文の条件式がtrueだった場合にはcontentクラスにhoge-classを付与してあげることでデザインを変えていました。上記の例だとまだ内容が短いので許容範囲内ですが、それ以降の行が長くなるにつれかなり可読性を悪くしていて何か対応策はないか探していました。
そこで下記のようにdivのパレンティス内でclassを指定し、なおかつ三項演算子を使ってclassの出し分けを行いました。

成功例

div(class = hoge ? 'content　hoge-class' : 'content')
  .content-body

以降のコードを丸々記述せずにすみ、スッキリ書くことができました。class名の書き方が普段のドット始まりではないことに注意します。これでhoge-classにcssを当ててあげることでデザインの場合分けをすることができます。

2. requiredやcheckedなどの場合分け

次はrequiredやcheckedなどの属性の場合分けです。初めは条件によってrequiredという文字列か空文字を渡そうとしていたのですが、全てtrue判定となってしまいました。

失敗例

- const isRequired hoge ? 'required' : ''
input(type='text', name='example', isRequired)

下記のように変数にtrue、falseを格納し、requiredに対して渡してあげることで出し分けができるみたいです。

成功例

- const isRequired hoge ? true : false
input(type='text', name='example', required=isRequired)

先程の1のclass名の時もそうでしたが、パレンティス内ではJavaScriptの記法を普通に使うことができるみたいですね。全てが使用できるかどうかはわかりませんが。。。

まとめ

自分の暗記用、アウトプット用にまとめたので拙い説明になっているかもしれませんが、同じ内容で困っている方の助けになれば幸いです。今後も便利そうなものを発見しましたら都度更新していこうと思いますのでよろしくお願いします。