Category
ウェブ制作

カルアカブログ

これからのコーディングは再利用と効率化だ!話題のPugを使ってみた

こんにちは、フロントエンドエンジニアのかみーゆです。
数年前にsassに出会い、タスクランナーを走らせてコーディングするようになり、めちゃめちゃ作業が早くなりました。Emmetの出現にも目からウロコが出るほど驚き日々技術の進化に感動してます。

そしてまたまた便利なものを見つけちゃいました!!!
Pug(旧:Jade)です(犬ではない)。

最近このPugを使ってhtmlを書いてすごーく感動したので、使い方をまとめようと思います。

公式サイトはこちら
Pug公式サイト

内容が長いのでお品書きを参考にして、さっさとテンプレート作りたい人はすっ飛ばして読んでください。

目次

  1. Pugってなんぞ?
    1. Pugを始めるために用意するもの
    2. Node.jsをインストール
    3. Pugをインストール
  2. 最初の一歩、index.pugをhtmlにコンパイル
  3. Pug基本の記述方法
    1. コメント
    2. divは省略できる
    3. 属性の追加
    4. ネスト
    5. 改行、spanなど
    6. ハイブリッドコードとか色々
    7. js、css
    8. 変数
    9. For文でループ
    10. IF文で分岐
    11. eachと配列
  4. テンプレート化してみる
    1. include
    2. extend
    3. append
    4. mixin
    5. テンプレートを作ってみよう!!!
  5. まとめ

※ 2017/5/9に太字の項目を追記しました。

PugはHTMLを書くためのテンプレートエンジンです。
平たくいうと、HTMLを共通部分headerやfooter、ページごとに違う主要コンテンツを切り分けてコーディングすることができます。
DreamweaverのTemplateを使ったことがある方ならわかると思いますが、少し感覚的に似ていると思います。

共通で使い回す部分を一旦設定してしまえば、ページごとに違うコンテンツのところだけ作ればいいので静的HTMLのページも量産できます。
共通部分を切り分けて作れるので後からメニューなどの変更があっても一箇所書き換えればいいだけです。

HTMLのようにタグで囲むことがないですが、改行やインデントなどで全体を構成していきます。
正しくインデントする必要がありますが、タグの閉じ忘れは無くなります。

変数が使えたり、分岐やループも使えるので多少プログラムライクではありますが、ノンプログラマーでも少し作法を覚えれば十分使えるのでは?!と思います。。。。

百聞は一見に如かず、とりあえずチャレンジしてみましょう。

Pugを始めるために用意するもの

Pugを使うために、ご自身のPCにNode.jsをインストールする必要があります。

あと、ターミナル、テキストエディタぐらいですかね。
ちなみに私は以下を使ってます。

  • ターミナル・i-term
  • テキストエディタ・Atom

一回環境を作ってしまえば再利用できるのでインストールしておきましましょう。
ちなみに、環境がMacを前提にお話ししているのでWindowsの方は多少やり方が違うかもしれません。ご了承ください。

Node.jsをインストール

Node.jsの公式サイトでNode.jsをダウンロードしてください。
Node.js公式サイト

※古いバージョンが入っている場合はPugがインストールできない可能性があります。
その場合はバージョンアップしてください。

Pugをインストール

コマンド
 $ npm i pug-cli -g

バージョンを確認してみます。

コマンド
 $ pug --version

helpも確認できます。
Pugのコマンドを忘れたらこちらを叩いてみてください。

コマンド
 $ pug --help

一番簡単なものを作ってみます。

任意の場所にpug練習用のディレクトリを作ります。
今回私はディレクトリ名をpug-testにしてみました。

ターミナルでも先ほど作ったディレクトリに移動しておきます。
あらかじめターミナルにcd [半角スペース]と打ち込んでおいてフォルダをターミナルにドラッグ&ドロップ、enterキーでディレクトリ移動できます。(他のターミナルでは動作確認してません。Macのデフォルトのターミナルではできたはず)

コマンド
 $ cd 任意の場所/pug-test

フォルダ内にindex.pugファイル(pugの拡張子は.pug)を作り以下のソースを書きます。
インデントでネストします。間違えないように注意してくださいね。

pug-test/
    index.pug

pug
 doctype html
   html(lang="ja")
     head
      meta(charset="utf-8")
      title Pugレッスン
     body
       h1 Pug始めました
       main.main
         p Pugでhtml作ったよ

