pugでのコーディング

2020年9月1日 04:55

コーディングをしているとき、Webデザイナーであれば誰しも下記のような悩みと戦ったことがあるのではないでしょうか。

- 閉じタグを忘れた！
- 今どの階層にいるんだっけ？

私は Pug という言語に出会い、このような悩みから解放されました。同じような悩みを抱えているひとたちに向けて、簡単にメモを残しておきます。

1. Pug とは？

　HTMLのテンプレートエンジンの１つで、HTMLを書くための言語です。
　下記公式サイトではなにやら難しいインストール方法が記載されていますが、私はもっぱら pug 記法で書く → コンパイラで HTML に変換　という流れで使用しています。
公式サイト：https://pugjs.org/api/getting-started.htm

　pug を使うと、例えばこんな感じで記述できます。
　左側が Pug で書いたデータ。右側がそれをコンパイルした HTML データ。ぱっと見で、左側のほうがすっきりとして見えますよね。また、どこからどこまでが階層になっているのか分かりやすい。CSSと同じID・クラス表記（ # や . ）が使える。閉じタグも Pug では書かなくていいのです！すごい！

　ということで、さっそく使用してみることにしましょう。

2. Pug を使うための下準備

　まず準備するものは以下です。

① HTML エディタ
　なんでもいいです。Webデザイナーたるもの、お好みのエディタの１つや２つはお持ちでしょう。Pug を表示したときにタグの色が変わったりするほうがよければ Pug言語に対応しているエディタを使うといいと思います。
　私は Brackets に Pug 用の拡張機能「Pug (Official Plugin)」を入れて使っています。

②コンパイラ
　これもPug と HTML 間のコンパイルに対応していればなんでもいいです。
私は Prepros というコンパイラを使用しています。Prepros は最新のものをいれてください（古いバージョンだと Pug のコンパイルに対応していない可能性があります）。Prepros は時折ポップアップ通知がでるものの、無料でも無制限に機能が使えますので、コンパイラのお試しには最適です！

①エディタで Pug を書く → ②コンパイラでHTMLに変換する
上記の流れが基本です。Prepros は Pug を置いているフォルダを読み込めば、すぐオートコンパイルできるので本当に便利です。

3. Pug 記法

　Pug の記法については、基本的には公式のリファレンスを参考にするといいと思います。必要なことは全部公式に載ってる！
私は英語がさっぱりなのでグーグル翻訳と先人の知恵に頼りまくりました。部分インクルード・変数・ループなど沢山の機能があるのですが、よく使うのは以下のルールです。

・タグ名はHTMLタグになる：<title></title>→ title
・改行をして、インデントをつけると入れ子になる
・クラス属性は「 .クラス名」、ID属性は「♯ID名」で表記する
　<div class="class"></div> → .class
　<div id="id"></div> → #id 　
・属性は丸括弧内に記載する
　 <a href="test.html" alt="リンク"></a> → a(href="test.html" alt="リンク")
・インライン要素や改行には「 | 」を使用する。

例えば先ほど例として作成したこの Pug を見てください。

doctype html
html(lang="jp")
 head
   title ページタイトル
 body
   .page-header: h1.page-header_title Pug ってなに？
   .page-body
     .page-body_title
       h2 Pugとは？
     .page-body_text
       | HTMLのテンプレートエンジンの１つです。
       ol
         li Pug はもともと Jade という名前だったみたいです。
         li 拡張子.pugを使います。
         li HTMLタグは&lt;&gt;を省略したかたちで記述します

①1行目で doctype html ： HTML 宣言
②2行目で html(lang="jp") ：言語宣言
③それ以降は階層をインデントで表記していきます。head や body が html の次の階層に来るわけですね。そして head 内に title タグを入れる場合には、インデントを１つ下げて、 title タグを表記します。
body 直下に .page-header クラスと .page-body クラスを作成する場合は、body の次にインデントを１つ下げて .page-header と .page-body を記述します。

これは小ネタなのですが、Pug は「 : 」を使用することで子階層をインデントせず、続けて書くことができます。例えば、上記のコードの「 .page-header 」はクラス名の次に「 : 」が続けて書かれて、その次に「h1.page-header_title 」が記載されています。これはコンパイルすると下記のようになります。ul のなかに li > em が沢山並んでいるときも、すっきり書くことができます。

    <div class="page-header">
     <h1 class="page-header_title">Pug ってなに？</h1>
   </div>

とても参考になったサイトを下記に紹介いたします。
- 覚えるのはこれだけ！Pug(Jade)のよく使う9つの書き方
- HTMLテンプレートエンジンのPugを導入するまで

　基本的には上記のようなかたちで書いていきます。html2pug のような HTML から Pug に変換してくれるサイトもあります。「これ、Pug だとどうやって書くんだっけ？」と思ったとき私はよく HTML を入力して使ってます。

4. おわりに

以前は haml というテンプレートエンジンを愛用していたのですが、%を書かなくて良い分 Pug にしてさらにコーディングが楽になりました。仕事では今、Pug + Scss + BEM を使ってます。便利。
Pug で簡単な HTML を作れるようになったら、block なども使いこなすと、ヘッダーやフッターのHTMLを切り分けることも簡単にできます。そのあたりは是非試してみてください。

この記事が気に入ったらサポートをしてみませんか？