LoginSignup
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@penpenta

pugを使ってみたら、結構便利そうな雰囲気だった話

Last updated at Posted at 2019-08-04

目的

HTMLをもう少しプログラミングチックに書きたいと思い、pugを使用してみることにしました。
意外と便利に書けたので、それのメモです。

サンプルページ

作成したのは、以下のようなページ

pug使用準備

pugを使用するための準備です。
必要なパッケージのインストールが済んでいれば
yarn watch
で自動コンパイルが走るようになります。

package.json
{
  "name": "client",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "watch": "yarn watch-scss & yarn watch-pug",
    "build-scss": "node-sass scss --output css",
    "watch-scss": "nodemon -e scss -x \"npm run build-scss\"",
    "build-pug": "pug pug/ --hierarchy -o html/ -P",
    "watch-pug": "pug pug/ --hierarchy -o html/ -P -w"
  },
  "devDependencies": {
    "node-sass": "^4.9.4",
    "nodemon": "^1.18.4",
    "pug": "^2.0.4",
    "pug-cli": "^1.0.0-alpha6",
    "pug-loader": "^2.4.0"
  },
  "dependencies": {
    "jquery": "^3.4.1",
    "reset-css": "^4.0.1"
  }
}

ソースコード

今回はpugの紹介なので、pugのソースとhtmlのソースの比較のみを行います。
全部のソースは以下に載せてあります。
ソースコード

ソース比較

最初に変数を指定しています。
index.pugの行数は80です。

index.pug
- 
  var title = [
                {title:'TOP',id:'#top'},
                {title:'NEWS',id:'#news'},
                {title:'ABOUT',id:'#about'},
                {title:'STAFF',id:'#staff'}
              ]
-
  var news = [
              {date:'2019.07.31',title:'挨拶'},
              {date:'2019.08.01',title:'サイトリニューアルのお知らせ'},
              {date:'2019.08.03',title:'夏のキャンペーンお知らせ　１'},
              {date:'2019.08.04',title:'夏のキャンペーンお知らせ　２'},
              {date:'2019.08.05',title:'夏のキャンペーンお知らせ　３'}
              ]
- 
  var image = [
                '../img/docker.png',
                '../img/nginx.png',
                '../img/python.png',
                '../img/gopher.png',
                '../img/react.png',
                '../img/vue.png',
                '../img/angular.png',
                '../img/d.png'
              ]
            

doctype html
html(lang="ja")
  head
    meta(charset="UTF-8")
    title SAMPLE
    link(rel="stylesheet", href="../css/index.css")
  body
    header.header.float-menu
      h1.header-title SAMPLE PAGE
      nav
        ul.menu
          each item in  title
            li.menu-item
              a(href=item['id']).menu-link #{item['title']}
    main
      section.hero.float-menu-target
        h2.hero-title SAMPLE PAGE
      section#news.container.container-ornament
        h2.container-title
          span NEWS
        div.container-body
          ul.news
            each item in news
              li.news-item
                a.news-link
                  span.news-date #{item['date']}
                  span.news-title #{item['title']}
      section#about.about
        div.container
          h2.container-title
            span ABOUT
          div.container-body
            p このサイトはpupを使用して作成しています。PugはHTMLにおけるSassのようなものです。
            p Pugを使うメリットとしては、通常のHTMLだけではできない共通化ができること。
              | 開始タグと終了タグというものがないのでタグの閉じ忘れや閉じ間違いが起きないです。
              | つまり、修正に強いHTMLを書くのに最適なツールということです。
            p もともとはJade（ジェード）という名前で開発されていたが
              | 商標の関係で2016年あたりにPugとして再リリースされました。
            p 新しいPugは繰り返しや属性などの書き方が若干変更されています。
              | なので、Jadeのコードを流用する場合は記法変更によるエラーに注意しましょう。
            p Vue.jsのテンプレートをPugで書くこともできるので、記法を覚えておいて損はないはずです。
      section#staff.container.container-ornament
        h2.container-title
          span STAFF
        div.container-body
          div.panel-group
            each item in image
              a.panel.panel-hover.panel-staff
                img(src=item,width="225px",height="225px")

    script(type="text/javascript",src="../node_modules/jquery/dist/jquery.min.js")
    script(type="text/javascript",src="../js/index.js")

そして、index.pugをindex.htmlにコンパイルしたのが下記です。
行数は118です。

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8" />
    <title>SAMPLE</title>
    <link rel="stylesheet" href="../css/index.css" />
</head>

