クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

【HTML】PugでFizzBuzzる!(テンプレートエンジンの変数、for文、if文)

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

【目次】

前回の記事はこちら

※参考:【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}
  • 変数titleに文字列「Pugでフィズバズる」
  • 変数countに数値「30」
  • h1タグに変数titleを入れる
  • ulタグの中でfor文(変数iを1から始める、countに1加えた回数繰り返す、iに1ずつ加算)
  • もし3で割り切れて、かつ5で割り切れたら「フィズってバズった!」
  • さもなくば5で割り切れたら「バズった!」
  • さもなくば3で割り切れたら「フィズった!」
  • それ以外はiを表示する。

変数とfor文の頭には-をつける。if文はいらないようだ。
for文の条件はカッコがつくがif文の条件はカッコがいらないようだ。
変数を表示するには#{ }に入れる。処理の中には#{ }は不要のようだ。

Pugの記法はこちらの記事にわかりやすくまとまっている。

※参考:Pugの記法まとめ - Qiita

次回EJS、Handlebarsに書き換えてみる!

ということでPugで変数、for文、if文を試してみました。HTMLとJSで書き分けていた文書構造とロジックがテンプレートエンジン一箇所で完結するのは楽ですね。

f:id:idr_zz:20191002082836j:plain

Node.js環境でトランスパイルできるテンプレートエンジン、AltCSS、AltJSには下記のようなものがあります。

  • テンプレートエンジン:Pug、EJS、Handlebars
  • AltCSS:Sass、SCSS
  • AltJS:TypeScript

このうち、EJS、Handlebars以外は過去の記事で紹介しました。(CodePenで対応している機能が対象だった)

※参考:HTMLテンプレートエンジン、AltCSS、AltJSの総まとめ(3記事) - クモのようにコツコツと

SassとPugはカッコが省略されたりインデントで階層を表現している。RubyやPythonと似た書式なのでRubyに慣れてる人には読み書きしやすい。

SCSSとTypeScriptはネイティブのCSS、JSに近い書式。省略記法は不要でロジック的な書き方だけ利用したい場合には有効(実際フロント界隈ではこちらがメインになりつつある?)

HTMLでもネイティブのHTMLに似た書き方のものがないか調べたらいくつかあって、EJS、Handlebarsが定番ぽいです。

次回はPugのFizzBuzzをEJS、Handlebarsの書式に書き換えて比較してみたく思います。それではまた!


※参考:HTMLテンプレートエンジン、AltCSS、AltJSのまとめ
qiita.com