最近耳にするようになった「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をインストールする
Pugのインストール
さて、まずは「chocolatey」を利用して、「nodist」をインストールします。
「chocolatey」に関しては別記事にしているので以下を参照してください。もちろん普通にインストールしてもらっても構いません。
|
1 |
nodist -v |
「nodist」をインストールしたら、確認のため、上記のコマンドをコマンドプロンプトに入力します。
「nodist」のバージョンが表示されればOKです。
|
1 2 3 |
nodist dist nodist + 6.9.5 nodist 6.9.5 |
次に、「nodist」を利用し、「node」をインストールします。上記のコマンドを入力してください。
|
1 2 |
node -v npm -v |
「Node.js」がインストールされているかを確認します。
「Node.js」をインストールすると、「npm」も同時にインストールされます。
|
1 |
npm install pug-cli -g |
上記のコマンドにより、Pugをインストールします。これでPugが使えるようになりました。
Pugを実際に使ってみよう！
では、早速Pugを使用してみましょう！
|
1 2 3 4 5 6 7 8 9 10 |
doctype html html(lang="ja") head meta(charset="utf-8") style(src="css/style.css") title タイトル body h1 見出し１ #container p Pugテストページ |
上記がPugのサンプルコードになります。
ファイル名は「index.pug」です。
細かい書き方はここではお伝えしませんが、以下が重要なポイントになります。
・インデントが重要になる
・閉じタグは不要
・divタグは省略できる
pugファイルを作成しただけでは画面を見ることはできません。
このpugファイルをhtmlファイルに変えましょう。
|
1 |
pug index.pug <span class="hljs-comment">--pretty</span> |
上記のコマンドをindex.pugのある場所で実行します。
すると、index.htmlファイルが作成されます。
「–pretty」をつけない場合、htmlファイルが1行に圧縮されます。
つまり、超見にくいhtmlファイルが作成されます。
pugファイルからhtmlファイルが作成できましたね。
まとめ
今回はPugの使い方を簡単に解説しただけですが、基本を理解しているのとそうでないのとでは全然違います。
まずはコードを書いて、Pugというものを理解しちゃいましょう。
そして、ついでにNode.jsも理解できるといいですね。
ではまた！
