こんにちは、毎日風が冷たいですね！
私は自転車通勤なので、会社についたときには指先が冷えて冷えて…
真冬がくるのが怖いです笑
変な言い訳はせずに仕事をします、はい。
今回は少し前から気になっていたpugについて私自身が身に付けた知識をここでまとめておきます。
本当の本当に初心者向けのブログですので、少しでも触ったことがあるかたには物足りないと思います。
あしからず…
実際に会社で導入しているわけでもなく、弊社は基本ワードプレスを使用してサイトを作成しているので
PHPとの相性の関係もあり、会社として取り入れることはもう少し先になるかもしれませんが、知識としてもっておくのは
大事だと思います。
ということで、そもそもpugって何て読むん！？それなんなの！？というかたに読んでいただけるように
まとめました～。
pugとは
そもそもpugとはなんなのか。
pugはパグと読みます。前はjade（ジェード）という名前でしたが数年前にpugに名前が変更しました。
バージョンとしてはJade 2.0.0からPugになるそうです。
じゃあpugはなんなのか？なにをするものなのか？
私はcssでいうscssやsassのようなものだと思っています。
つまりHTMLの作成を簡単になおかつ高速にしてくれるものです。
ソースを省略して書くことができるのでとっても便利！
sassやscssがそうであるように、HTMLもタグなどを省略してかけるのです。
では
pugで何が簡単になるの？
1.記述が省略可能
⇒タグ不要でclassやidの記述が不要
2.ファイルの分割が可能
⇒includeで読み込める、見た目も管理もシンプルに！
3.変数があってすごく便利！
pugの導入方法
pugを使用するにはNode.jsというjsが必須となります。
なぜならpugはNode.jsで動いているからです。
Node.jsをインストールする場合は、公式サイトからインストールしてみてください。
Node.jsとpugをインストールしたら（インストール方法は省略させていただきます…）、index.pugを好きな場所に作成してみてください。
pugの基本書き方
書き方はHTMｌを普段から使用しているかたはなんてことありません。
こんな感じです。
doctype html
html(lang="ja")
head
meta(charset="utf-8")
style(src="css/style.css")
title pugについてのcreaornote
body
h1.logo クリエイターノート
.content
.inner
h2.main_title コンテンツ1
タグがなくなって、classとidを指定しただけで勝手にこれまでのHTMLのように記述をしてくれます。
他にもこういった書き方をします。
nav
ul
li: a(href="#") メニュー1
li: a(href="#"): span メニュー2
li: a(href="#") メニュー3
li: a(href="#") メニュー4
li: a(href="#") メニュー5
コンパイルの結果は以下になります。
<nav>
<ul>
<li><a href="#">メニュー1</a></li>
<li><a href="#"><span>メニュー2</span></a></li>
<li><a href="#">メニュー3</a></li>
<li><a href="#">メニュー4</a></li>
<li><a href="#">メニュー5</a></li>
</ul>
では基本的なとこを紹介したので、ほかの書き方もご紹介します！
とくに便利なincludeやforやeachは使ってほしいです！
pugのいろいろな書き方
●属性について
hrefやsrcなどの属性は次のように記述します。
//CSS link(link="css/style.css") //js script(src="js/common.js") //リンク a(href="#") メニュー1 //input input(type="text" checked) input( type="radio" name="test" checked )
●idとclassの書き方
上でも書いていますが、例えばclassを二つ指定したい場合は次のように記載します。
//pugでの記述
section#main
.content index
.inner
//コンパイル結果
<section id="main">
<div class="content index"></div>
<div class="inner"></div>
</section>
●改行について
改行は個人的にはくせの書き方。慣れてしまうとまぁ使いやすいんでしょうけどね。
//pugでの記述 p |ここにテキストが入ります。ここにテキストが入ります。 br |ここにテキストが入ります。ここにテキストが入ります。 //コンパイル結果 <p>ここにテキストが入ります。ここにテキストが入ります。<br>ここにテキストが入ります。ここにテキストが入ります。</p>
次にincludeやfor分を使用する書き方です。
●includeについて
はじめにheader.pugやfooter.pugなどテンプレートとなる部分を作成しておきます。
index.pugには次のような記載をします。
//pugでの記述 include common/header.pug section#main .content index .inner include common/footer.pug
こうするとheaderとfooterに記載しあるHTML（pug）を読み込んでくれます。
すごい便利ですね！各ページで修正する必要もありません♪
●変数について
pugは変数をしようすることができます。
例えば…
- var title = "ここにタイトルが入ります。";
とtitleに変数をいれるとこういった使い方ができます。
header
h1.logo #{title}
あー便利ですね！最高です！
いろんなところに使えば作業が一気に楽になります。
使いすぎは注意ですけどね。
次に先ほどから言っているfor文。
section#main
.content.index
ul.news
- for (var i = 0; i < 5; i++)
li.news_list
a(href="#")
h3(class="title#{i}") お知らせタイトル
p ここにテキストが入ります。ここにテキストが入ります。
これをコンパイルすると
<section id="main">
<div class="content index">
<ul class="news">
<li class="news_list">
<a href="#">
<h3 class="title1"> お知らせタイトル</h3>
<p>ここにテキストが入ります。ここにテキストが入ります。</p>
</a>
</li>
<li class="news_list">
<a href="#">
<h3 class="title1"> お知らせタイトル</h3>
<p>ここにテキストが入ります。ここにテキストが入ります。</p>
</a>
</li>
<li class="news_list">
<a href="#">
<h3 class="title1"> お知らせタイトル</h3>
<p>ここにテキストが入ります。ここにテキストが入ります。</p>
</a>
</li>
<li class="news_list">
<a href="#">
<h3 class="title1"> お知らせタイトル</h3>
<p>ここにテキストが入ります。ここにテキストが入ります。</p>
</a>
</li>
<li class="news_list">
<a href="#">
<h3 class="title1"> お知らせタイトル</h3>
<p>ここにテキストが入ります。ここにテキストが入ります。</p>
</a>
</li>
</ul>
</div>
</section>
全然行数違いますよね！ソースが短くてしかもすぐに記述できるのでいいですね～♪
最後にeachです。
eachはもっと簡単。笑
ul
each val in ["メニュー1", "メニュー2", "メニュー3", "メニュー4", "メニュー5"]
li: a(href="#")= val
こういうふうに記述すると
<ul>
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
<li><a href="#">メニュー4</a></li>
<li><a href="#">メニュー5</a></li>
</ul>
こうなります。
どうでしたか？ちょっと使ってみたくなりませんか？
実際にこれでサイトをコーディングするようになれば今の倍くらいは早く仕事できるんじゃないでしょうか？
フリーランスの方などは導入しやすいと思うので試してみてくださいね～！