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

Uncategorized

『※ 当サイトではアフィリエイト広告を利用しています』

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

悩んでる人
悩んでる人

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

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

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

✍ 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…
mk196790903.com
2026.04.22

✔ Gulp を使うメリット

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

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

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

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

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

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

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

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

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

  1. gulpfile.js に「Pug をコンパイルするタスク」を書く
  2. gulp コマンドを実行
  3. 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）変数名 = 値 で宣言
  • = 変数名 で表示
  • 共通ファイルにまとめると便利

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

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