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

悩んでいる男の子

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

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

• 本記事の内容

• Pugとは？
• Pugの使い方

• 本記事の執筆者

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

いずみん

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

プログラミングを学びたい方必見！

オンライン特化のプログラミングスクールなら「TechAcademy [テックアカデミー] 」が超おススメ！

副業としてプログラミングを学びたい方にもおすすめのスクールです！

• 初心者が9割以上なので挫折せずに学べる！
• 受講者に副業の仕事を1案件以上斡旋！ ※条件あり
• オンライン完結型なので、在宅でもお仕事可！
• プロのメンターがサポートしてくれる！

キャリアカウンセリングやメンター相談が無料でできるのもおすすめポイントです！

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について解説しました。

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

ではまた！