2014年頃からPug（当時はjade）を使ってHTMLのコーディングを進めてました。
最初はこんな書き方もできたほうが良いのかなくらいで考えていたのですが、最近ではPugがないほうがしんどい状態になってきました。
保守が苦手だったり、修正時にミスが多い人はPugを使うことでコーディングの質を向上させることができます。
今日はそんなPugのメリットをご紹介します。
そもそもPugとは
PugはJavaScriptで動くテンプレートエンジンです。
HTMLに書き出したりしてくれます。
CSSで言うところのSASS・SCSSみたいなものだと思ってください。
あまり一緒にはしたくないのですが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で公開しているので、まずはそちらで試してみてはいかがでしょう。
記述方法については下記サイトが参考になります。
【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が使えない事がリスクになる未来も存在してるとちょっとだけ伝われば幸いです。
今できてるから良いという気持ちはわかりますが、世間はどんどん効率化してより早く制作できる環境を作ってる中昔ながらの手法で制作していっては辛みばかりが溜まるだけではないでしょうか。
私も最初は失敗の連続でようやく使えるようになってきました。
失敗できるうちに失敗出来るのは良い経験になります(ゝω・)