
Pugを使ってみたいんだけど、基本的なことが分からないんだよね。。
こんな悩みを解決します。
- 本記事の内容
- Pugとは?
- Pugの使い方
- 本記事の執筆者


- 元エンジニア(歴7年)、資格保有数約20個(IT系以外も含む)
- 物販月利50万円⇒脱サラ
- 物販、システム開発、アフィリエイト、プログラミング、投資をやっています。
- 物販は彼女と楽しみながらやっています!
今回は、Pugについて解説します。



本記事を読めばPugの基礎が理解できるので、是非最後まで読んでみてください!
Pugとは
Pugとは、JavaScriptで動くテンプレートエンジンです。
Pugのメリット
Pugのメリットとして、「閉じタグがいらない」という点が挙げられます。
全体的なコード量が少なくなるので、保守性が高くなります。
Pugのデメリット
純粋なHTMLの書き方に慣れている方は、若干書きにくいです。
慣れが必要なので、教育コストがかかるのがPugのデメリットです。
Pugを使うには
Pugを使うには、「Node.js」と「npm」が必要になります。
Pugをインストールするまでの手順は以下のようになります。
- 「chocolatey」を利用して、「nodist」をインストールする
- 「nodist」を利用して、「Node.js」「npm」をインストールする
- 「npm」を利用して、Pugをインストールする
Pugのインストール
まずは、「chocolatey」で「nodist」をインストールします。


nodist -v
「nodist」をインストールしたら、確認のために上記コマンドを実行します。
nodist dist
nodist + 6.9.5
nodist 6.9.5
次に、「nodist」で「node」をインストールします。
node -v
npm -v
「Node.js」がインストールされているかを確認します。
npm install pug-cli -g
Pugをインストールします。
Pugを実際に使ってみよう!
早速Pugを使ってみましょう。
doctype html
html(lang="ja")
head
meta(charset="utf-8")
style(src="css/style.css")
title タイトル
body
h1 見出し1
#container
p Pugテストページ
上記がPugのサンプルコードになります。
細かい書き方はここではお伝えしませんが、以下が重要なポイントになります。
- インデントが重要になる
- 閉じタグは不要
- divタグは省略できる
pugファイルを作成しただけでは画面を見ることはできません。
このpugファイルをhtmlファイルに変えましょう。
pug index.pug --pretty
上記コマンドを実行すると、index.htmlファイルが作成されます。


pugファイルからhtmlファイルが作成できました。
まとめ
今回は、Pugについて解説しました。
結構便利そうなので、今後も使ってみようと思います。
ではまた!
- Pugとは、JavaScriptで動くテンプレートエンジンである。
- Pugのメリットは、閉じタグがいらないこと。
- Pugのデメリットは、教育コストがかかること。
- 自由な生き方がしたいなら!
自由な生き方をするためには、稼ぐスキルを身に付けなければなりません。
当サイト「リバトレ」では稼ぐスキルに関する情報を日々発信しているので、興味のあるものから見て頂ければ嬉しいです。
コメント