pugで効率的にコーディングを進めるための7ステップ！！

こんにちは、mokoic「HTML を書くたびに、同じコードを何度も書いている気がする…」
「ページ数が増えると修正が大変で、もっと効率よく作業したい」
「Pug や Gulp が便利って聞くけど、どうやって使えばいいのか分からない…」
そんなモヤモヤを抱えている方へ、まずは Pug で効率的にコーディングを進めるための基本を、一緒に整理していきたいと思います。

レンタルサーバー高速・高機能・高安定性の【エックスサーバー】

高速かつ高い安定性を誇る高性能レンタルサーバー【エックスサーバー】稼働率99.99％以上の高い安定性で、業界トップクラスの高コストパフォーマンスを誇る高品質レンタルサーバーです。月額693円(税込)から利用可能。まずは無料お試し10日間。

悩んでる人

「HTML を書くたびに、同じコードを何度も書いている気がする…」
「ページ数が増えると修正が大変で、もっと効率よく作業したい」
「Pug や Gulp が便利って聞くけど、どうやって使えばいいのか分からない…」
そんなモヤモヤを抱えている方へ、まずは Pug で効率的にコーディングを進めるための基本を、一緒に整理していきたいと思います。

そんな悩みを抱える方はとても多いのではないのでしょうか？。

実は、Pug が難しく感じる理由のほとんどは、「HTMLとの違いが見えないまま書こうとしている」ことにあります。タグを省略したり、インデントで階層を表現したりと、Pug には独特の書き方がありますが、その“仕組み”を理解しないまま触ると、どうしても混乱しやすいんです。そこでこの記事では、「Pug で効率的にコーディングする流れ」を、初心者向けに視覚的・構造的に理解できるようまとめました。HTMLがどのように Pug の記法へ変換されるのか、ファイル分割やテンプレート化がどんなふうに効率化につながるのかを、実際のコード例を使いながら“流れ”としてつかめるように解説しています。この記事を読み終えるころには、Pug の基本構造から、変数管理、ファイル分割、テンプレート化まで、サイト制作を自分で進められる状態になっているはずです。

✍ 1. Pugの概要
✍ 2. GulpでPugを使えるようにしよう
✍ 3.Pugのコードを書いてみよう
✍ 4.変数を使おう
✍ 5.ファイルを分割しよう
✍ 6.テンプレートを用意する感覚
✍ 7.まとめ

✍ 1. Pugの概要

Pug は、HTML をより短く、より直感的に書くためのテンプレートエンジンです。最大の特徴は「インデント（字下げ）で構造を表現する」という点。これにより、HTMLでよくある <div> や </div> のような冗長なタグを何度も書く必要がなくなります。たとえば、HTML だと次のようなコードが…

<div class="box">
  <p>Hello</p>
</div>

Pug では、たったこれだけで同じ意味になります。

.box
  p Hello

左がindex.htmlでこれをpugで記述すると右側になります。

閉じタグを気にする必要もなく、コード量は大幅に減ります。
その結果、

作業スピードが上がる
コードの見通しが良くなる
後から読み返しても理解しやすい

特に、ページ数が多いサイトや、同じ構造を繰り返す案件では効果が絶大。
「HTML をもっと効率よく書きたい」と思ったとき、Pug は最初に覚えておくべきツールのひとつです。

Pugを使うと何がいいかというと、以下のようなメリットがあります↓

headerやfooterなど共有パーツに分割できる
ページ用のテンプレートを用意しておける
変数やループの処理を使える

✍ 2. GulpでPugを使えるようにしよう

Pug を使ううえで欠かせないのが、Gulp を使った自動コンパイル環境です。 Pug はそのままではブラウザで表示できないため、HTML に変換（コンパイル）する必要があります。この作業を毎回手動で行うのは、正直かなり面倒です。そこで役立つのが Gulp。 Gulp を使えば、Pug ファイルを保存するだけで自動的に HTML が生成されるようになります。

※Gulpの利用が前提となっているのでGulpを学んでいない方↓

【保存版】Web制作がラクになる Gulp の使い方｜Sass コンパイル・自動リロード・圧縮まで

こんにちは、mokoichiです。悩んでる人「Sass をコンパイルするたびにターミナルを開くのが面倒…」「ベンダープレフィックス付けや CSS の並び替え、もっと自動化できないかなぁ？」「ブラウザを更新するたびにリロードするのが地味にReadMore…

✔ Gulp を使うメリット

保存するだけで HTML が生成される

→ 手動コンパイルの手間がゼロになる

ファイルの変更を監視して自動処理

→ 作業ミスが減り、効率が上がる

