こんにちは！
デザイナーの伊東です。
つい最近コーディング業務にPugを取り入れたので、今回はそのご紹介をしようと思います。
もともとJadeと呼ばれていたものが、商標登録の関係でPugという名前に変わったそうです。
Jadeよりも親しみやすい名前で、とっつきやすくなったのではないでしょうか。
Pugって何ができるの？
そもそもPugがどういうものなのか、初歩的なところからお話ししていきます。
以前ejsを使用したことがあるのですが、ejsもPugも「テンプレートエンジン」と呼ばれるものです。
一つのページを構成するパーツを分割して管理するという、大枠の考え方やメリットはどちらも似ています。
また変数や条件分岐、ループを扱うこともできます。
インストール
Pugのインストールには、Node.jsのインストールが必要ですがここでは割愛させていただきます。
Node.jsがインストールされた上で、下記のコードをターミナルで実行します。
|
1 |
npm i pug-cli -g |
バージョンを確認して、正しく表示されたらインストールは成功です。
|
1 |
pug --version |
Pugの書き方
それではPugの基本的な書き方をみていきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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”があるディレクトリまで移動して、以下のコードを実行します。
|
1 |
pug index.pug --pretty |
すると、同じディレクトリにindex.htmlが生成されました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!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”を省略すると、
|
1 |
<!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！
先ほどの章では「要素の親子関係はインデントで表す」と説明しましたが、インデントせずに記述する方法もあります。
ナビゲーションのマークアップなどに便利です。
|
1 2 3 4 5 6 |
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 |
|
1 2 3 4 5 6 7 |
<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> |
インクルードを利用して、管理しやすい構成に！
ヘッダーやナビゲーションなど各ページで共通化できるところは、別ファイルにしてインクルードすると便利です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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 |
このコードから、ナビゲーション部分を別ファイルに記述してインクルードしてみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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 |
|
1 2 3 4 5 6 |
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 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!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 変数名 = ●●●●●」で定義して、「#{変数名}」で呼び出します。
|
1 2 3 4 5 |
- var title = "ALAKI株式会社"; header h1 #{title} article p #{title}は会社と共に、仲間と共に、成長する人材を求めています。 |
|
1 2 3 4 5 6 |
<header> <h1>ALAKI株式会社</h1> </header> <article> <p>ALAKI株式会社は会社と共に、仲間と共に、成長する人材を求めています。</p> </article> |
繰り返す処理は、ループを使ってスマートに！
Pugではループを使用して処理を繰り返すことが可能です。
ここではfor文を使ったループをご紹介します。
|
1 2 3 4 |
ul - for (var i = 0; i < 5; i++) { li: a(href="#"): span リンク#{i+1} - } |
|
1 2 3 4 5 6 7 |
<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ではこんなソースですが、
|
1 |
<p><ruby>漢字<rt>かんじ</ruby>に<ruby>読<rt>よ</ruby>み<ruby>仮名<rt>がな</ruby>をたくさんふる</p> |
Pugだと、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
p ruby | 漢字 rt かんじ | に ruby | 読 rt よ | み ruby | 仮名 rt がな | をたくさんふる |
何がなんだかさっぱりですよね。
これをPugで書くのは頭が混乱してきそうなので、htmlで記述してPugのコードに変換するという方法で対応しました。
そんな時に便利なのがjade converterです。
左側の入力欄にhtmlのコードを入力することで、右側にPugのコードが表示されます。
Pugを導入したが、どうしてもこの部分はhtmlで書いた方が早い！
なんて場合には最適かと思います。
Pugをうまく使いこなして、快適なコーディングライフをお過ごしください！
それではこの辺で、最後までありがとうございました！
