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

最近耳にするようになった「Pug」。

HTMLとは違い、閉じタグがいらないなどのメリットがありますが、こういうものは実際に使って感じることが一番です。

ということで今回は、「Pug」の使い方を簡単に解説していきます！

Pugとは

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

Pugのメリット

Pugのメリットとして僕が一番いいなと感じるのは「閉じタグがいらない」という点です。

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

Pugのデメリット

純粋なHTMLの書き方に慣れている方は、若干とっつきにくいと思います。

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

Pugを使うには

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

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

「Node.js」をインストールする際によく利用するものとして「nodist」があるので、今回はそれを利用します。

また、「nodist」を簡単にインストールする方法として、「chocolatey」を利用します。良く分からないですかね。。

順番としては以下になります。

Pugのインストール

さて、まずは「chocolatey」を利用して、「nodist」をインストールします。

「chocolatey」に関しては別記事にしているので以下を参照してください。もちろん普通にインストールしてもらっても構いません。

 Traveler

chocolateyとは？Windowsで簡単にソフトをインストール！

https://traveler0401.com/chocolatey/

開発をする際にまずやることは「環境構築」だと思います。この環境構築ですが、色々なソフトをインストールしなくてはならず、かなり面倒ですよね。そこで、今回ご紹介するのが「chocolatey」です。chocolateyはコマンド一発でJDKやgitなどを簡単にインストールでき...

＞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を実際に使ってみよう！

では、早速Pugを使用してみましょう！

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

ファイル名は「index.pug」です。

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

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

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

＞pug index.pug --pretty

上記のコマンドをindex.pugのある場所で実行します。

すると、index.htmlファイルが作成されます。

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

まとめ

今回はPugの使い方を簡単に解説しただけですが、基本を理解しているのとそうでないのとでは全然違います。

まずはコードを書いて、Pugというものを理解しちゃいましょう。

そして、ついでにNode.jsも理解できるといいですね。

ではまた！