PugでHTMLを効率的にコーディングしよう！【WEB制作環境構築】

WEB制作環境の構築として、前回の記事ではCSSを使いやすくする為のSassの導入を行いました。まだご覧になっていない方は是非ご覧ください↓↓

効率的なスタイルシート作成の鍵！Sass入門【WEB制作環境構築】 | KATSU LOG

Sassの導入からWEB制作の環境構築をしていきます。

https://katsu-dev.netlify.app/blog/web/env/sass/

効率的なスタイルシート作成の鍵！Sass入門【WEB制作環境構築】 | KATSU LOG-image

今回はHTMLをより使いやすくする為のPugの導入を行っていきます！

Sassと同様に、Pugも独自の構文を持ち、その構文に従って記述したPugファイルをHTMLファイルに変換する事ができます。

Pugとは？？
Pugの使用準備
- Pugのインストール
- Pugの実行
Pug構文について
まとめ

Pugとは？？

HTMLをシンプル・コンパクトな構文で記述することができるもので、ファイルの拡張子は.pugになります。

次の例のような構文でPugを記述することができます。

html
  head
    title()
  body
    h1
    p()

HTMLタグで必要だった不等号<、>が不要で、各要素の親子関係はインデントで表します。

かなり記述量は減りそうですね！

Pugを用いて上記のコードをHTMLに変換すると次のようになります。

<html>
  <head>
  <title></title>
  </head>
  <body>
    <h1></h1>
    <p></p>
  </body>
</html>

Pugの使用準備

Sassの導入記事で使用したフォルダで準備をします。

Sassの導入完了時点で、以下のようなフォルダ構成でした。

sample/
  ├ node_modules/
  ├ public/
  │  ├ index.html
  │  └ css/
  │     └ style.css
  ├ src/
  │  └ sass/
  │     └ style.scss
  └ package.json

変換前の.pugファイルを入れるフォルダを作成します。

sample/
  ├ node_modules/
  ├ public/
  │  ├ index.html
  │  └ css/
  │     └ style.css
  ├ src/
  │  ├ pug/  │  └ sass/
  │     └ style.scss
  └ package.json

変換前の.pugファイルはsample/src/pugフォルダに、変換後の.htmlファイルはsample/publicフォルダに出力することとします。

Pugのインストール

Sassの導入時と同じく、npmを使ってPugをインストールしていきましょう。

まずはコマンドプロンプトorターミナルを立ち上げ、作業ディレクトリに移動します(パスは適宜変更してください)

> cd sample

ディレクトリを移動したら、次のコマンドでPugをインストールします。Sassのインストールと同様に-gオプションを付けてグローバルインストールとします。

> npm install -g pug-cli

インストールが完了したら、次のコマンドを入力してみてください。

> pug --version

pug version: 2.0.4、pug-cli version: 1.0.0-alpha6等が表示されていればPugのインストールは完了です！

Pugの実行

コマンドプロンプト又はターミナルでpugコマンドを走らせましょう。

> pug --watch src/pug --out public --pretty

これもsassコマンドと似たような感じで、--watchオプションで変更を監視するフォルダを指定し、--outオプションで変換したHTMLファイルの出力先を指定します。

--prettyオプションは出力されるHTMLでの改行・インデントを維持するものです。これを付けない場合は全てのコードが一行に纏められたHTMLが出力されます。

監視するフォルダsrc/pug以下の構成はそのままpublicフォルダへとコピーされます。

適当な.pugファイルを作成してみましょう。

sample/
  ├ node_modules/
  ├ public/
  │  ├ index.html
  │  └ css/
  │     └ style.css
  ├ src/
  │  ├ pug/
  │  │  └ index.pug  │  └ sass/
  │     └ style.scss
  └ package.json

src/pug/index.pugファイルを作成した時点で、出力先となるpublicフォルダへindex.htmlファイルが作成されます。

今回は既にindex.htmlがありましたので、内容が更新されたと思います。

src/pugフォルダ内の全ての.pugファイルを編集して保存する度にこの変換が行われるようになります。

これでPugを用いたHTMLのコーディング編集が可能になりました！

Pug構文について

Pugの使用準備は完了しました。ここからはPugの構文を紹介していきます。

タグの省略

HTMLでは、不等号<、>で開始タグ、終了タグを記述しましたが、Pugでは不等号が不要となり、タグ名のみで要素を記述できます。

Pugファイルで次の記述をします。

これは次のようなHTMLに変換されます。

<p></p>

テキスト

要素の後に半角スペースを空けることでテキストを記述できます。

p Hellow, World!!

これは次のように変換されます。

<p>Hellow, World!!</p>

テキストにHTMLタグを含ませた場合はそのままHTMLとして出力できます。

p Hellow, <br/>World!!

<p>Hellow, <br/>World!!</p>

テキスト中で#[要素テキスト]のようにすると、テキストの中にHTML要素を入れる事ができます。属性を指定しないインライン要素であればこちらの方が記述が短くなる場合があります。

p hoge#[span fuga]piyo

<p>hoge<span>fuga</span>piyo</p>

テキストを複数行に分けたい場合はパイプ|を使います。テキストとする範囲にインデントを付けて、| テキストとします。

p
  | hoge
  | fuga
  | piyo

<p>
  hoge
  fuga
  piyo
</p>

このパイプを応用して、属性の指定のあるインライン要素を記述する場合は次のように記述することができます。長い文章中で属性の指定のあるインライン要素を書きたいときにいいかもしれません。

