【Pug】ゴリラでもわかるJade改めPug入門
Jadeが商標うんたらで、Pugに名前が変わるそうなので使ってみました。
Jade 2.0.0からPugになるそうです。
Jadeの記事はこちら
ゴリラのイラストは素材工場さんから
素材工場
パグのイラストはイラストACさんから
イラストAC
目次
Pugとは
PugはHTMLを書くためのテンプレートエンジンです。
Pug
CSSにおけるSassやStylusのようなもので、ざっくり言うとHTMLの作成を簡単にしてくれます。
HTMLのようにタグで囲むことがない代わりに、改行やインデントなどで全体を構成していきます。
Pugのいいところ
Pugを使うと、いろいろと楽になります。
- 記述を省略できる(タグで囲む必要なし、class,idを書かなくていい)
- ファイル分割できる(一部をincludeで読み込んだり、見た目や管理がスッキリ)
- 変数やループとかがあって便利
インストール
Pugを使うためには準備が必要ですが、簡単です。
Node.jsのインストール
Pugの公式サイトに「NODE TEMPLATE ENGINE」と書かれているように、PugはNode.jsで動いています。
Node.jsをインストールしていない人は公式サイトからダウンロードし、PCにインストールしてください。
Node.js
Pugのインストール
Node.jsをインストールできたら、Pugをインストールします。
以下コマンドをターミナルでたたくとPugがインストールされます。
npm i pug-cli -g
以下コマンドでバージョンが表示されたら、インストール完了です。
pug --version
Pugファイルを作成してみる
まず、index.pugを作成します。
作る場所はどこでも大丈夫です。
index.pugに以下を書きます。
doctype html html(lang="ja") head meta(charset="utf-8") style(src="css/style.css") title Pugテスト body h1.sitettl Pugテストサイトタイトル main.main h2.content_ttl メインタイトル
冒頭で書いた通り、Pugはタグで囲んでないですね。
Pugの基本記法
Pugは基本的に以下ように書きます。
- doctype htmlで宣言文
- 改行+インデントで要素の入れ子を作る
- タグ名+半角スペースでタグ内のテキスト
PugをHTMLにコンパイル
先ほど作ったPugファイルをターミナルを使って、HTMLファイルに書き出してみます。
ターミナルを開き、Pugファイルがあるディレクトリへ移動しておきます。
[例]
cd pugtest
Pugファイルがあるディレクトリへ移動した上で、以下コンパイルのコマンドをターミナルに入力します。
pug index.pug
すると同じディレクトリ内にindex.htmlが生成されます。
index.html
<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><style src="css/style.css"></style><title>Pugテスト</title></head><body><h1 class="sitettl">Pugテストサイトタイトル</h1><main class="main"><h2 class="content_ttl">メインタイトル</h2></main></body></html>
横一直線で見づらいので、以下コマンドでコンパイルします。
pug index.pug --pretty
すると、見やすいHTMLを書き出してくれます。
index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <style src="css/style.css"></style> <title>Pugテスト</title> </head> <body> <h1 class="sitettl">Pugテストサイトタイトル</h1> <main class="main"> <h2 class="content_ttl">メインタイトル</h2> </main> </body> </html>
Pugの書き方いろいろ
タグが不要なこと以外にもPug特有の書き方はいろいろとあります。
改行せずに要素の入れ子をつくる
Pugは「: + 半角スペース」で横並びに書いても、要素の入れ子を作ることができます。
例えばメニューで「nav > ul > li > a > span」という感じの構成の場合、
改行+インデントを使うと縦に長くなって、逆に見づらくなる場合があります。
そんな時にこの書き方が使えます。
nav ul li: a(href="#") Top li: a(href="#") About li: a(href="#") Works li: a(href="#") Contact li: a(href="#"): span Links
コンパイル結果
<nav> <ul> <li><a href="#">Top</a></li> <li><a href="#">About</a></li> <li><a href="#">Works</a></li> <li><a href="#"><span>Contacts</span></a></li> </ul> </nav>
idとclassの書き方
idは#、classは.でつなげて書きます。
いちいちclassやクォーテーションを書かなくていいですね。
section#top .content.inner
コンパイル結果
<section id="top"> <div class="content inner"></div> </section>
属性の書き方
hrefやsrcなどの属性はかっこ内に書きます。
// CSS link(link="css/style.css") // js script(src="js/main.js") // リンク a(href="#") Top // inputタグ input(type="text" checked) input( type="radio" name="hoge" checked )
複数ある場合は、スペース横並びでも、改行でも大丈夫です。
改行
文章の改行をしたいとき、brタグを使うには以下のように書きます。
p |トップページのコンテンツ br |トップページのコンテンツ
コンパイル結果
<p>トップページのコンテンツ<br>トップページのコンテンツ</p>
コメント
Pugのコメントの書き方は2種類あります。
書き出したHTML内にコメントを残す方法と残さない方法です。
// HTMLで書き出されるコメント //- HTMLで書き出されないコメント
Pugの便利機能
Pugを使うと記述を省略できる以外にも、便利な書き方があります。
include
記述の一部をパーツ化し、includeで必要な箇所に読み込むことができます。
ページ間の共通部分をパーツ化しておくことで、管理や修正がやりやすくなります。
例えば、以下のようなPugファイルがあったとします。
doctype html(lang="ja") head meta(charset="utf-8") style(src="css/style.css") title Pugテスト body header.header h1.sitettl Pugテストサイトタイトル nav ul li a(href="#") Top li a(href="#") About li a(href="#") Works li a(href="#") Contact main.main h2.content_ttl トップページタイトル p トップページのコンテンツ footer.footer small copyright
includeを使って書くとこのようになります。
index.pug
doctype html(lang="ja") head meta(charset="utf-8") style(src="css/style.css") title Pugテスト body include include/header.pug main.main h2.content_ttl トップページタイトル p |トップページのコンテンツ br |トップページのコンテンツ section#top .content.top footer.footer small copyright
トップページや下層ページでも同じ構成になりそうな、ヘッダーをincludeで読み込んでみました。
ヘッダーのPugファイルはincludeディレクトリ以下に置いています。
[header.pug]
header.header h1.sitettl Pugテストサイトタイトル nav ul li a(href="#") Top li a(href="#") About li a(href="#") Works li a(href="#") Contact
includeで読み込んでおくと、後にメニューの表記などが変更になった場合、
header.pugを修正すれば全てのページで変更されます。
変数が使える
「- var 変数名 = 変数の中身」で定義します。
例
- var title = "ゴリラでもわかるPug入門";
変数を使う場合は「#{変数名}」で使います。
header.header h1.sitettl #{title}
使いまわしそうなものは変数定義しておくと、後に変更があった場合に楽です。
ループ
同じ要素が続くときはループで繰り返すことができます。
for文を使う場合
section#top .content.top - for (var i = 0; i < 3; i++) { .block h2(class="#{i}") 見出し p テキストテキスト a(href="#") ボタン - }
コンパイル結果
<div class="block"> <h2 class="0">見出し</h2> <p>テキストテキスト</p><a href="#">ボタン</a> </div> <div class="block"> <h2 class="1">見出し</h2> <p>テキストテキスト</p><a href="#">ボタン</a> </div> <div class="block"> <h2 class="2">見出し</h2> <p>テキストテキスト</p><a href="#">ボタン</a> </div>
単純な要素の繰り返しにはfor文が良さそうです。
#{i}と書けば連番をふることができます。
eachを使う場合
ul each val in ["Top", "About", "Works", "Contact"] li: a(href="#")= val
each文を使う繰り返しもあります。
コンパイル結果
<ul> <li><a href="#">Top</a></li> <li><a href="#">About</a></li> <li><a href="#">Works</a></li> <li><a href="#">Contact</a></li> </ul>
gulpでPugをコンパイルする
gulpでPugをコンパイルする記事を書きました。
さいごに
Pugは他にも条件文や、mixin、extendsなど便利な機能がまだまだあります。
ぜひお試しください!
One thought on “【Pug】ゴリラでもわかるJade改めPug入門”
Comments are closed.