IT the Best
当記事では、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なら＃、クラスなら.(ドット)で区切ります。その他の属性はカッコ()の中に記述します。
例１
HTML
<p id="sample" class="sample s-p" style="height:100px;">
HTML要素の中身
</p>
Jade
p#sample.sample.s-p(style="height:100px;") HTML要素の中身
出力されるHTML
例２
HTML
Jade
例３
pre要素など、HTMLタグの中身に改行を含めたい場合や、<br>を含めたい場合、｜(パイプ)を使います。
HTML
Jade
出力されるHTML