p
  | 詳細は
  a(href="./page.html") こちらの記事
  | で紹介しています。

<p>詳細は<a href="./page.html">こちらの記事</a>で紹介しています。</p>

後に出てくる変数をテキストで展開したい場合は、要素 #{変数}や、要素= 変数を使用します。

- var age = 20
- var hoge = "hogehoge"

p 私は#{age}歳です。
p= hoge

<p>私は20歳です。</p>
<p>hogehoge</p>

これらの方法でテキスト中に変数を展開する場合、変数にHTMLタグが含まれていればエスケープされます。

- var text = "span要素は<span>fuga</span>のように記述します"
p= text

<p>span要素は&lt;span&gt;fuga&lt;/span&gt;のように記述します</p>

ネスト

ネストはインデント(字下げ)で表します。インデントはスペース・タブどちらでもOKですが、混在せずに統一して使いましょう。

対象の要素の次の行よりインデントが深いものから、インデントの深さが元に戻るまでがネストされます。

div
  p Hellow,
div
  p World!!

これは次のように変換されます。

<div>
  <p>Hellow,</p>
</div>
<div>
  <p>World!!</p>
</div>

親要素: 子要素のようにすると一行でネストの記述ができます。直下に子要素がある場合に使えます。

a: img

<a><img/></a>

クラス・ID

クラス・IDはCSSと同じ構文で記述することができます。

div.hoge
div#fuga

また、<div>のみ要素名を省略することができます。

.hoge
#fuga

これらはどちらも次のように変換されます。

<div class="hoge"> </div>
<div id="fuga"> </div>

属性

要素(属性="値")とすることで、属性を記述することができます。

属性が複数ある場合は、スペースで区切り複数指定することができます。

a(href="./hoge.html") hogeページへのリンク
img(src="./image.png" alt="image")

これは次のように変換されます。

<a href="./hoge.html">hogeページへのリンク</a>
<img src="./image.png" alt="image"/>

//を用いてコメントを挿入することができます。

// hogehoge
p fugafuga

<!-- hogehoge -->
<p>fugafuga</p>

出力されるHTMLにコメントを残したくない場合は//-を用います。

//- hogehoge
p fugafuga

<p>fugafuga</p>

変数

- var 変数名 = 値とすると事で、JavaScriptと同様に変数を定義できます。

定義した変数はテキストに埋め込んだり、次以降で紹介する条件分岐等で使用できます。

- var hoge = "fuga"
p= hoge

これは次のように変換されます。

<p>fuga</p>

条件分岐

if ~ else文を用いて条件毎にレンダリングする要素を変えることが出来ます。

次のような構文になります。

if 条件式
  条件式がtrueの時レンダリングする要素
else
  条件式がfalseの時レンダリングする要素

次のようなPugを記述します。

- var auth = false
if auth
  p ログインしています
else
  p ログインしてください

これは次のように変換されます。

<p>ログインしてください</p>

反復

each文を使って、配列・オブジェクトの反復ができます。

次のような構文になります。

each 配列から順に取り出した値 in 反復する配列
  取り出した値を使用した反復処理

次のようなPugファイルを記述します。

ul
  each item in ["hoge","fuga","piyo"]
    li item: #{item}

これは次のように変換されます。

<ul>
  <li>item: hoge</li>
  <li>item: fuga</li>
  <li>item: piyo</li>
</ul>

他のファイルの読込

共通部分となるファイルを用意しておいて、他のファイルからincludeで読み込むことができます。

WEBサイト上で共通部分となるヘッダーや、フッターをこの方法で読み込むようにすると、コードの記述量が減り、見通しもよくなります！

include用のフォルダを用意し、そこに_header.pugと_footer.pugの二つのファイルを用意します。

sample/
  ├ node_modules/
  ├ public/
  │  ├ index.html
  │  └ css/
  │     └ style.css
  ├ src/
  │  ├ pug/
  │  │  ├ index.pug
  │  │  └ include/  │  │     ├ _header.pug  │  │     └ _footer_.pug  │  └ sass/
  │     └ style.scss
  └ package.json

PugもSassと同様に、ファイル名の先頭にアンダースコア_を付けておくと、HTMLとして出力されないようになります。

これらは他のPugファイルから読込んでHTMLに出力するのでアンダースコアを付けておきましょう。

次のようにPugを記述します。

//- _header.pug
header 
  p page header

//- _footer.pug
footer
  p page footer

これら二つのPugファイルをinclude 読込むPugファイルのパスとして読込すると、その箇所で読み込んだファイルが展開されます。

//- index.pug
body
  include ./include/_header.pug
  main
    p hogehoge
  include ./include/_footer.pug

読込むPugファイルのパスは、ファイルから見た相対パスとします。ここではindex.pugを基準としています。

これは次のように変換されます。

<body>
  <header> 
    <p>page header</p>
  </header>
  <main>
    <p>hogehoge</p>
  </main>
  <footer>
    <p>page footer</p>
  </footer>
</body>

まとめ

かなりHTMLの編集が楽になりそうですね！

特に後半の条件分岐、反復、他のファイルの読み込みあたりは上手に使いこなせばコーディングの効率も上がるし保守性も良くなります！

ぜひ使ってみてください！

次の記事
WEB制作の各種タスクを自動化するタスクランナーについて紹介します！

npm scriptsを使ってWeb制作を効率化しよう | KATSU LOG

タスクランナーとしてnpm scriptsを使用する例を紹介します。

https://katsu-dev.netlify.app/blog/web/env/scripts/