月間18,000PV達成! 収益は毎日発生中! 記事は毎日更新中! 東京でエンジニア武者修行中! ギランバレー症候群に関する情報を集めています

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

             
  • 2018.08.09
  • IT
Pug入門編!インストール方法・使い方を簡単に解説!
Advertisement

 

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

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

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

 

 

Pugとは

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

 

 

Pugのメリット

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

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

 

 

Pugのデメリット

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

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

 

 

Pugを使うには

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

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

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

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

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

①「chocolatey」を利用して、「nodist」をインストールする

②「nodist」を利用して、「Node.js」「npm」をインストールする

③「npm」を利用して、Pugをインストールする

 

 

Advertisement

 

Pugのインストール

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

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

 

 

 

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

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

 

 

次に、「nodist」を利用し、「node」をインストールします。上記のコマンドを入力してください。

 

 

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

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

 

 

上記のコマンドにより、Pugをインストールします。これでPugが使えるようになりました。

 

 

Pugを実際に使ってみよう!

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

 

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

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

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

・インデントが重要になる

・閉じタグは不要

・divタグは省略できる

 

 

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

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

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

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

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

 

 

pug⇒html

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

 

 

まとめ

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

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

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

ではまた!

Travelerを知らないの?