Pugの記法はこちらの記事にわかりやすくまとまっている。Qiita次回EJS、Handlebarsに書き換えてみる!ということでPugで変数、for文、if文を試してみました。HTMLとJSで書き分けていた文書構造とロジックがテンプレートエンジン一箇所で完結するのは楽ですね。Node.js環境でトランスパイルできるテンプレートエンジン、AltCSS、AltJSには下記のようなものがあります。テンプレートエンジン:Pug、EJS、HandlebarsAltCSS:Sass、SCSSAltJS:TypeScriptこのうち、EJS、Handlebars以外は過去の記事で紹介しました。クモのようにコツコツとSassとPugはカッコが省略されたりインデントで階層を表現している。RubyやPythonと似た書式なのでRubyに慣れてる人には読み書きしやすい。SCSSとTypeScriptはネイティブのCSS、JSに近い書式。省略記法は不要でロジック的な書き方だけ利用したい場合には有効(実際フロント界隈ではこちらがメインになりつつある?)HTMLでもネイティブのHTMLに似た書き方のものがないか調べたらいくつかあって、EJS、Handlebarsが定番ぽいです。次回はPugのFizzBuzzをEJS、Handlebarsの書式に書き換えて比較してみたく思います。09:03Tweet関連記事2019-10-17【HTML】テンプレートエンジンEJSでFizzBuzzる!(Pugとの比較あり)HTMLテンプレートエンジンの続きです。varとletとconst(再代入、再宣言の挙動の違い)ES2015から新しく加わった変数letとconst。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。