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

公開日：2016/03/30　最終更新日：2018/08/27

カテゴリ - 技術情報

コーディングをするにあたって、必要な技術は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

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

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

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

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

[index.ｈｔｍｌ]

<!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)を使ってコーディングを１０倍早くしましょう！

お問い合わせ

SiTest の導入検討や
他社ツールとの違い・比較について
弊社のプロフェッショナルが
喜んでサポートいたします。
コンサルティング

ヒートマップの活用、ABテストの実施や
フォームの改善でお困りの方は、
弊社のプロフェッショナルが
コンサルティングいたします。
今すぐお気軽にご相談ください。

今すぐお気軽に
ご相談ください。

0120-315-465

（平日 10:00~19:00）

今すぐお気軽に
ご相談ください。

0120-315-465

（平日 10:00~19:00）

グラッドキューブは
「ISMS認証」を取得しています。

認証範囲：
インターネットマーケティング支援事業、インターネットASPサービスの提供、コンテンツメディア事業

「ISMS認証」とは、財団法人・日本情報処理開発協会が定めた企業の情報情報セキュリティマネジメントシステムの評価制度です。

いますぐ無料で
お試しください。

トライアル終了後も
無料でご利用いただけます。

お名前【必須】

メールアドレス【必須】
※携帯・フリーアドレスは不可

電話番号【必須】

『利用規約』『プライバシーポリシー』に同意する

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