Share

こんにちは、ますだです。
HTMLコーディングを行う時、meta情報やheaderなど、共通の部分を修正する時めんどくさくないですか?

同じ情報なのに、ファイルごとに修正するとなると気が狂いそうになるのは、僕だけじゃないはず。

そこで今回は、そんな悩みを解決してくれるpugについて書いていきたいと思います。

pugとは

pugはHTMLマークアップを行うためのテンプレートエンジンの1つです。
テンプレートエンジンとは、データとテンプレートを組み合わせて、文字列やファイルを作成する仕組みです。
使用することで、以下のようなメリットがあります。

①閉じタグを記述する必要がなくなる
②ファイルを分割して管理がしやすくなる
③共通部分を使い回せるので、修正が容易になり、記述量も少なくなる
④JavaScriptと同様に、数、文字列、配列、オブジェクトなどを扱える

個人的には2.と3. を重宝しています。
では早速導入方法から見ていきましょう。

pugの導入方法

今回のディレクトリ構造は以下のような構成です。

node_modules
gulpfile.js
package.json
dev  // 開発フォルダ
  ├ index.pug
  └ parts
    ├ header.pug
    └ footer.pug  
dest  // 出力フォルダ
  ├ index.pug
  └ img  // 画像フォルダ

gulp-pugをインストール

ターミナルにコマンドを入力してインストールを行います。

npm install -D gulp-pug

gulpfile.jsを編集

const gulp  = require('gulp');
const pug   = require('gulp-pug');

gulp.task('default', ()=> {
    return gulp.src(['./dev/*.pug' , '!./dev/pug/_*.pug'])
    .pipe(pug(doctype : "html"))
    .pipe(gulp.dest('./dest/'))
});

_〇〇〇〇.pugファイルは、htmlファイルを出力しない設定にしています。

基本的な使い方

Pugでは、インデントで階層化して書いていきます。

main#main
  ul
    li
      a(href="/about") 

これをコンパイルするとこんな感じになります。

<main id="main">
  <ul>
    <li><a href="/about">About</a></li>
  </ul>
</main>

コンパイルは、Sassの時と同じで大丈夫です。

npm gulp

これでpugファイルがコンパイルされて、htmlファイルが出力されます。

便利な機能たち

ファイルの分割してテンプレート化

別ファイルを読み込んで書き出すことが可能です。
headerとfooterを別ファイルに分割して、読み込んでみます。

include parts/_header.pug
main#main
  ul
    li
      a(href="/about") 
include parts/_footer.pug
header
  h1
    a(href="#")
      img.logo(src="img/logo.svg" alt="sample")
footer
  p copyligh samplet

↓ コンパイル

<header>
  <h1>
    <a href="#"><img src="img/logo.svg" alt="sample" class="logo"></a>
  </h1>
</header>
<main id="main">
  <ul>
    <li><a href="/about">About</a></li>
  </ul>
</main>
<footer>
  <p>copyligh samplet</p>
</footer>

これでheaderに修正が入っても、header.pugだけ編集すれば、全ページに反映されるようになりました。
もちろんheaderやfooter以外でも使用可能です。

繰り返し

まずは簡単な繰り返しから。
liタグに数字を入れていきます。

ul
  each num in [1, 2, 3, 4, 5]
    li= num

↓ コンパイル

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

続いて実践的な内容。メニュー部分のコーディングです。
連想配列にループ処理を加えて出力します。

ul
  - 
    let list =[
      {
        link: "/",
        img : "home",
        alt : "HOME"
      },
        {
        link: "about",
        img : "about",
        alt : "About"
      },
        {
        link: "news",
        img : "news",
        alt : "News"
      }
    ]

  each item in list
    li
      a(href=`${item.link}`)
        img(src=`img/common/${item.img}.svg`, alt=`${item.alt}`)
        p #{item.alt}

↓コンパイル

<ul>
  <li>
    <a href="/">
      <img src="img/common/home.svg" alt="HOME">
      <p>HOME</p>
    </a>
  </li>
  <li>
    <a href="about">
      <img src="img/common/about.svg" alt="About">
      <p>About</p>
    </a>
  </li>
  <li>
    <a href="news">
      <img src="img/common/news.svg" alt="News">
      <p>News</p>
    </a>
  </li>
</ul>

普通のHTMLタグを編集するよりも、格段にわかりやすいですね。
また、メニューが増える時も、連想配列の部分を増やせばいいだけなので、管理も楽です。

条件分岐

続いて条件分岐です。
var pageでページを定義しています。
ここをファイルごとに変えれば、ページに応じた内容を出力可能です。

- var page = "HOME";

case page
  when "HOME"
    h1 sample
  when "about"
    p about
  default
    p サンプル

↓コンパイル

<h1>sample</h1>

おわりに

簡単ではありますが、pugを紹介しました。

繰り返しや条件分岐を組み合わせれば、もっと楽にコーディングすることができます。
しかし、やりすぎても逆にわかりにくくなってしまう恐れがあるので、必要に応じて使う機能を選んでコーディング環境を構築すればいいかと思います。

他にも便利な機能・使い方があるので気になる方は、公式ページを読んでみてください。

https://pugjs.org/api/getting-started.html

株式会社 ヤップ エンジニア

升田 圭亮

ヤップのコーディング、プログラミング担当。日々学んだことを発信。

記事中の画像データを使いたい!や、この記事もっと詳しく書いて欲しいなどのご要望、ご意見は上記お問合せをクリック、もしくはお電話ください。

06-6445-7317