Sass や画像圧縮などもまとめて自動化できる

→ コーディング環境が一気に快適になる

特に、Pug と Gulp の組み合わせは “効率化の第一歩” と言えるほど強力です。

✔ Gulp で Pug を動かすイメージ

実際のコードは後で触れるとして、流れとしてはこんな感じです。

gulpfile.js に「Pug をコンパイルするタスク」を書く
gulp コマンドを実行
Pug ファイルを保存するたびに HTML が自動生成される

この「保存したらすぐ反映される」環境があるだけで、作業スピードは大きく変わります。

【環境構築】

●package.jsonを作成。静的ファイルに、ターミナルに「npm init -y」を入力してenter。

●pugのコンパイルに必要なパッケージを入れていく「npm install —save-dev gulp gulp-pug」と入力する。

●gulpとgulp-pugが導入される。

●gulpのタスクを実行するためのファイルgulpfile.jsを作成する。

●gulpfile.jsで、読み込みファイル、出力先のファイルを指定してやる。

出力用のフォルダ（public）を作成して、ここに出力されるファイルを入れる。
パーツ用、テンプレート用のファイル（pugファイル）は、部分的なところを管理しているだけなので、これらは出力されないような作りにする。_(アンダーバー)のファルを設けて、下記のように記述する。

”!./src/**/_*.pug”

✔ 手動コンパイルからの卒業

Pug を使い始めたばかりの頃は、

「とりあえずコマンドでコンパイルすればいいか」と思いがちですが、

ページ数が増えるとすぐに限界がきます。

毎回コマンドを打つのが面倒
コンパイルし忘れて古いHTMLをアップしてしまう
作業の流れが止まる

こうしたストレスをすべて解消してくれるのが Gulp です。

✔ まとめ：Gulp は“効率化の土台”

Pug を本気で使うなら、Gulp の導入はほぼ必須。自動コンパイル環境が整うだけで、コーディングの流れがスムーズになり、作業ミスも減って、制作スピードが一段階上がります。

✍ 3.Pugのコードを書いてみよう

Pug の基本的な書き方は、とてもシンプルです。
HTML のようにタグを開いて閉じて…という作業がなく、インデント（字下げ）で構造を表現するのが特徴です。

まずは、HTML と Pug の違いを見てみましょう。

✔ HTML と Pug の比較

⭐️HTMLの場合

<header>
  <h1>サイトタイトル</h1>
  <nav>
    <ul>
      <li><a href="#">ホーム</a></li>
      <li><a href="#">お知らせ</a></li>
    </ul>
  </nav>
</header>

⭐️Pugの場合

header
  h1 サイトタイトル
  nav
    ul
      li: a(href="#") ホーム
      li: a(href="#") お知らせ

見ての通り、閉じタグがないだけでなく、インデントで階層が一目でわかるため、コードの見通しがとても良くなります。

●上記のようにpugで記述して、npx gulp compilePugでコンパイルすると、下記のindex.htmlのように表示される。

●基本はインデントで改行するするのですが、1行でまとめたい場合は : (コロン)でつなぐ記述もある。

↓

✔ ネスト構造が直感的で読みやすい

Pug は「入れ子構造」をそのままインデントで表現するため、後からコードを見返したときにどこがどの階層なのかがすぐに理解できるのが強みです。特に、複雑なナビゲーションやカードレイアウトなどを作るときに効果を発揮します。

✔ コード量が減る → 保守性UP

Pug を使うと、HTMLよりもコード量が大幅に減ります。

タグの閉じ忘れがなくなる
無駄な記述が減る
コードがスッキリして読みやすい

その結果、保守性が高くなり、チーム開発でも統一しやすいというメリットがあります。

✔ 属性の書き方もシンプル

Pug では、タグの属性もカッコ内にまとめて書けます。

a(href="/contact" class="btn") お問い合わせ

HTMLよりも短く、視認性も高い書き方です。

✔ まとめ：まずは「書いてみる」ことが大事

Pug は見た目こそ独特ですが、慣れると HTMLよりも圧倒的に書きやすいと感じるはずです。まずは簡単な構造から書いてみて、インデントで階層を表現する感覚に慣れていきましょう。

✍ 4.変数を使おう

Pug では、よく使う文言を変数としてまとめて管理できます。
これができるようになると、サイト全体の修正がとても楽になります。
ただ、初心者の方は「変数ってどう書くの？」というところでつまずきがちです。
ここでは実際の書き方をステップ形式で解説します。

✔ ステップ1：変数を宣言する

Pugでは、変数は – var を使って宣言します。

- var siteTitle = "My Website"

これだけでOK。 JavaScriptのような複雑な書き方は不要です。

