イイダリョウのブログ。JS以前の記事で紹介したテンプレートエンジンPug。Node.jsでトランスパイルできます。このときはタグの省略記法のみだったので今回はもう少しロジック的な変数、for文、if文を試しました。JSとの書き方の比較もしています。クモのようにコツコツとPugのおさらい前回のPugはHTMLタグの省略記だけで、分岐、反復などロジック的な書き方はしていなかった。pugはタグはなくて、閉じタグも不要。インデントによって入れ子を作る。複数行のテキストは「|」を入れる。idは「#」、classは「.」を要素に続けてかく。なんだかSlimとほとんど違いがないような。深い部分はこれから検証していく...。クモのようにコツコツと今回は変数、if文、for文などを使った書き方をしてみたい。プログラミング例題の「FizzBuzz」がちょうど3つの要素が入っているのでPugで再現してみる。JSでFizzBuzzる!FizzBuzzは数字のカウントの中で3の倍数は「Fizz」、5の倍数は「Buzz」に置き換える。Qiitaいくつかの書き方があるが、一番上の「わかりやすさ重視」の例をやってみる。<p>JSで変数、for文、if文を使ってフィズってバズってみた。hogeと書くだけでは最後の結果しか出力しない。【JavaScript】for文の結果を1つずつ出力したい|teratail今回は式の代入=を加算代入+=にしてみた。加算代入+=についてはこちら。MDNPugでFizzBuzzる次にPugを使ってFizzBuzzった。CodePen.こちらはPug上に変数、if文、for文を書いているのでJSファイルの記述は不要。Pugで変数、for文、if文を使ってフィズってバズってみた。変数countに数値「30」h1タグに変数titleを入れるulタグの中でfor文(変数iを1から始める、countに1加えた回数繰り返す、iに1ずつ加算)もし3で割り切れて、かつ5で割り切れたら「フィズってバズった!」さもなくば5で割り切れたら「バズった!」さもなくば3で割り切れたら「フィズった!」それ以外はiを表示する。変数とfor文の頭には-をつける。if文はいらないようだ。for文の条件はカッコがつくがif文の条件はカッコがいらないようだ。