【HTML】PugでFizzBuzzる！（テンプレートエンジンの変数、for文、if文）

以前の記事で紹介したテンプレートエンジンPug。Node.jsでトランスパイルできます。このときはタグの省略記法のみだったので今回はもう少しロジック的な変数、for文、if文を試しました。JSとの書き方の比較もしています。それではいきましょう！

【目次】

Pugのおさらい
JSでFizzBuzzる！
PugでFizzBuzzる
次回EJS、Handlebarsに書き換えてみる！

前回の記事はこちら

※参考：【Emmet, Haml, Markdown, Slim, Pug】HTMLテンプレートエンジン事始め - クモのようにコツコツと

Pugのおさらい

前回のPugはHTMLタグの省略記だけで、分岐、反復などロジック的な書き方はしていなかった。

See the Pen Pug practice 1 by イイダリョウ (@i_ryo) on CodePen.

section
  h1.red Pugの記法
  p 
    | pugはタグはなくて、閉じタグも不要。
    br
    | インデントによって入れ子を作る。
    br
    | 複数行のテキストは「|」を入れる。
  p idは「#」、classは「.」を要素に続けてかく。
  p なんだかSlimとほとんど違いがないような。深い部分はこれから検証していく…。

HTMLタグの角カッコ< >が不要
閉じカッコは不要
インデントでDOMの階層を設定
属性はタグ名のすぐあとに繋げて書く
複数行のテキストは|を入れる

※参考：【Emmet, Haml, Markdown, Slim, Pug】HTMLテンプレートエンジン事始め - クモのようにコツコツと

今回は変数、if文、for文などを使った書き方をしてみたい。プログラミング例題の「FizzBuzz」がちょうど3つの要素が入っているのでPugで再現してみる。

JSでFizzBuzzる！

FizzBuzzは数字のカウントの中で3の倍数は「Fizz」、5の倍数は「Buzz」に置き換える。まずはJSで書いてみる。

※参考：JavaScript で Fizz Buzz - Qiita

いくつかの書き方があるが、一番上の「わかりやすさ重視」の例をやってみる。

See the Pen JS de FizzBuzz by イイダリョウ (@i_ryo) on CodePen.

HTMLコード

<section>
  <h1 class="red">JSでフィズバズる</h1>
  <p>JSで変数、for文、if文を使ってフィズってバズってみた。</p>
  <ul class="fizzbuzz"></ul>
</section>

リスト.fizzbuzzの中でフィズバズる！

JSコード

//DOM
const list = document.querySelector('.fizzbuzz ');

//FizzBuzz関数
function FizzBuzz (count) {
 for (let i = 1; i <= count; i++) {
  if (i % 3 == 0 && i % 5 == 0) {
   list.innerHTML += '<li>フィズってバズった！</li>';
  } else if (i % 3 == 0) {
   list.innerHTML += '<li>フィズった！</li>';
  } else if (i % 5 == 0) {
   list.innerHTML += '<li>バズった！</li>';
  } else {
   list.innerHTML += '<li>' + i +  '</li>';
  }
 }
}

//関数実行
FizzBuzz(30);

変数listでDOM.fizzbuzzを取得
関数FizzBuzzを設定（引数名はcount）
for文、countの数繰り返す
もし変数iの数字が3で割り切れて、かつ、5で割り切れるなら「フィズってバズった！」
さもなくばiが3で割り切れるなら「フィズった！」
さもなくばiが5で割り切れるなら「バズった！」
それ以外はiの数字のリストを生成
関数FizzBuzz実行（引数は30）

なお、innerHTMLは要素の中身を上書きするだけなのでinnerHTML = hogeと書くだけでは最後の結果しか出力しない。対策はいくつかある。

※参考：JavaScript - 【JavaScript】for文の結果を1つずつ出力したい｜teratail

今回は式の代入=を加算代入+=にしてみた。加算代入+=についてはこちら。

※参考：代入演算子 - JavaScript | MDN

PugでFizzBuzzる

次にPugを使ってFizzBuzzった。見た目は同じ。

See the Pen Pug practice 2 by イイダリョウ (@i_ryo) on CodePen.

こちらはPug上に変数、if文、for文を書いているのでJSファイルの記述は不要。

- var title = 'Pugでフィズバズる'
- var count = 30

section
  h1.red #{title}
  p Pugで変数、for文、if文を使ってフィズってバズってみた。
  ul
    - for (var i = 1; i < count+1; i++)
    if i % 3 == 0 && i % 5 == 0
        li フィズってバズった！
    else if i % 3 == 0
        li フィズった！
    else if i % 5 == 0
        li バズった！
    else
        li #{i}