ざっくりとPugについて

某会社の開発環境でPugというテンプレートエンジンを使用していたんですが、Pugってなんぞや??って感じだったのでざっくりとまとめてみました。

Pug基本情報

  • EJSとかと同様のテンプレートエンジン。
  • 昔はJadeとか言う名前だった
  • Jadeは商標登録されていたらしくPugに名前を変えたらしい。(ちなみに読み方はパグ。)
  • 要はHTMLそのまま書くより便利に簡単に書けるようにしたものがPug。

Pugのメリット

  • 普通にHTML書くより楽に書けて便利な機能がある
    • 閉じタグがいらない(これタイプ数が減るから体にやさしくて好き)
    • クラスとid属性はCSSのセレクタ指定と同じでいいなどなど

例えばPugでこう書くと


p.comment コメントやねん!

こうコンパイルされる

<p class="comment">コメントやねん!</p>

閉じタグいらない。素敵。

Pugのデメリット

  • 書き方を覚える必要がある(学習コスト)

感想

覚えるのはめんどくさいけどタイプ数が減ってくれるから指に優しくて好き。

インデントでタグの入れ子を表現するからインデントミスもなくなる気がするし。

参考

Pugの日本語解説。このブログの100倍わかりやすく詳しい。

(説明ではJadeって書かれてるけどPugのgithubから飛んでいるので問題ないはず・・・)

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です