Pug入門編！インストール方法・使い方を簡単に解説！

悩んでいる男の子

Pugを使ってみたいんだけど、基本的なことが分からないんだよね。。

こんな悩みを解決します。

• 本記事の内容

• Pugとは？
• Pugの使い方

• 本記事の執筆者

プロフィール

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

• Twitter
• Instagram
• Facebook
• GitHub

プロフィールページへ

今回は、Pugについて解説します。

いずみん

本記事を読めばPugの基礎が理解できるので、是非最後まで読んでみてください！

Pugとは

Pugとは、JavaScriptで動くテンプレートエンジンです。

Pugのメリット

Pugのメリットとして、「閉じタグがいらない」という点が挙げられます。

全体的なコード量が少なくなるので、保守性が高くなります。

Pugのデメリット

純粋なHTMLの書き方に慣れている方は、若干書きにくいです。

慣れが必要なので、教育コストがかかるのがPugのデメリットです。

Pugを使うには

Pugを使うには、「Node.js」と「npm」が必要になります。

Pugをインストールするまでの手順は以下のようになります。

1. 「chocolatey」を利用して、「nodist」をインストールする
2. 「nodist」を利用して、「Node.js」「npm」をインストールする
3. 「npm」を利用して、Pugをインストールする

Pugのインストール

まずは、「chocolatey」で「nodist」をインストールします。

chocolateyについてはこちら！

chocolateyとは？Windowsで簡単にソフトをインストール！ chocolateyの使い方が良く分からないんだよね。。 こんな悩みを解決します。 本記事の内容 chocolateyとは？chocolateyの使い方chocolateyの各種コマンド 本記事の執筆…

nodist -v

「nodist」をインストールしたら、確認のために上記コマンドを実行します。

「nodist」のバージョンが表示されればOKです。

nodist dist
nodist + 6.9.5
nodist 6.9.5

次に、「nodist」で「node」をインストールします。

node -v
npm -v

「Node.js」がインストールされているかを確認します。

「Node.js」をインストールすると、「npm」も同時にインストールされます。

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 見出し１
    #container
      p Pugテストページ

上記がPugのサンプルコードになります。

細かい書き方はここではお伝えしませんが、以下が重要なポイントになります。

• インデントが重要になる
• 閉じタグは不要
• divタグは省略できる

pugファイルを作成しただけでは画面を見ることはできません。

このpugファイルをhtmlファイルに変えましょう。

pug index.pug --pretty

上記コマンドを実行すると、index.htmlファイルが作成されます。

「–pretty」をつけない場合、htmlファイルが1行に圧縮されます。

pugファイルからhtmlファイルが作成できました。

まとめ

今回は、Pugについて解説しました。

結構便利そうなので、今後も使ってみようと思います。

ではまた！