私はAtomに言語Pugのパッケージを入れてます。コーディングが楽になりますので、気になる人は入れてみてください。
ちなみにドキュメント宣言はdoctype htmlでhtml5になります。他にも宣言できるので以下を参考にしてください。

https://pugjs.org/language/doctype.html

コマンドを叩く

コマンド
 $ pug index.pug

このままでは改行のない一行のhtmlが生成されます。最後に--prettyをくっつけるだけでキレイなhtmlに整形してくれます。
それでは実行してみましょう。

コマンド
 $ pug index.pug
--pretty

html
 <!DOCTYPE html>
 <html lang="ja">
   <head>
      <meta charset="UTF-8">
      <title>Pugレッスン</title>
   </head>
   <body>
      <h1>Pug始めました</h1>
      <main class="main">
      <p>Pugでhtml作ったよ</p>
      </main>
   </body>
 </html>

コンパイルできましたね!!

基本の記述方法にチャレンジしましょう。
さらに詳しい記述方法を知りたい方は公式サイトを参考にしてください。

Pug公式サイト

コメントの書き方

Pug上に残して、htmlには反映したくない場合はスラッシュ2こ+ハイフン(//-)。

pug
 //- ここにコメントをかく

htmlのコメントとして残したい場合はスラッシュ2こ(//)。

pug
 // ここにコメントをかく

divは省略できる

idは#、classは.です。

pug
 #id-name DivタグにIDを振る
 .class-name DivタグにClassをつける
html
 <div id="id-name">DivタグにIDを振る</div>
 <div class="class-name">DivタグにClassをつける</div>

属性の追加

srcやhrefなど属性を追加したい時は()内にこんな感じで書きます。
もちろん、idやclassも中に書くことができます。
下三つのコードは全て出力結果は一緒。

pug
img(id="id" class="images" src="./img/img01.jpg" alt="画像01")
 img(id="id",class="images",src="./img/img01.jpg",alt="画像01")
 img#id.images(src="./img/img01.jpg" alt="画像01")
html
<img id="id" class="images" src="./img/img01.jpg" alt="画像01">

ネスト

入れ子にするにはインデントもしくはコロンを使います。

 

pug
ul
 li: a(href="#") List01
 li: a(href="#") List02
 li: a(href="#") List03
html
 <ul>
   <li><a href="#">List01</a></li>
   <li><a href="#">List02</a></li>
   <li><a href="#">List03</a></li>
 </ul>
 

改行、spanなど

インライン内に文字を追加する時はこんな感じで|(パイプ)を使います。

pug
 p こんにちは。
   br
   | フロントエンドエンジニアの
   strong かみーゆ
   | です。
 
html
 <p>こんにちは。<br>フロントエンドエンジニアの<strong>かみーゆ</strong>です。</p>

ハイブリッドコードとか色々

無理にpugの文法に沿わなくても、下記コードの一番上のようなごちゃ混ぜコードも書けます。
また=(イコール)を使ってコンテンツとなる値を引き渡すこともできます。
ただし、値内に入っているコードは下記のようにエスケープされてしまいますので、エスケープしたくない場合は=の前に!をつけます。

pug
 //- ごちゃ混ぜ
 p こんにちは。<br>フロントエンドエンジニアの <strong>かみーゆ</strong> です。

//- =でコンテンツを渡す p= 'こんにちは。フロントエンドエンジニアのかみーゆです。'

//- エスケープ p= '段落は<p>タグで囲みます'

//- エスケープしたくない p!= '段落は<p>タグで囲みます'

html
 <p>こんにちは。<br>フロントエンドエンジニアの<strong>かみーゆ</strong>です。<\/p>
 <p>こんにちは。フロントエンドエンジニアのかみーゆです。<\/p>
 <p>段落は &lt;p&gt;タグで囲みます<\/p>
 <p>段落は<p>タグで囲みます<\/p>
 

js、css

直接jsやcssを書く場合.(ドット)で繋ぎます。

PUG

pug
 //- css
 style.
   a{
     color: #333;
     background: #aaa;
   } 
 //- js
 script.
   let flug = true;
   if(flug) console.log(flug);
     else console.log(flug);
css
<style>
   a{
     color: #333;
     background: #aaa;
   }
 </style>
css
<script>
   var flug = true;
   if(flug) console.log(flug);
   else console.log(flug);
 </script>

変数

pug
- var url = "//www.example.com/";
 a(href=url) トップページ
 a(href=url + "contact/") お問い合わせ
html
<a href="//www.example.com">トップページ</a>
 <a href="//www.example.com/contact/">お問い合わせ</a>

For文でループ

pug
 ul
   - for (var i = 0; i <= 3; i++) {
     .item
       li List0#{i}
   - }
html
 <ul>
   <li>List01</li>
   <li>List02</li>
   <li>List03</li>
 </ul>

IF文で分岐

pug
 - var title = { home: "トップページ" }

  if title.home     h2 #{title.home}   else     h2 title.lower

html
<h2>トップページ</h2>

eachと配列

もちろんeachと配列も使えます。

pug
 - var author = ['ゆうさん', 'ゆきぱんだ', 'Tantan', 'かみーゆ', 'しゃーまん']
 ul
   each item, index in author
     li #{index + item}
html
 <ul>
   <li>0ゆうさん</li>
   <li>1ゆきぱんだ</li>
   <li>2Tantan</li>
   <li>3かみーゆ</li>
   <li>4しゃーまん</li>
 </ul>

メインコンテンツ・共通部分でファイルを分けて作ってみましょう。

include

まずは基本の外部ファイルの読み込みをやってみます。
includeでファイルを読み込めます。

html
include  ファイル名

以下の感じであればincディレクトリにある_header.pugをincludeしてくれます。

pug
include _inc/_header.pug

(.pugは省略できる)

extend

extendとblockを使って元となるファイルを継承することもできます。

pug
 //- inc/_layout.pug
 block main

//- index.pug extend _inc/_layout

block main   main.main     h2 Pugでhtml作ったよ     p Pugって楽しいね!!!!

この場合、_inc/_layout.pugのblock mainの箇所にindex.pugのblock main以下のタグが出力されます。

append

ページごとに独自の設定をもたせたいときはappendを使います。

pug
//- _inc/_layout.pug
 block js

//- index.pug append js   script(src="top.js")

mixin

sassのようにmixinも作れる。
同じコードを繰り返し作るときなど便利。

pug
mixin list
   ul
     li List01
     li List02
     li List03
 +list
 +list

値も代入できる

pug
mixin li(name)
   li.li= name

ul   +li("List01")   +li("List02")   +li("List03")

テンプレートを作ってみよう!!!

それでは、これらを踏まえてテンプレートを作ってみましょう。

ファイル構造はこんな感じです。
コンパイルされるデータをdestフォルダに出力します。
cssやjsファイルなどは用意してませんが、あるものと想定してやってみてください。

pug-test/
  ├ dest/
  │  └ asset/
  │    ├ css/
  │    ├ js/
  │    └ images/
  └ _inc/
       _header.pug
       _footer.pug
       _layout.pug
  index.pug

index.pug

_inc/_layout.pug

_inc/_header.pug

_inc/_footer.pug

以下のコマンドでコンパイル。

コマンド
pug index.pug --pretty --out dest

dest/index.html

html dest/index.html
<!DOCTYPE html>
 <html lang="ja">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>トップページ | Pugレッスン</title>
     <!-- css-->
     <link rel="stylesheet" href="assets/css/swiper.min.css">
     <link rel="stylesheet" href="assets/css/top.css">
   </head>
   <body>
      <header>
        <h1 class="site-name">Pugで作ったサイト</h1>
      </header>
      <nav class="global-nav">
        <ul>
            <li><a href="#">トップ</a></li>
            <li><a href="#">メニュー01</a></li>
            <li><a href="#">メニュー02</a></li>
            <li><a href="#">メニュー03</a></li>
            <li><a href="#">メニュー04</a></li>
        </ul>
      </nav>
      <main class="main">
        <h2>Pugでhtml作ったよ</h2>
        <p>Pugって楽しいね!!!!</p>
      </main>
      <footer>
        <p><small>copyright LEAD Space</small></p>
      </footer>
      <!-- js-->
      <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="assets/js/top.js"></script>
   </body>
 </html>

mixinを使うとなぜかインデントがちょっとズレちゃうのは気になりますが、一応コンパイルできました。

まとめ

今回はPugの基本の使い方をまとめてみました!
次は、タスクランナーで自動出力する方法についてまとめます。

※ 2017/5/9追記しました。

参考

Tags
gulp
node.js
Pug

関連記事

関連サービス