Web制作で、Pugを使ってみて感じたメリット・デメリット

どうも、くまだ です。

CSSを楽に書くためのメタ言語、Sassがありますが、HTMLを楽に書くための言語も存在します。その一つがPug(パグ)です。

最近Web制作でPugを使ってコードを書いているのですが、実際使ってみて感じたメリット・デメリットを簡単に紹介していきたいと思います。

そもそもPug(パグ)とは

テンプレートエンジンの一つで、かつてはJade(ジェード)(JavaScript Templates)と呼ばれていました。拡張子は「.pug」です。

GulpやWebpackなどを使って〇〇.pug→〇〇html、みたいな感じでコンパイルして使用します。Sassをコンパイルするとcssになるような感じですね。

Pug(パグ)のメリット

Pugのメリットとして感じられたのは、以下です。(たぶん気づいてないだけでもっとあると思う)

  • Sassのように、ファイルを分割管理することができる
  • ひとつ修正すれば、それを使用しているタグすべて反映される

Sassは、ファイルを用途ごとに分割管理することができます。例えば、以下のように。

  • _color.scss
  • _font.scss
  • _base.scss
  • style.scss

これと同様に、HTMLのほうもPugを使えば分割管理することができます。例えば、

  • index.pug
  • _header.pug
  • _footer.pug
  • _head.pug

みたいな感じです。こちらもincludeで使用することができます。下みたいな感じで書きます。

doctype html
html(lang="ja")
  head
    include _head.pug

  body
    div.container

      //- header
      include _header.pug

      main
        // ここにコンテンツが入る

     
      //- footer
      include _footer.pug

head.pugやheader.pug、footer.pugもそれぞれあらかじめ書いておきます。例えばheader.pugに、以下のように書いておくとします。

// _header.pug
  header.header
     h1.header__title 
 

上のやつをGulpやwebpackなどを使ってコンパイルすると、(footer.pugやhead.pugは省略!)下のようになります。

<!DOCTYPE html>
<html lang="ja">
  <head>
   // headの中身が出力される

  </head>
  <body>
  <div class="container">
      <header class="header">
      <h1 class="header__title">
        </h1>
      </header>
   <main>
      </main>
      <footer class="foooter">
      </footer>
    </div>

SassやCSSの場合、とあるclassのスタイルを変更すれば、そのclassを使っているところはすべて反映されるはずです。

ところが、HTMLの場合は、Pugを使っていないと、一つの共通パーツのhtml構造を変更したとしても(例えば、headerやfooter、buttonなどのhtml構造)、同じパーツを使っているhtml構造は書き換えが起こりません。なので、その場合は変更したhtmlをいちいちコピーして、該当の箇所に貼り付けするなどして対応しなければなりません。

ここでPugを使うと、例えばheader.pugのファイルひとつだけ変更すれば、その他のファイルすべて(上の例だと、include _header.pugが使用されているところ)に変更が反映されます。

複数ページがある場合はめちゃくちゃ便利です。

Pug(パグ)のデメリット

Pugをつかって感じたデメリットは、以下です。

  • 導入まで時間がかかる
  • 慣れるまで時間かかる
  • ファイルが増えてくると管理が大変

上で述べたように、GulpやWebpackなど使って環境構築しないと使えないので、そこまでいくのに時間がかかります。導入したら今度は、Pugに慣れないとなりません。

Pugは、閉じタグがないので、普段みているhtmlに慣れている我々からすると、違和感を覚えることでしょう。

そして、分割管理できることはメリットでもありますが、何事もメリットなところは裏を返せばデメリットにもなります。Sassでも分割管理するとファイルの数はなかなかの数になりますが、そこにPugも分割管理したとするとめちゃめちゃファイル数が多くなります。どこになにがあるか把握するのに大変かもしれません。

慣れるまで大変だが、慣れれば爆速にコードが書ける、かも

個人的にSassになれるまで大変で、それに慣れたらcssを書くのが億劫になりました。それと同様に、Pugに慣れれば、最初は大変でもだんだんhtmlを書くのが面倒に感じるようになるんだろうな~と感覚的に思っています。

まあ、なんでも試してみないと便利かそうでないかが分からないし、使いどころを間違えなければめちゃくちゃ使えると思います。

Pugに慣れたら、次はEJSやります。

ここまで読んでくださりありがとうございました。

この記事を書いた人