見出し画像
Photo by tyawonigosu

HTMLを超簡単に書けるPugとやらをまとめてみました！

おしうみなおき

入江開発室のメンバーの方から最近Pugというものを教えてもらい、実際に使ってみたら超簡単で超楽にHTMLが書けてしまったので、Pugについて深く知るためにまとめてみました！


Pugとは

PugはHTMLを簡単に書くためのテンプレートエンジンで、CSSでいうSassのようなものです。PugはNode.jsで動いており、一部書き方がJavaScriptっぽいところがあります。

※Saasを知らない人はこの記事がおすすめ ⇨ これからはcssはSassで書こう


Pugってどうやって書くの？

githubから引用してきます。

HTMLでこのように書きたいとすると、、、

<!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>

Pugではこのように書きます↓↓↓

doctype html
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.


一般的に言われているPugのメリット

1: 閉じタグの記載忘れがなくなる

例えばpタグを書くときは`p これはpタグです`という風に書くので、開始タグや閉じタグという概念がありません。HTMLの閉じタグを忘れることはなくなります。

2: ファイルを分割管理できる

`include section/_header.pug`のように、includeを使ってファイルを読み込むことができます。それによってファイル分割をすることができます。ファイル分割をしすぎると何をやっているかよくわからなくなることがあるので注意！

3: 変数が使える

分かりやすい例があったので、コードを引用してきました。

この例はtitleを変数にしています。変数が使えると、コード修正する場合に簡単です。

- var title = "Pug（Jade）の説明ページ｜色々と説明するサイト";

doctype html
html(lang="ja")
  head
    meta(charset="UTF-8")
    title #{title}
  body
    header
      h1
        a(href="#")
          img.logo(src="img/logo.svg" alt=title)

(引用: PugでHTMLコーディングを効率化・メリットと使い方を知る)

i4: 条件分岐やforループやmixinが使える

普通のHTMLでは条件分岐やforループやmixinは使えませんが、Pugなら使えます。

条件分岐の例はこんな感じ

- var title = "これはタイトルです";

case title
  when "これはタイトルです"
    h1 タイトル
  default
    p タイトル

forループの例はこちら

- for (var x = 0; x < 3; x++)
  li リスト#{x}

もしくはこう

ul
  each items in ["apple", "grape", "pineapple"]
    li= items

mixinはSassとおんなじ感じで書きました。+でmixinを呼び出すらしく、こんな感じです。

mixin pet(name)
  li.pet= name

ul
  +pet('cat')
  +pet('dog')
  +pet('pig')

(引用: PugでHTMLコーディングを効率化・メリットと使い方を知る)


Pugの始め方

1: とりあえずNode.jsをインストールする

Node.jsをインストールしている人は次にスキップしてください。

インストールしていない方はNode.js公式サイトでインストールしてください。

2: とりあえずPugをインストールする

Node.jsのインストールが完了している前提で話を進めます。

このコマンドでPugをインストールします！

$ npm i pug-cli -g

3: とりあえず適当にPugファイルを作成する

とりあえずPugファイルを作成します。名前は`index.pug`とでもしましょうか。

doctype html
html(lang="ja")
  head
    meta(charset="utf-8")
    title これはPugのテストです
  body
    h1 これはPugのテストh1です
    p これはPugのテストpです。

次にコマンドを叩いてHTMLに変換します。

pug index.pug --pretty

このコマンドを叩くと、同じディレクトリに`index.html`が生成されます！

Pugの使い方はこれだけ！あとは書き方を覚えるだけですなあ。。






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