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が使えない事がリスクになる未来も存在してるとちょっとだけ伝われば幸いです。

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

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

関連記事

gulpで作るスタイルガイドをFrontNoteにした... みなさん、スタイルガイドは使ってますか。 私は今年になって使い始めました。 これまではstyledoccoを使っていましたが、長年メンテナンスされてない不安と、使ってるうちに自分のCSS設計と合わない部分がでてきたので乗り換える事にしました。 乗り換えたスタイルガイドジェネレーターは「fron...
コーディングのお供に!CSSの更新を自動で反映させてくれる便利なブックマークレート... 最近コーディングで便利なブックマークレートを見つけましたのでご紹介します。 CSSrefresh このブックマークレートは表示しているページで使われているCSSファイルの更新を自動的に確認してブラウザに反映させてくれるというものです。 コーデ...
Photoshopとかにある描画モードはCSS3で出来るよ【サンプル有り】... CSS3になって角丸はグラデーション、ドロップシャドウなどデザインツールを駆使して行っていたデザインがいとも簡単にできるようになりましたね。 実はCSS3ではphotoshopやFireworksにあるような、描画モード的な表示もできるようになっています。 ...
10分で作れるレスポンシブ(サンプル有)... レプポンシブデザインが当たり前とされてきた昨今、意外にもまだレスポンシブで作った事のないWEBデザイナはたくさんいます。 オーバーテクノロジーのように難しく考える方が多い印象がありますが、ただ実装するなら10分もあれば使えます。 まずはレスポンシブを知る。 レスポンシブは端末によってレイア...
WordPressじゃなくても、コピペでいけるソーシャルボタンの設置方法... 各種ソーシャルボタンってWordPressなら簡単に設置できるけど、自分で普通に設置しようと思うと初めてだとどうやって設置していいかわからないですよね。 そんな人向けに、よく見るデザインを簡単にSNSボタンの設置方法をご紹介します。 はじめに 各種ソーシャルボタンをまとめて簡単に設置できて...
コーディング規約(HTML・CSS)を作ってみた(公開済)... WEB制作に関わって4年位経ちましたが、最近自分のコーディングルールがバラバラで無駄が多いなと思ってきたので自分用にコーディング規約をまとめてみました。 作って見た規約はこちら。 WEB制作ガイドライン コーディング規約を作った理由 オレオレフレームワークやWordPres...