HTMLを書くためのテンプレートエンジン「Pug」を使えば、より効率的なマークアップが可能になります。

いろんな技術サイトを見ると、初心者には何やら難しそうなことがつらつらと書き綴られています。

ここでは、単純にHTMLを速く書きたいというだけの方に、最も簡単なPugの導入方法をご紹介します。

Node.jsって?! npmって?!

まずはPugの公式サイトから見てみましょう。

Getting Started – Pug

Pug is available via npm:

pug

Pugはnpmから入手できます? ナニソレ……

と思った方は、入り口を変えた方が良さそうです。

npmはNode.jsのパッケージ管理ツールです。つまりPugをやるにはNode.jsを使うんですね。ナニソレ……

Preprosでコンパイルする

ということで、PugをやりたいがためにNode.jsを導入するのはハードルが高すぎるので、すでにNode.jsを利用している人以外はやめておきましょう。

PugをHTMLに変換してくれるGUIコンパイラがちゃんとありますので、それを利用すれば簡単にPugを導入できます。

コンパイラは無料で始められる「Prepros」 がおすすめです。

Prepros

上のリンク先からダウンロードしてインストールしましょう。あとは直感的に使えそうな感じです。

一応使い方を書いておくと―

  1. 「Add Project」で作業フォルダを選び、「PROJECTS」に追加する。
  2. pugを選択して「Process File」をクリック。これでhtmlが生成されます。
  3. 「Auto Compile」にチェックを入れておけば、pugを更新するたびにコンパイルされます。

プロジェクトごとにコンパイル形式などを設定できますので、「Setting>Compiler Settings」で確認しましょう。

Sassコンパイルにもオススメ

個人的には、PugをやるんだったらCSSも「Sass」で書くことをオススメします。構文が似てるので。

PreprosにはAutoprefixerもついていますので、Sassをコンパイルするとき自動的にベンダープレフィックスを付けることも可能です。素敵ですね。

試して損はない!

なお、トライアル版を使っていると、かなりの頻度でセールスのポップアップが表示されます。すぐに消して続行できるのですが、一瞬とはいえ強制的にコーディング作業を中断させられるので、仕事で使うなら購入した方が良いでしょう。

とはいえ、それだけ我慢すれば無料で使い続けることができますので、中途半端なお試し期間や限定された機能にモヤっとさせられることはありません。試しに使って損することはないでしょう。

肝心の記法については別の記事で紹介していきます。