かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

Pug 出力するコメントに変数を使いたい

pugでHTMLを生成する時、変数をコメントに含めて出力するのに少しハマったのでメモ

変数をコメントに含める方法

- var hello = "world";
<!-- hello #{hello} -->
| <!-- hello #{hello} -->

<!-- hello world -->
<!-- hello world -->

又はpugの文字列展開の方法を使って

- var hello = "world";
!= `<!-- hello ${hello} -->`

<!-- hello world -->

NG集

- var hello = "world";
<!-- hello ${hello} -->      // <!-- hello ${hello} -->
`<!-- hello #{hello} -->`    // ERROR
| <!-- hello ${hello} -->    // <!-- hello ${hello} -->
|= <!-- hello ${hello} -->   // = <!-- hello ${hello} -->
! <!-- hello ${hello} -->    // ERROR
!= "<!-- hello #{hello} -->" // <!-- hello #{hello} -->
!= `<!-- hello #{hello} -->` // <!-- hello #{hello} -->
// hello #{hello}            // <!-- hello #{hello}-->
// `hello ${hello}`          // <!-- `hello ${hello}`-->
//= hello #{hello}           // <!--= hello #{hello}-->
//= `hello ${hello}`         // <!--= `hello ${hello}`-->
//!= `hello ${hello}`        // <!--!= `hello ${hello}`-->
//= hello                    // <!--= hello-->

jadeからpugになって文字列展開は#{var}から`${var}`に変わったはずなのですが、コメントの出力に関しては${var}を使うには != `<!-- ${var} -->` としなければならないので、<!-- #{var} -->とした方が楽そうです。(コメント部分とそうでない部分とで書き方が異なるので少し混乱しそうですが...

GitHub内でも議論があるようですが、//= var とかで出力できるようになって欲しいかなーと思いました。


コメント力―「できる人」はここがちがう (ちくま文庫)

コメント力―「できる人」はここがちがう (ちくま文庫)