<body>
    <header class="header float-menu">
        <h1 class="header-title">SAMPLE PAGE</h1>
        <nav>
            <ul class="menu">
                <li class="menu-item"><a class="menu-link" href="#top">TOP</a></li>
                <li class="menu-item"><a class="menu-link" href="#news">NEWS</a></li>
                <li class="menu-item">
                    <a class="menu-link" href="#about">ABOUT</a>
                </li>
                <li class="menu-item">
                    <a class="menu-link" href="#staff">STAFF</a>
                </li>
            </ul>
        </nav>
    </header>
    <main>
        <section class="hero float-menu-target">
            <h2 class="hero-title">SAMPLE PAGE</h2>
        </section>
        <section class="container container-ornament" id="news">
            <h2 class="container-title"><span>NEWS</span></h2>
            <div class="container-body">
                <ul class="news">
                    <li class="news-item">
                        <a class="news-link"><span class="news-date">2019.07.31</span
                ><span class="news-title">挨拶</span></a
              >
            </li>
            <li class="news-item">
              <a class="news-link"
                ><span class="news-date">2019.08.01</span
                ><span class="news-title">サイトリニューアルのお知らせ</span></a
              >
            </li>
            <li class="news-item">
              <a class="news-link"
                ><span class="news-date">2019.08.03</span
                ><span class="news-title">夏のキャンペーンお知らせ　１</span></a
              >
            </li>
            <li class="news-item">
              <a class="news-link"
                ><span class="news-date">2019.08.04</span
                ><span class="news-title">夏のキャンペーンお知らせ　２</span></a
              >
            </li>
            <li class="news-item">
              <a class="news-link"
                ><span class="news-date">2019.08.05</span
                ><span class="news-title">夏のキャンペーンお知らせ　３</span></a
              >
            </li>
          </ul>
        </div>
      </section>
      <section class="about" id="about">
        <div class="container">
          <h2 class="container-title"><span>ABOUT</span></h2>
          <div class="container-body">
            <p>
              このサイトはpupを使用して作成しています。PugはHTMLにおけるSassのようなものです。
            </p>
            <p>
              Pugを使うメリットとしては、通常のHTMLだけではできない共通化ができること。開始タグと終了タグというものがないのでタグの閉じ忘れや閉じ間違いが起きないです。
              つまり、修正に強いHTMLを書くのに最適なツールということです。
            </p>
            <p>
              もともとはJade（ジェード）という名前で開発されていたが商標の関係で2016年あたりにPugとして再リリースされました。
            </p>
            <p>
              新しいPugは繰り返しや属性などの書き方が若干変更されています。なので、Jadeのコードを流用する場合は記法変更によるエラーに注意しましょう。
            </p>
            <p>
              Vue.jsのテンプレートをPugで書くこともできるので、記法を覚えておいて損はないはずです。
            </p>
          </div>
        </div>
      </section>
      <section class="container container-ornament" id="staff">
        <h2 class="container-title"><span>STAFF</span></h2>
        <div class="container-body">
          <div class="panel-group">
            <a class="panel panel-hover panel-staff"
              ><img src="../img/docker.png" width="225px" height="225px"/></a
            ><a class="panel panel-hover panel-staff"
              ><img src="../img/nginx.png" width="225px" height="225px"/></a
            ><a class="panel panel-hover panel-staff"
              ><img src="../img/python.png" width="225px" height="225px"/></a
            ><a class="panel panel-hover panel-staff"
              ><img src="../img/gopher.png" width="225px" height="225px"/></a
            ><a class="panel panel-hover panel-staff"
              ><img src="../img/react.png" width="225px" height="225px"/></a
            ><a class="panel panel-hover panel-staff"
              ><img src="../img/vue.png" width="225px" height="225px"/></a
            ><a class="panel panel-hover panel-staff"
              ><img src="../img/angular.png" width="225px" height="225px"/></a
            ><a class="panel panel-hover panel-staff"
              ><img src="../img/d.png" width="225px" height="225px"
            /></a>
            </div>
            </div>
        </section>
    </main>
    <script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="../js/index.js"></script>
</body>

</html>

便利だと思った点

  • 記述量が若干減る（もう少し上手く書けば、更に減るかも？？）
  • 変数が使用できる（配列、連想配列も可）

下記は連想配列の例

index.pug
- 
  var title = [
                {title:'TOP',id:'#top'},
                {title:'NEWS',id:'#news'},
                {title:'ABOUT',id:'#about'},
                {title:'STAFF',id:'#staff'}
              ]
  • 変数を使用してforeachが行える

下記のeach item in titleが用意した連想配列を回しています。

index.pug
  body
    header.header.float-menu
      h1.header-title SAMPLE PAGE
      nav
        ul.menu
          each item in  title
            li.menu-item
              a(href=item['id']).menu-link #{item['title']}
  • インデントで親子関係を表してくれるので書きやすい(python書き慣れてると自然とインデントしてるので書きやすい。。)
  • 閉じタグを意識しなくていいからメチャ楽

まとめ

今回はお試し的に使用してみましたが、他にも

  • 共通ファイルの読み込み
  • mixinが使用できる

などがあるそうです。
詳しくは公式リファレンスや他のQiitaの記事に沢山載ってます。
SCSSを勉強した後にpugを勉強するとクライアント側が、よりプログラミングチックに書けるようになるので楽しいです。

2
2
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?