今回はpugを使用していて便利だと感じた点をいくつか記載してみます。
pugについての説明や何のために使うのかは今回は説明を省くので気になる方はググってみてください!
それでは、さっそくpugを使用して便利だと感じた3つの点を紹介します!
1 記述量が減り可読性が上がる
2 制作スピードが上がる
3 保守運用が楽になる
1 pugを使用するにあたって一番始めに感じたメリットはHTMLに比べて記述量が減ったという点です。pugの記述はHTMLのように閉じタグが無いので単純に記述量が減ります。ここまでだとEmmetを使ってHTMLを記述している人にとっては、特にメリットを感じないと思いますが、閉じタグが無い事による恩恵は、ソース全体の可動性にあると感じました。ソース全体を見たときに、セクションやコンテンツのまとまりがHTMLより分かりやすいです。後から紹介する記述を駆使すると更に可動性が上がります。一旦、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 パラグラフが入ります。 |
↑HTMLとは違い、閉じタグが無いですよね。この構造になれるとソースのまとまりが分かりやすく、可読性が上がります!
この時点で、少し幸せになれた気がします。次を見てみます。
2 次に制作スピードが大幅にあがります。こちらはpugの機能をどのくらい使用しているかによって個人差がありますが、主要な記述をいくつか使うだけでも格段に制作時間を短縮できました。HTMLを記述している時に、同じ記述を何度も書かないといけない記述もpugならソースの記述を減らし、制作スピードを減らせます。
1 2 3 4 5 |
h2 配列をループ ul - var list = ['1','2','3'] each item in list li item #{item} |
↑こちらのように記述すると下のようにHTMLが生成されます。
1 2 3 4 5 6 |
<h2>配列をループ</h2> <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> |
↑何をしてるかというと、配列をループしてます。ブラウザ上では「item 1」「item 2」「item 3」と表示されます。
Listタグをいくつか記述したいときにpugではこういう書き方が出来ます。
同じタグを書かなくていいので、記述量も減り、制作スピードが上がります!。。。?
list増やすならEmmetで楽に増やせるからそんなに意味なくない?と私も最初は思いました。
次に紹介する連想配列で一気に幸福度上昇します。
3 最後に紹介するpugの便利な点は、保守運用が楽になる点です。先ほどの記載で、リストタグをpugの機能でまとめましたが、画像やタイトル、テキストも同様に一括にまとめることができます。
HTMLで記述をしているときに同じコンテンツが繰り返し使われ、コンポーネントの中身の画像や文言のみを変更し、ソースの構造はそのまま利用するデザインは多いかと思います。
この時に下記で紹介するような、ソースの上部に画像と文言をまとめて記載しておく記述方法があります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
h2 連想配列each ul - var list = [ { num: 1, txt: 'aaa.png', }, { num: 2, txt: 'bbb.png', }, { num: 3, txt: 'ccc.png', }, ] each item in list li item #{item.num} : #{item.txt} |
↑こちらのように記述すると下のように吐き出されます。
1 2 3 4 5 6 |
<h2>連想配列each</h2> <ul> <li>item 1 : aaa.jpg</li> <li>item 2 : bbb.jpg</li> <li>item 3 : ccc.jpg</li> </ul> |
↑このような記載をすることにより、保守運用でコンテンツにある◯番目の画像やテキストを差し替え作業をする時に、修正作業の効率が上がります。幸せになれました。
今回紹介したpugの機能は、ほんの一部でまだまだ便利な機能があります。基本的な記述の仕方をいくつか覚えるだけでも
pugを導入する便利さを感じられると思います。sassなどと組み合わせることで更に開発が幸せになるので次回はgulpやbabel、webpackの環境設定などについて
紹介します!