• {{ item.count }}

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

カルアカスタッフ
  • {{ item.count }}
これからのコーディングは再利用と効率化だ！話題の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をインストール

[code title=”コマンド”]
$ npm　i pug-cli -g[/code]

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

[code title=”コマンド”]
$ pug –version[/code]

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

[code title=”コマンド”]
$ pug –help[/code]

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

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

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

[code title=”コマンド”]
$ cd 任意の場所/pug-test[/code]

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

pug-test/
    index.pug

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

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

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

コマンドを叩く

[code title=”コマンド”]
$ pug index.pug[/code]

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

[code title=”コマンド”]
$ pug index.pug –pretty[/code]

[code title=”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>[/code]

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

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

Pug公式サイト

コメントの書き方

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

[code title=”pug”]
//- ここにコメントをかく[/code]

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

[code title=”pug”]
// ここにコメントをかく[/code]

divは省略できる

idは#、classは.です。

[code title=”pug”]
#id-name DivタグにIDを振る
.class-name DivタグにClassをつける[/code]

[code title=”html”]
<div id=”id-name”>DivタグにIDを振る</div>
<div class=”class-name”>DivタグにClassをつける</div>[/code]

属性の追加

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

[code title=”pug”]img(id=”id” class=”images” src=”./img/img01.jpg” alt=”画像０１”)
img(id=”id”,class=”images”,src=”./img/img01.jpg”,alt=”画像０１”)
img#id.images(src=”./img/img01.jpg” alt=”画像０１”)[/code]

[code title=”html”]<img id=”id” class=”images” src=”./img/img01.jpg” alt=”画像０１”>[/code]

ネスト

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

 

[code title=”pug”]ul
li: a(href=”#”) List01
li: a(href=”#”) List02
li: a(href=”#”) List03[/code]

[code title=”html”]
<ul>
  <li><a href=”#”>List01</a></li>
  <li><a href=”#”>List02</a></li>
  <li><a href=”#”>List03</a></li>
</ul>
[/code]

改行、spanなど

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

[code title=”pug”]
p こんにちは。
  br
  | フロントエンドエンジニアの
  strong かみーゆ
  | です。
[/code]

[code title=”html”]
<p>こんにちは。<br>フロントエンドエンジニアの<strong>かみーゆ</strong>です。</p>[/code]

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

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

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

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

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

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

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

js、css

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

PUG

[code title=”pug”]
//- css
style.
  a{
    color: #333;
    background: #aaa;
  }
//- js
script.
  let flug = true;
  if(flug) console.log(flug);
    else console.log(flug);[/code]

[code title=”css”]<style>
  a{
    color: #333;
    background: #aaa;
  }
</style>[/code]

[code title=”css”]<script>
  var flug = true;
  if(flug) console.log(flug);
  else console.log(flug);
</script>[/code]

変数

[code title=”pug”]- var url = “//www.example.com/”;
a(href=url) トップページ
a(href=url + “contact/”) お問い合わせ[/code]

[code title=”html”]<a href=”//www.example.com”>トップページ</a>
<a href=”//www.example.com/contact/”>お問い合わせ</a>[/code]

For文でループ

[code title=”pug”]
ul
  – for (var i = 0; i <= 3; i++) {
    .item
      li List0#{i}
  – }[/code]

[code title=”html”]
<ul>
  <li>List01</li>
  <li>List02</li>
  <li>List03</li>
</ul>[/code]

IF文で分岐

[code title=”pug”]
– var title = { home: “トップページ” }

  if title.home
    h2 #{title.home}
  else
    h2 title.lower[/code]

[code title=”html”]<h2>トップページ</h2>[/code]

eachと配列

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

[code title=”pug”]
– var author = [‘ゆうさん’, ‘ゆきぱんだ’, ‘Tantan’, ‘かみーゆ’, ‘しゃーまん’]
ul
  each item, index in author
    li #{index + item}[/code]

[code title=”html”]
<ul>
  <li>0ゆうさん</li>
  <li>1ゆきぱんだ</li>
  <li>2Tantan</li>
  <li>3かみーゆ</li>
  <li>4しゃーまん</li>
</ul>[/code]

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

include

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

[code title=”html”]include  ファイル名[/code]

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

[code title=”pug”]include _inc/_header.pug[/code]

(.pugは省略できる)

extend

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

[code title=”pug”]
//- inc/_layout.pug
block main

//- index.pug
extend _inc/_layout

block main
  main.main
    h2 Pugでhtml作ったよ
    p Pugって楽しいね！！！！[/code]

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

append

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

[code title=”pug”]//- _inc/_layout.pug
block js

//- index.pug
append js
  script(src=”top.js”)[/code]

mixin

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

[code title=”pug”]mixin list
  ul
    li List01
    li List02
    li List03
+list
+list[/code]

値も代入できる

[code title=”pug”]mixin li(name)
  li.li= name

ul
  +li(“List01”)
  +li(“List02”)
  +li(“List03”)[/code]

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

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

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

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

index.pug

[gist 6c1eb408cdd8c89169c4d06635f6e3ef]

_inc/_layout.pug

[gist d9068ca347bad2809f465376b846cd99]

_inc/_header.pug

[gist ef31ee7b8c43eddd74d56257aac916ed]

_inc/_footer.pug

[gist deebc26d5c8b5fa835ec51fa99ee5943]

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

[code title=”コマンド”]pug index.pug –pretty –out dest[/code]

dest/index.html

[code title=”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>[/code]

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

まとめ

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

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

参考

タグ
gulp
node.js
Pug

SNSでシェアしよう

  • {{ item.count }}
この記事を書いた人

カルアカスタッフ | 運営者

カルアカスタッフの記事一覧へ

関連コンテンツ

注目キーワード