Cntlog > スキルアップ・ノウハウ > コーディング > Webデザイナーが効率よくHTMLコーディングができるPugのメリット

Webデザイナーが効率よくHTMLコーディングができるPugのメリット

2014年頃からPug(当時はjade)を使ってHTMLのコーディングを進めてました。
最初はこんな書き方もできたほうが良いのかなくらいで考えていたのですが、最近ではPugがないほうがしんどい状態になってきました。

保守が苦手だったり、修正時にミスが多い人はPugを使うことでコーディングの質を向上させることができます。

今日はそんなPugのメリットをご紹介します。

そもそもPugとは

PugはJavaScriptで動くテンプレートエンジンです。
HTMLに書き出したりしてくれます。
CSSで言うところのSASS・SCSSみたいなものだと思ってください。

公式リファレンス
githubリポジトリ

あまり一緒にはしたくないのですがadobe社のDreamweaverのテンプレートの機能をイメージしていただくとわかりやすいです。
ようは色んなところでの共通化でできます。

出来ること

結果的にはHTMLにコンパイルするので、納品物としては同じかもしれませんが制作過程が大きく異なります。

基本的にはJavaScriptっぽい書き方になるのでプログラムが苦手なWebデザイナーは最初敬遠されるかもしれませんが、慣れてしまえば簡単です。

ただのHTMLできない以下の事はPugでは可能です。

  • 閉じタグなしで記述ができる
  • divは省略できる
  • 変数が使える
  • if文で分岐ができる
  • loopが使える
  • Mixinが使える
  • extendが使える
  • includeが使える
  • jsonが渡せる
  • コメントはHTMLにか書かれないようにできる

書き方例

Pugは下記のようなインデントを基準とした書き方をします。

html(lang="en")
head
title= pageTitle
script(type='text/javascript').
 if (foo) bar(1 + 5)
body
h1 Pug - node template engine
#container.col
 if youAreUsingPug
   p You are amazing
 else
   p Get on it!
 p.
   Pug is a terse and simple templating language with a
   strong focus on performance and powerful features.

上記のように記述すると下記のようにコンパイルされます。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pug</title>
    <script type="text/javascript">
      if (foo) bar(1 + 5)
    </script>
  </head>
  <body>
    <h1>Pug - node template engine</h1>
    <div id="container" class="col">
      <p>You are amazing</p>
      <p>Pug is a terse and simple templating language with a strong focus on performance and powerful features.</p>
    </div>
  </body>
</html>

使い方

私はgulpでPugをコンパイルしています。
公式がgithubで公開しているので、まずはそちらで試してみてはいかがでしょう。

gulp-pug

記述方法については下記サイトが参考になります。
【Pug】ゴリラでもわかるJade改めPug入門

便利なシーンの紹介

今回は具体的な書き方などより、Pugにはどんなメリット・使い道があるのかを中心に紹介します。

インブラウザデザインに最適

インブラウザデザインとはコーディングベースからデザインをしていく制作フローです。
レスポンシブサイトが当たり前になってきた今、全端末のデザインをデザインツールで作るのは非効率というシーンがありそういったときに利用されます。

私もワイヤーベースが固まって来たらインブラウザデザインでとりあえず組んでいく制作フローを好んでしています。

なぜPugがインブラウザデザインに最適かというと、Pugは共通化が得意で制作途中で起こる修正・変更を一箇所直せば全ページ修正できたりするのです。

例えば、制作時metaタグにOGPの記述を忘れていたりしてもPugのextendやincludeを使えばすぐに全ページに反映できます。

他にもforなどのloopを使ったりすると、さくっと同じcomponentを作成できるので、といあえず画面をさくっと作るのが早いです。
もちろんサクッとつくったcomponentは後で直せば全体に反映されるので安心してコーディングに集中できます。

修正に強いのでとりあえず作るみたいなスピード感のある案件でも柔軟に対応できます。

CMSの実装が楽

WordPressやConcrete5などCMS案件のときにPugを使うとそのときからloopやif文を多用して作成しているので、共通部分がすぐに判断できます。

これによってプログラマーにHTMLを渡すときにどことどこが共通化されててみたいなコミュニケーションを減らすことができます。

よくHTMLでは動いているけどCMSに実装するときには無理があるコーディングをするWebデザイナーさんもいるかと思いますがPugを使えば自然とそういったシーンを減らせます。

