当記事では、Jadeの初歩的な記述方法についてHTMLと比べながらまとめていきます。
Jadeとは
Jade は JST (JavaScript Templates) の一つであり、HTML を書くための軽量マークアップ言語 である Haml に影響を受けた JavaScript テンプレートエンジンでもあります。
ちなみにこの Haml は近年爆発的に普及をみせる CSS プリプロセッサ Sass の記法の元にもなっています (Sass の中でも普及率が高いのは SCSS 記法の方ですが)。
Jadeは、HTMLコードを簡単に記述することができるものです。また、JavaScriptでHTML要素の中身の変更をすることができますが、Jadeはテンプレートエンジンなのでそれも簡単にできます。
Jadeの記述方法
Jadeの記述方法(書き方)は意外と簡単です。
基本的な構文(基本的な書き方)
タグ名#ID名.class名...(属性名=値,...) 中身
HTMLでは中身をタグで囲み、IDなどの属性をタグの中にスペースで区切って記入しますが、Jadeでは中身をタグで囲わず、「<」「>」も必要ありません。属性はIDなら#、クラスなら.(ドット)で区切ります。その他の属性はカッコ()の中に記述します。
例1
HTML
<p id="sample" class="sample s-p" style="height:100px;">
HTML要素の中身
</p>
Jade
p#sample.sample.s-p(style="height:100px;") HTML要素の中身
出力されるHTML
例2
HTML
Jade
例3
pre要素など、HTMLタグの中身に改行を含めたい場合や、<br>を含めたい場合、|(パイプ)を使います。
HTML
Jade
出力されるHTML