✔ ステップ2：変数を表示する

変数を表示したいときは、= を使います。

h1= siteTitle

これで <h1>My Website</h1> と同じ意味になります。

✔ ステップ3：複数の変数をまとめて管理する

サイト全体で使う文言は、最初にまとめて宣言しておくと便利です。

- var siteTitle = "Pug Sample Site"
- var description = "PugとGulpで効率的にコーディングするためのサンプルサイト"
- var copyright = "© 2024 mokoichi"

これを共通のファイル（例：_config.pug）にしておけば、
どのページでも読み込んで使えるようになります。

✔ ステップ4：共通ファイルを読み込む

共通の変数ファイルを作ったら、ページ側で読み込みます。

include _config

head
  title= siteTitle
  meta(name="description" content=description)

footer
  p= copyright

これで、どのページでも同じ変数が使えるようになります。

✔ ステップ5：ページごとに変数を上書きする

ページごとにタイトルを変えたい場合は、ページ側で上書きできます。

- var pageTitle = "お問い合わせ"

h2= pageTitle

テンプレートと組み合わせると、
ページタイトルだけ差し替えるといった使い方が簡単になります。

【例】index.pug

const menuCompany = "会社概要テスト"　/（わかりやすいようにテストを追加しているだけです）
const menuContact = "お問い合わせテスト"
const urlCompany = "./company/index.html"
const urlContact = "./contact/index.html"

a.header__link(href=urlCompany) #(menuCompany)
a.header__link(href=urlContact) #(menuContact)

●属性の記述は、もう一つの記述方法がある。

a.header__link(href='${urlCompany}') #(menuCompany)
a.header__link(href='${urlContact}') #(menuContact)

コンパイルして、index.htmlに出力される。

<a class="header__link" href="./company/index.html">会社概要テスト</a>
<a class="header__link" href="./contact/index.html">お問い合わせテスト</a>

【配列を使って、ループで回して表示させる記述】

配列を使うと、何回もaタグやクラス名を使うことなく、コードの効率ができる。

✔ まとめ：変数は「効率化の入口」

初心者がまず覚えるべきポイントはこの3つです。

var （menu）変数名 = 値で宣言
= 変数名で表示
共通ファイルにまとめると便利

これだけで、サイト全体の文言管理が一気に楽になります。

特に複数ページのサイトでは、変数化の効果が圧倒的です。

✍ 5.ファイルを分割しよう

Pug の大きな魅力のひとつが、ファイルを分割してパーツ化できることです。 HTMLでは、ヘッダーやフッターを毎ページにコピペする必要がありますが、 Pugなら共通パーツを1つ作って、必要なページで読み込むだけで済みます。初心者がつまずきやすいポイントでもあるので、ここでは実際の手順で解説します。

✔ ステップ1：共通パーツ用のファイルを作る

まずは、共通で使いたい部分を別ファイルにします。

partsというフォルダ（名前は何でもいいです）の中に、_header.pug、_footer.pugという共通で使うファイルを作成します。
index.pugのheader部分を_header.pugのファイルに移します。（footer部分も同じです）

例：_header.pug

header
  h1 サイトタイトル
  nav
    ul
      li: a(href="#") ホーム
      li: a(href="#") お知らせ

例：_footer.pug

footer
  p © 2024 mokoichi

ポイントはファイル名の先頭に「_」(アンダーバー)を付けること。
これは「このファイルはパーツですよ」という目印になります。

✔ステップ2：ページ側で読み込む

作ったパーツをページ側で読み込むには、include を使います。

例：index.pug

include _header

main
  h2 トップページ
  p ここがトップページの本文です。

include _footer

これだけで、ヘッダーとフッターがページに挿入されます。

✔ ステップ3：複数ページで使い回す

別ページでも同じように読み込むだけ。

例：about.pug

include _header

main
  h2 このサイトについて
  p サイトの説明文が入ります。

include _footer

これで、ヘッダーとフッターを1箇所で管理できる ようになります。

✔ ステップ4：修正は1箇所でOK

もしヘッダーのメニューを変更したい場合は、

_header.pug を修正するだけで、全ページに反映されます。

コピペ不要
修正漏れなし
作業スピードUP
サイト全体の統一感が保てる

これが Pug の「パーツ化」の最大のメリットです。

●例. include ./parts/_header.pug(include ./parts/_footer.pug)

✔ ステップ5：さらに効率化したいなら「extends」へ

ファイル分割に慣れてきたら、次のステップとしてテンプレート化（extends）を使うとさらに効率化できます。
これは次の章で詳しく解説します。

✔ まとめ：ファイル分割は“効率化の基礎”

