すっかり「古い技術」になってしまったのかもですが、pug(jade)を今更紹介します。
grunt/gulp以降の新習慣
gulp などで html を作るプロジェクトでは、html以外の言語でhtmlを書くという
「謎習慣」があります。
意識高い系が使うオーバーテクノロジー説
何故gulpとかpugとか、そういうややこしい技術を使うの？
**意識高い系（笑）がわざとややこしくしてるんじゃないの？**みたいに言う人もいます。
（いや意識高い系はもう gulp なんか使ってないし。。）
なんでhtmlで書かないのかと言うと・・・
htmlって実は見づらいし、書きにくい。
という一言に尽きると思います。htmlは読みづらい。
htmlに見慣れてる人からすると、「は？何を言ってるのか分からない」となるかもしれませんが、
Node.js前提の世代からすれば、htmlは jquery.min.js と同じ扱いです。
「もはや、読めるものではない」って事です。
Javascriptも生のJSは読みづらいですし、
Stylesheetだって、生のCSSは読みづらいです。
一回作って終わりなら、それで良いのかもしれませんが、最近は
メンテナンスする時に読みやすいように作るのがお作法です。
最近はどう変わってきたのか？
htmlは、変数の処理や、繰り返し処理に対応していないので、全部直書きする必要がありました。
プログラミング的な処理を書けるようにしたのが、「htmlテンプレートエンジン」です。
HTMLテンプレートエンジンって何？
「HTMLテンプレートエンジン」っていうのにもいくつか種類があって、
有名なものでいうと EJSとか、PUGとか、Handlebarsとかありますけど、
学習コストが高いEJSが流行ったので、アレルギーになった人が続出したように思います。
結果的に「使わない人が多数派」という結果になってます。
どういう特徴があるの？
pugは「pug」という拡張子のファイルに書かれています。この後詳しく説明しますが
これは「コーディングを素早くできるテンプレートエンジン」です
記法を覚えるまでは「普通に書いた方が速い」みたいな事を必ず思います。
私もそうでした。
pugを読めない人が沢山アサインされた時、まず最初に「pugやめよう」という話になります。
いやいやいや、ちょっと待って下さい。pugってhtmlを直接書けるの、知ってますか？
便利さが分かってから廃止でも、遅くはないでしょう。
基本形
まず基本的な html を pug で書く場合、どうなるかを見てみます。
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>html</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body id="sample_id" class="sample_class">
<div class="a">Hello world! This is HTML5 Boilerplate.</div>
<script src="js/vendor/modernizr-3.11.2.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
</body>
</html>
↓これをpugで書きます
doctype html
html.no-js(lang='')
head
meta(charset='utf-8')
title html
meta(name='description', content='')
meta(name='viewport', content='width=device-width, initial-scale=1')
link(rel='stylesheet', href='css/normalize.css')
link(rel='stylesheet', href='css/main.css')
body#sample_id.sample_class
.a Hello world! This is HTML5 Boilerplate.
script(src='js/vendor/modernizr-3.11.2.min.js')
script(src='js/plugins.js')
script(src='js/main.js')
「…あまり変わんないのでは？」と思うと思います。この辺では特に違いはわかりにくいです。
pug の 特徴
★<> という記号がなくなっている。その代わりにタグの後ろに()が付いている
★ 閉じタグがない。
★インデントがそろってる。
★ class="sample_class" が .sample_class になっている
★ id="sample_id"が、 #sample_id になっている
★ div class="a" が.a になっている
つまり書き方さえ分かってしまえば「かなり短く書ける」って事です。
省略記述の例
閉じタグがないので、短く書けます。
<div></div>が１番よく使うタグだと思いますが、それを書かなくて良いっていうだけでかなり速い。
（※ class も id も付けない場合は上の図の例と同じく p と同じように div を書く必要があります。）
テキストの書き方
テキストは、タグの後ろに半角スペースを空けて書く事もできますし、
改行する場合はインデントを深くした上で「| 」を入れます。
html属性の書き方
img タグみたいに html の中に色々な属性がある場合はこうなります。これは短くなりません。
インデントは厳しい
閉じタグがない代わりに、インデントは常に正しくして下さい。
VSCodeならAlt+Shift+Fで整列できますので。
extendsが使える
pugは、extendsが使えます。bodyの外側をインクルードするイメージ。
htmlで毎回、同じようなメタタグとか js とか書いてるんだけど、ぶっちゃけコレ毎回コピペするの面倒ですよね。
同じなら省略したいですよね。ということで。
この色を塗った部分をextendで省略するとこうなります（下図）
_layout_frame に、bodyの外側を書いておき、
bodyの中にblock contentと書いておく事で、面倒な<head>などの記述を省略できます。
毎回繰り返し使う body の外側を extends に書いておくことで、毎回書かなくてよくなります。
とはいえ、「タイトルとか、メタタグはページごとに変わるんじゃないの？」って思いますよね。
そんな時は変数を extends したファイル側に variables（変数）として、読み込ませれば良いんです↓
include が使える
include は、ヘッダーやフッターなど、繰り返し使う要素を差し込む時に使います。
コレも、毎回長いヘッダーの中身をわざわざ毎回書く必要がありません。
include すれば、同じようなヘッダーを繰り返し使うことができます。
script
<script>の中身はテキストじゃないので、このようにドットでつないで書きます。
<script>
alert("test");
</script>
↓
script.
alert("test");
style
styleも同様です。
<style>
.hoge {font-size: 100%;}
</style>
↓
style.
.hoge {font-size: 100%;}
改行を￥マーク、\バックスラッシュで打ち消せる
Javascriptと同じなので、改行を改行だと思わせないようにするには、
文末に\（Windowsの場合は¥マーク）を入れると改行を無効化できます。
p
|これは\
改行を\
打ち消すサンプル\
です。
他の機能もあるけど
それ以外にも if 文と for 文が使えます。
- var name = 'fuga'
if name=='hoge'
p ほげです。
else if name=='fuga'
p ふがです。
else
p ぴよです。
- for (var x = 0; x < 3; x++)
li item#{x}
json を include する事で テキストとコードを分離することもできます。
var text ='エスケープ処理する'
var text2 ='エスケープ処理しない'
p #{text}
p !{text2}
機能はあるのですが、やりすぎると直感的ではなくなり、複雑化する可能性もあります。
それをやる事で pug がキライになっちゃう可能性もあるので、
まずは省略記法だけ使ってみて下さい。慣れたら使ってみて下さい。
コンパイラがない？
gulpとかpugをはじめて使う人が必ず言うのが、
「htmlどこ？」っていうセリフです。htmlはpugを編集しただけではでてきません。
ビルド（変換作業）する必要があります。
ターミナルを使います。ターミナルのおまじないを教えておきます。
$ cd project （現在のプロジェクトの直下フォルダ）
$ npm install （必要なライブラリを揃える）
$ npm run dev （ローカルで実行し、ブラウザに映す）
$ npm run build （変換されたファイルを書き出す）