IT the Best

はてなブログのカスタマイズ情報を中心に、WEBデザインからJavaScriptまでWEB系の開発情報を発信します。便利ツールや暇つぶしのゲームなど開発物も公開します。

【Jade】記述方法-HTMLの書き方との違いをまとめました。id,class,属性など | jade(pug)の記述方法

当記事では、Jadeの初歩的な記述方法についてHTMLと比べながらまとめていきます。

 

 

Jadeとは

Jade は JST (JavaScript Templates) の一つであり、HTML を書くための軽量マークアップ言語 である Haml に影響を受けた JavaScript テンプレートエンジンでもあります。

ちなみにこの Haml は近年爆発的に普及をみせる CSS プリプロセッサ Sass の記法の元にもなっています (Sass の中でも普及率が高いのは SCSS 記法の方ですが)。

 https://gist.github.com/japboy/5402844

 

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

f:id:Surprisedblog:20200419114034p:plain

 

 

例2

HTML

f:id:Surprisedblog:20200419121338p:plain

 

Jade

f:id:Surprisedblog:20200419121153p:plain

 

例3

pre要素など、HTMLタグの中身に改行を含めたい場合や、<br>を含めたい場合、|(パイプ)を使います。

HTML

f:id:Surprisedblog:20200420000641p:plain

 

Jade

f:id:Surprisedblog:20200419230805p:plain

 

出力されるHTML

f:id:Surprisedblog:20200419230910p:plain