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

  • 投稿日
  • 更新日
  • 著者 くまだ
  • カテゴリー Web制作

どうも、くまだ です。

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

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

CSSを楽に書ける「Sass」については下記の記事をご覧ください。（Dart-Sass対応）

【Sass】超ざっくりDart-Sass【環境構築】
Web制作でよく使う言語の一つに、Sass（サス）というのがあります。ファイルを読み込むのによくつかっていた@importが2022年10月ごろにサポート終了ということで、それへ…
weblife.ppmp556.com

LPデザインのお仕事募集中です↓↓↓

LPデザインのお仕事募集中【固定表示記事】
ランディングページ（LP）デザイン（＋コーディング）のお仕事を募集しております。 なお、コーポレートサイトのよ…
weblife.ppmp556.com

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やります。

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

HTML Pug 効率化

この記事を書いた人

くまだ

記事一覧