コーディングを10倍早くするpug(旧Jade)のメリットとは? | SiTest (サイテスト) ブログ

メニューボタン閉じるボタン

コーディングを10倍早くするpug(旧Jade)のメリットとは?

コーディングをするにあたって、必要な技術はHTMLですよね。
今回はHTMLをpug(旧Jade)に切り替えてコーディングを10倍速を目指すための情報を公開しています。

スポンサーリンク

pug(旧Jade)とは?

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

Haml はSass の記法の元にもなっています。

Jade – Template Engine

pug(旧Jade)導入の5つのメリット

1.閉じタグが不要!

HTMLの場合, <h1>Hello World</h1> のように閉じタグが必要ですよね、

Jadeだと h1 Hello World でOKです。

それだと入れ子にできないんじゃない?という疑問がでてきますね。

大丈夫です。インデントを調節すると下記のように入れ子も可能になります。

doctype html
html
  head
    title Glad Cube
  body
    h1 Hello World

HTMLだと、このようになります。

<!DOCTYPE html>
<html>
  <head>
    <title>Glad Cube</title>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

ちなみにプロパティの記述の仕方は () で括るだけです。

例. <a href="">Hello World</a> -> a(href="") Hello World

2.ClassとIdの記述がCSS記法と同じ!

pug(旧Jade)は、classを「.」 ,idを「#」で示すことができます。

h1.hoge
h1#hoge

HTMLだと、このようになります。

<h1 class="hoge"></p>
<h1 id="hoge"></p>

また、タグを省略することができ、その場合はdivタグにclassもしくはidが付与されて出力されます。

.fuga -> <div class="fuga"></div>
#fuga -> <div id="fuga"></div>

3.変数を扱える!

Javascriptでお馴染みの変数を「-」を前につけることにより扱うことが出来ます。

- var 変数名 = '値'

格納から取り出しまで、使い方次第で便利に使えます。

- var name = 'Ichiro'
p.greeting 僕の名前は#{name}です。

という使い方ができます。
ちなみにコンパイル後は、このようになります。

<p class="greeting">僕の名前はIchiroです。</p>

4.ファイルを分割できる!

pug(旧Jade)ではインクルード文が使えます。
include ファイル名で外部ファイルを挿入することができます。
拡張子を省略した場合はファイル名.jadeと見なして指定したファイルを読みにいきます。

例えば、このようなファイルがあるとします。

[index.html]

<!DOCTYPE html>
<html>
  <head>
    <title>Glad Cube</title>
  </head>
  <body>
    <header>header-bar</header>
    <h1>Hello World</h1>
    <footer>footer-bar</footer>
  </body>
</html>

pug(旧Jade)ならファイルを分割することができます。

[index.jade]

doctype html
  html
    head
      title Glad Cube
    body
      include ./header
      h1 Hello World
      include ./footer
[header.jade]

header header-bar
[footer.jade]

footer footer-bar

このように書くと、指定したファイルを呼び出せ、
1つのファイルを変更するだけで呼び出し元のページを全て変更することが出来ます。
これでメンテンナンスの負担が軽減できます。

5.ファイルを継承できる!

複数のhtmlファイルがあり、headの中身等を何度も同じ記述するのはめんどうです。
そこで使えるのが、テンプレート継承です。
pug(旧Jade)のblockとextendを活用します。

例えば、下記のようなコードがあったとします。

[index.html]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
    <meta name="keywords" content="グラッドキューブ"/>
    <link rel="stylesheet" type="text/css" href="/css/reset.css">
    <link rel="stylesheet" type="text/css" href="/css/common.css">
    <link rel="stylesheet" type="text/css" href="/css/glad-cube.css">
    <script src="/js/lib/jquery.min.js" type="text/javascript"></script>
    <script src="/js/common.js" type="text/javascript"></script>
    <script src="/js/glad-cube.js" type="text/javascript"></script>
  </head>
  <body>
    <h1>Glad Cube</h1>
  </body>
</html>

ページがこれだけだと問題ないのですが、
複数あるとmetaタグ、linkタグ、scriptタグと
同じ記述をしなければならないです。
それが、下記のように書くことができます。

[index.jade]

extend ./base.jade

block head-meta
  meta(name="keywords" content="グラッドキューブ")

block head-links
  link(rel="stylesheet" type="text/css" href="/css/glad-cube.css")

block head-scripts
  script(src='/js/glad-cube.js', type='text/javascript')

block body
  h1 Glad Cube
[base.jade]

doctype html
html
  head
    meta(charset="utf-8")
    meta(content='width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0',     name='viewport')
    block head-meta
    link(rel="stylesheet" type="text/css" href="/css/reset.css")
    link(rel="stylesheet" type="text/css" href="/css/common.css")
    block head-links
    script(src='/js/lib/jquery.min.js', type='text/javascript')
    script(src='/js/common.js', type='text/javascript')
    block head-scripts
  body
    block body

共通部分 + そのページ特有のタグを埋め込むことが出来ます。
少し違った類似ページも簡単に扱うことができます。

Jade -> pugに!

今回、紹介させていただいたpug(旧Jade)ですが、ソフトウェア名が既存企業の商標と
衝突していたため改名を余儀なくされました。(2016/03/30執筆時点)
「Jade」から「pug」としてリリースされる予定です。

Renaming jade -> pug

まとめ

HTMLを効率的に書けるpug(旧Jade)を紹介させていただきました。
是非、pug(旧Jade)を使ってコーディングを10倍早くしましょう!