こんにちは！
デザイナーの伊東です。
つい最近コーディング業務にPugを取り入れたので、今回はそのご紹介をしようと思います。
もともとJadeと呼ばれていたものが、商標登録の関係でPugという名前に変わったそうです。
Jadeよりも親しみやすい名前で、とっつきやすくなったのではないでしょうか。
Pugって何ができるの？
そもそもPugがどういうものなのか、初歩的なところからお話ししていきます。
以前ejsを使用したことがあるのですが、ejsもPugも「テンプレートエンジン」と呼ばれるものです。
一つのページを構成するパーツを分割して管理するという、大枠の考え方やメリットはどちらも似ています。
また変数や条件分岐、ループを扱うこともできます。
インストール
Pugのインストールには、Node.jsのインストールが必要ですがここでは割愛させていただきます。
Node.jsがインストールされた上で、下記のコードをターミナルで実行します。
npm i pug-cli -g
バージョンを確認して、正しく表示されたらインストールは成功です。
pug --version
Pugの書き方
それではPugの基本的な書き方をみていきます。
doctype html
html(lang="ja")
head
meta(charset="utf-8")
title Pugで始める快適コーディングライフ
style(src="css/style.css")
script(src="js/common.js")
body
div#wrap
header
h1.logo
img(
src="img/logo.jpg",
alt="ロゴ"
)
nav.gnav
article.main
section メインコンテンツ
footer
このように、閉じタグなしで記述していきます。
普段emmetを使ってコーディングされている方はすんなりコードを理解していただけるのではないでしょうか。
特徴は以下の通りです。
・閉じタグが不要で、要素の親子関係はインデントで表す。
・”div#wrap”のように、idやclassは要素名のすぐ後に”#”や”.”で指定
・属性は()内に”,”で区切って指定
・テキストは要素名の後にスペースを入れて入力
それではPugファイルをコンパイルして、htmlファイルを生成してみます。
先ほどのコードを”index.pug”として任意の場所に保存します。
ターミナルで”index.pug”があるディレクトリまで移動して、以下のコードを実行します。
pug index.pug --pretty
すると、同じディレクトリにindex.htmlが生成されました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Pugで始める快適コーディングライフ</title>
<style src="css/style.css"></style>
<script src="js/common.js"></script>
</head>
<body>
<div id="wrap">
<header>
<h1 class="logo"><img src="img/logo.jpg" alt="ロゴ"></h1>
<nav class="gnav"></nav>
</header>
<article class="main">
<section>メインコンテンツ</section>
</article>
<footer></footer>
</div>
</body>
</html>
ちなみに、コンパイルする際に”–pretty”を省略すると、
<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><title>Pugで始める快適コーディングライフ</title><style src="css/style.css"></style><script src="js/common.js"></script></head><body><div id="wrap"><header><h1 class="logo"><img src="img/logo.jpg" alt="ロゴ"></h1><nav class="gnav"></nav></header><article class="main"><section>メインコンテンツ</section></article><footer></footer></div></body></html>
このように改行やインデントが省略されたhtmlファイルが生成されます。
gulpを使用されている方は、gulp-pugをインストールしてwatchさせておけば、pugファイルを更新すると自動的にコンパイルさせることができます。
応用的な書き方
改行(インデント)なしで記述して、可読性UP！
先ほどの章では「要素の親子関係はインデントで表す」と説明しましたが、インデントせずに記述する方法もあります。
ナビゲーションのマークアップなどに便利です。
ul li: a(href="#"): span リンク1 li: a(href="#"): span リンク2 li: a(href="#"): span リンク3 li: a(href="#"): span リンク4 li: a(href="#"): span リンク5
<ul> <li><a href="#"><span>リンク1</span></a></li> <li><a href="#"><span>リンク2</span></a></li> <li><a href="#"><span>リンク3</span></a></li> <li><a href="#"><span>リンク4</span></a></li> <li><a href="#"><span>リンク5</span></a></li> </ul>
インクルードを利用して、管理しやすい構成に！
ヘッダーやナビゲーションなど各ページで共通化できるところは、別ファイルにしてインクルードすると便利です。
doctype html
html(lang="ja")
head
meta(charset="utf-8")
title Pugで始める快適コーディングライフ
style(src="css/style.css")
script(src="js/common.js")
body
header
ul
li: a(href="#"): span リンク1
li: a(href="#"): span リンク2
li: a(href="#"): span リンク3
li: a(href="#"): span リンク4
li: a(href="#"): span リンク5
article
footer
このコードから、ナビゲーション部分を別ファイルに記述してインクルードしてみましょう。
doctype html
html(lang="ja")
head
meta(charset="utf-8")
title Pugで始める快適コーディングライフ
style(src="css/style.css")
script(src="js/common.js")
body
header
include nav.pug
article
footer
ul li: a(href="#"): span リンク1 li: a(href="#"): span リンク2 li: a(href="#"): span リンク3 li: a(href="#"): span リンク4 li: a(href="#"): span リンク5
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Pugで始める快適コーディングライフ</title>
<style src="css/style.css"></style>
<script src="js/common.js"></script>
</head>
<body>
<header>
<ul>
<li><a href="#"><span>リンク1</span></a></li>
<li><a href="#"><span>リンク2</span></a></li>
<li><a href="#"><span>リンク3</span></a></li>
<li><a href="#"><span>リンク4</span></a></li>
<li><a href="#"><span>リンク5</span></a></li>
</ul>
</header>
<article></article>
<footer></footer>
</body>
</html>
共通部分は別ファイルで記述することで、メンテナンス性が向上します。
変数を使って、さらに効率的に！
1ページの中で何回も出てくる語句は、変数として定義しておくと便利です。
「- var 変数名 = ●●●●●」で定義して、「#{変数名}」で呼び出します。
- var title = "ALAKI株式会社";
header
h1 #{title}
article
p #{title}は会社と共に、仲間と共に、成長する人材を求めています。
<header> <h1>ALAKI株式会社</h1> </header> <article> <p>ALAKI株式会社は会社と共に、仲間と共に、成長する人材を求めています。</p> </article>
繰り返す処理は、ループを使ってスマートに！
Pugではループを使用して処理を繰り返すことが可能です。
ここではfor文を使ったループをご紹介します。
ul
- for (var i = 0; i < 5; i++) {
li: a(href="#"): span リンク#{i+1}
- }
<ul> <li><a href="#"><span>リンク1</span></a></li> <li><a href="#"><span>リンク2</span></a></li> <li><a href="#"><span>リンク3</span></a></li> <li><a href="#"><span>リンク4</span></a></li> <li><a href="#"><span>リンク5</span></a></li> </ul>
Pugで困ったこと
これは先日実際に業務中に体験したことなのですが、Pugで書くとかえって可読性が悪くなる場合があります。
漢字に読み仮名をふる
htmlではこんなソースですが、
<p><ruby>漢字<rt>かんじ</ruby>に<ruby>読<rt>よ</ruby>み<ruby>仮名<rt>がな</ruby>をたくさんふる</p>
Pugだと、
p
ruby
| 漢字
rt かんじ
| に
ruby
| 読
rt よ
| み
ruby
| 仮名
rt がな
| をたくさんふる
何がなんだかさっぱりですよね。
これをPugで書くのは頭が混乱してきそうなので、htmlで記述してPugのコードに変換するという方法で対応しました。
そんな時に便利なのがjade converterです。
左側の入力欄にhtmlのコードを入力することで、右側にPugのコードが表示されます。
Pugを導入したが、どうしてもこの部分はhtmlで書いた方が早い！
なんて場合には最適かと思います。
Pugをうまく使いこなして、快適なコーディングライフをお過ごしください！
それではこの辺で、最後までありがとうございました！