CMSのみならずプログラマに渡すモック的なHTMLを作るときでも同様に役立ちます。

githubの管理が楽

Pugを使えば、圧倒的にHTMLのコーディング量が減らせるので、コードのレビューもしやすくなります。
共通化している分、修正の漏れも起きにくく素早く、品質の高いコードが自然と生まれます。

またコードのはextend,mixin,includeなどで分割できるのでコンクリフトが起きにくくなります。(この場合HTMLはバージョン管理に含みません)

引き継ぎが楽

引き継ぎされた方がPugを使える前提にはなりますが、共通化している以上、影響範囲が見えやすいので案件の引き継ぎがしやすいです。
馬鹿みたいにコピペの嵐みたいなHTMLとはもうおさらばできます。

ABテストやちょっとずつのリニューアルが楽

ABテストをしようとした時に共通化していると少しの修正で全体の修正ができるので気軽にABテストが行えてサイトの品質が上げやすくなります。

どうようにリニューアル案件でも一気に直すとかではなく、少しずつ共通化していってリニューアルするような制作フローも可能になります。
というか一気にリニューアルってリスクしかないと思うんですけど、なんでみんな一気にリニューアルしたがるのだろう…。

分業が楽

コーダが複数人いた場合HTMLのコーディングすると、ページ毎に担当を振り分けられたりしますが、Pugを使えばcomponent毎にタスクを分けれたりします。
また一人の修正が全体にも反映させやすいので炎上案件などとにかく人の数を増やして対応するときでも品質を維持しながらプロジェクトを進めることが可能です。

最後に

Pugを使えば今まで困ってた業務を改善出来るかもと思った人は是非使って見てください。

新しい事へのチャレンジが不安な気持ちを持ってる方は、Pugが使えない事がリスクになる未来も存在してるとちょっとだけ伝われば幸いです。

今できてるから良いという気持ちはわかりますが、世間はどんどん効率化してより早く制作できる環境を作ってる中昔ながらの手法で制作していっては辛みばかりが溜まるだけではないでしょうか。

私も最初は失敗の連続でようやく使えるようになってきました。
失敗できるうちに失敗出来るのは良い経験になります(ゝω・)

関連記事

RGBAをIE8でも使う簡単な方法 CSS3で使いたい機能というと角丸やグラデーション系が多いと思いますが、割りとRGBAも便利かなと思っています。 PIEを始め、角丸やグラデーションはIE8でも使えるようにという対策はありますが、RGBAはあまり聞きませんね。 私はPHPを使ってRGBAで色指定(透過率も)したものを画像生成する...
コーディングが苦手な初心者Webデザイナーに上達するCSSの勉強法... Webデザイナーになろうとして、まず最初につまずくのがコーディングです。 CSSは慣れてくると簡単なのですが初めて触るとなると、何から手を付けてよいかわからない、何が正解がわからないなどの理由で挫折する人を多く見かけます。 本記事ではCSSが全然わからない方がCSSのコーディングに慣れるため...
【2017年】よく使うmetaタグとかをまとめてみた... Web制作を長いことやっていても、中々勉強する機会のないmetaタグやlinkタグでよく使うものを整理しました。 これまで必要な度にコピペしていた人、これからWebを勉強する人の参考になれば幸いです。 使いやすいようにスプレッドシートにもまとめています。 記事を読むのが煩わしいかた...
今更だけどretina対応を考えてみた そろそろiPadminiのretina対応が発表されて意識の高い気分の人たちが、「うむ、やはり時代はretinaだな」とか言うんじゃないかと睨んでます。 PC版であまりretinaディスプレイを意識して作った事はないのですが、スマホは別ですね。 まだまだ通信量を下...
Sassの人気に嫉妬!でもLESSにだっていいとこあるんだよ... 最近「Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語 」という本が出版されてSassがさらに注目されていますね。 個人的にはいよいよSass一択になってLESSが淘汰されていっちゃうのかなと心配しています。 そもそもLESSって何?って方もいるでし...
今更だけど押さえておきたいHTML5のマークアップやAPIの基本的なところ... HTML5の言葉が流行りだして結構な時間が経ちましたが、何が使えて、何がまだ使いにくい状況なのかをずっと放置していましたのでマークアップ、API周りについて少しまとめてみました。 HTML5で追加された基本的なタグ 新しいタグの追加によって文章構造がより明確化できるようになり...