初心者がまず覚えるべきポイントはこの3つ。

共通パーツは _header.pug のように別ファイルにする
ページ側で include するだけで使える
修正は1箇所でOK → 大幅な効率化につながる

Pug の便利さを最初に実感できるのが、この「ファイル分割」です。

✍ 6.テンプレートを用意する感覚

Pug の効率化で最も強力なのがテンプレート化（extends）です。テンプレートを使うと、ページごとに毎回同じ構造を書く必要がなくなり、「ページ固有の部分だけ」を書けばよくなります。これは、HTMLでいう「共通レイアウト」を作るイメージに近いです。

✔ ステップ1：共通レイアウトを作る

まずは、サイト全体で使う「骨組み」を作ります。

例：_layout.pug

doctype html
html
  head
    title= pageTitle
  body
    include _header

    block content

    include _footer

ポイントは block content。ここが「ページごとに差し替える部分」になります。

例：_page.pug

・srcに_template（何でもいい）というフォルダを作成して、_page.pugというファイルを作成します。

✔ ステップ2：ページ側でテンプレートを継承する

ページ側では、共通レイアウトを extends で読み込みます。

例：index.pug

- var pageTitle = "トップページ"

extends _layout

block content
  main
    h2 トップページ
    p ここがトップページの本文です。

これだけで、

ヘッダー
フッター
HTMLの基本構造

はすべて _layout.pug から自動で読み込まれます。

例：index.pug

✔ ステップ3：別ページでも同じテンプレートを使う

例：about.pug

- var pageTitle = "このサイトについて"

extends _layout

block content
  main
    h2 このサイトについて
    p サイトの説明文が入ります。

ページごとに書くのは block content の中だけ。

これがテンプレート化の最大のメリットです。

✔ ステップ4：修正はテンプレート1箇所でOK

もしヘッダーを変更したい場合は、

_header.pug を修正するだけで全ページに反映されます。

もしサイト全体の構造を変えたい場合は、

_layout.pug を修正するだけで全ページに反映されます。

つまり…

コピペ不要
修正漏れゼロ
ページ追加が爆速
サイト全体の統一感が保てる

という、圧倒的な効率化が実現します。

✔ ステップ5：変数との組み合わせで最強になる

テンプレート化と変数を組み合わせると、ページタイトルや説明文なども簡単に管理できます。

- var pageTitle = "ブログ記事タイトル"
extends _layout

block content
  main
    h2= pageTitle

これだけで、

<title>
<h2>

などに同じタイトルを使い回せます。

✔ まとめ：テンプレート化は“効率化の完成形”

初心者が覚えるべきポイントはこの3つ。

共通レイアウトは _layout.pug にまとめる
ページ側は extends と block content を使う
修正はテンプレート1箇所でOK

テンプレート化を使えるようになると、

Pug の便利さが一気に本領発揮されます。

✍ 7.まとめ

ここまで、Pug を使った効率的なコーディングの流れを順番に見てきました。
HTML をそのまま書くよりも、Pug＋Gulp の環境を整えるだけで作業が驚くほど快適になる ことが伝わったはずです。

✔ このシリーズで学んだこと

Pugの概要

→ HTMLより短く、構造が分かりやすいテンプレートエンジン

Gulpで自動コンパイル環境を作る

→ 保存するだけでHTMLが生成される快適な環境

Pugの基本的な書き方

→ インデントで階層を表現し、閉じタグ不要でスッキリ

変数で共通文言を管理する

→ 修正が1箇所で済む、効率化の入口

ファイル分割でパーツ化する

→ ヘッダーやフッターを共通化して管理コストを削減

テンプレート化（extends）で効率化を完成させる

→ ページ固有の部分だけを書けばよくなる最強の仕組み

✔ Pugは「効率化のための道具」

Pugは、ただ“HTMLを短く書ける”だけのツールではありません。

本質は「サイト全体を効率よく管理するための仕組み」にあります。

コードが読みやすくなる
修正が簡単になる
ページ追加が早くなる
チーム開発でも統一しやすい

こうしたメリットは、実務でこそ大きく感じられます。

✔ 最初は難しく見えても、慣れると手放せない

Pugは最初こそ独特の書き方に戸惑うかもしれません。

でも、

変数
include
extends

この3つを理解すれば、一気に世界が変わります。

「HTMLをそのまま書いていた頃には戻れない」

そう感じる人が多いのも納得です。

✔ 最後に

もしあなたが「もっと効率よくコーディングしたい」と思っているなら、

Pugはその第一歩として最適な選択です。

このシリーズが、あなたの制作環境を一段階アップさせるきっかけになれば嬉しいです。