初心者が簡単に【Pug】を導入する方法｜Preprosでコンパイル

HTMLをsassっぽく書けるテンプレートエンジン「Pug」を使えば、より効率的なマークアップが可能です。

しかし、いろんな技術サイトを見ると、初心者には何やら難しそうなことがつらつらと書き綴られていて、ちょっと取っつきにくい印象があります。

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

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

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

Pug is available via npm:
pug

Pugはnpmから入手できます。

npmはNode.jsのパッケージ管理ツールです。つまりPugをやるにはNode.jsを使うので、まずはそこから導入していく必要があります。

Pugに興味を持って、とにかくPugを使ってみたいんだ、と思っている方は、もう少し手軽な方法を選んだ方が良いかもしれません。

ということで、Node.jsなしでPugを導入する方法です。

PugをHTMLに変換してくれるGUIコンパイラを使います。そしたらただPugを書いて、コンパイルするだけです。

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

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

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

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

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

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

なお、トライアル版を使っていると、かなりの頻度でセールスのポップアップが表示されます。

すぐに消して続行できるのですが、一瞬とはいえ強制的にコーディング作業を中断させられるので、仕事で使うなら購入した方が良いでしょう。

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

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