Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
110
Help us understand the problem. What is going on with this article?
@yun_bow

[Pug] HTMLを効率よくコーディングする

More than 1 year has passed since last update.

HTMLのコーディングを楽にしてくれるNode.jsパッケージを紹介します。

Pug
https://pugjs.org/api/getting-started.html

今回使用したNode.jsパッケージのバージョンは下記の通りです。

Node.jsパッケージ
gulp: 4.0.0
gulp-pug: 4.0.1

Pugとは

PugはHTMLを効率よくコーディングするためのテンプレートエンジンです。もともとはJadeという名前で呼ばれていました。

Pugのインストール

Node.js をインストールしてください。次に、package.jsonがあるフォルダに移動して、下記のコマンドを実行してください。

$ npm install

PugからHTMLに変換する

*.pugファイルを*.htmlファイルに変換するには、下記のコマンドを実行してください。

$ gulp pug

基本的な使い方

ソースファイルはこちら

<>カッコなしで記述ができる

Pug
p Pug Test
HTML
<p>Pug Test</p>

インデントを付けると入れ子になる

Pug
body
  p Pug Test
HTML
<body>
  <p>Pug Test</p>
</body>

属性は()カッコを付ける

Pug
a(href="index.html") index link
HTML
<a href="index.html">index link</a>

ID属性は#を付ける

Pug
#elmId01
HTML
<div id="elmId01"></div>

クラス属性は.を付ける

Pug
.cln01
HTML
<div class="cln01"></div>

最初の文字列はタグとして変換される

Pug
p
  test01 test01 
  test02 test02 
  test03 test03
HTML
<p>
  <test01>test01</test01>
  <test02>test02</test02>
  <test03>test03</test03>
</p>

|を使うと改行になる

Pug
p
  | test01 test01 
  | test02 test02 
  | test03 test03 
HTML
<p>
  test01 test01 
  test02 test02 
  test03 test03 
</p>

JavaScriptのオブジェクトのようにスタイルを指定できる

Pug
p(style={"color":"red","font-weight":"bold"}) test01
HTML
<p style="color:red;font-weight:bold;">test01</p>

JavaScriptの配列のように複数のクラス属性を指定できる

Pug
#elmId01(class=["cln01","cln02","cln03"])
HTML
<div class="cln01 cln02 cln03" id="elmId01"></div>

=を使うと文字列がエスケープされる

Pug
p= "<script>alert('XSS');</script>"
HTML
<p>&lt;script&gt;alert('XSS');&lt;/script&gt;</p>

disabledをbooleanで指定することができる

Pug
input#elmId101(type="button" value="test01" disabled=true)
HTML
<input id="elmId101" type="button" value="test01" disabled>

checkedをbooleanで指定することができる

Pug
label(for="elmId021") test021
input#elmId021(type="radio" name="test02" value="test021" checked=false)
label(for="elmId022") test022
input#elmId022(type="radio" name="test02" value="test022" checked=true)
HTML
<label for="elmId021">test021</label>
<input id="elmId021" type="radio" name="test02" value="test021">
<label for="elmId022">test022</label>
<input id="elmId022" type="radio" name="test02" value="test022" checked>

HTMLに出力されないコメント

Pug
//- Comment01
#elmId01
HTML
<div id="elmId01"></div>

HTMLに出力されるコメント

Pug
// Comment02
#elmId02
HTML
<!-- Comment02-->
<div id="elmId02"></div>

JavaScriptのように変数を-で指定できる

Pug
- var url = "index.html";
a(href=url) index link
HTML
<a href="index.html">index link</a>

制御文

case~when

Pug
- var url = "index.html";
case url
when "index.html"
  p index.html
when "sub.html"
  p sub.html
default
  p default.html
HTML
<p>index.html</p>

each, if~else

Pug
- var langList = [{code:"en",name:"English"},{code:"jp",name:"Japanese"},{code:"zh",name:"Chinese"}];
- var defaultLang = "jp";
each lang in langList
  if lang.code == defaultLang
    li language:#{lang.name}(default)
  else
    li language:#{lang.name}
HTML
<li>language:English</li>
<li>language:Japanese(default)</li>
<li>language:Chinese</li>

#{}で変数を出力することができます。

include*.pugファイルを追加できる

Pug(head.pug)
meta(charset="utf-8")
title Pug Test
Pug(index.pug)
doctype html
html(lang="ja")
  head
    include head.pug
  body
    p Pug Test
HTML
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Pug Test</title>
  </head>
  <body>
    <p>Pug Test</p>
  </body>
</html>

extends*.pugファイルを拡張できる

Pug(template.pug)
doctype html
html(lang="ja")
  head
    meta(charset="utf-8")
    title Pug Test
  body
    p Pug Test
    block content
Pug(index.pug)
extends template.pug

block content
  p extend content

block prepend content
  p extend prepend content

block append content
  p extend append content
HTML
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Pug Test</title>
  </head>
  <body>
    <p>Pug Test</p>
    <p>extend prepend content</p>
    <p>extend content</p>
    <p>extend append content</p>
  </body>
</html>

blockを使用した箇所に拡張するタグの纏まり(ブロック)を追加できます。block prependはブロックの前に追加します。block appendはブロックの後に追加します。

mixinで定義したブロックを追加できる

Pug
mixin content1
  P mixin content1

mixin content2(label)
  P mixin content2 #{label}

doctype html
html(lang="ja")
  head
    meta(charset="utf-8")
    title Pug Test
  body
    p Pug Test
    +content1
    +content2('arg2')
HTML
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Pug Test</title>
  </head>
  <body>
    <p>Pug Test</p>
    <P>mixin content1</P>
    <P>mixin content2 arg2</P>
  </body>
</html>

+でmixinのブロックを追加します。content2(label)のように引数を指定することもできます。

以上です。

110
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
yun_bow
サービス志向エンジニアです。プログラミングを使ったモノづくりが好きです。AWS、Python、GO言語を勉強中。 こちらで投稿した記事は、所属会社の公式見解を示すものではないです。
pa-rk
Webアプリ、スマホアプリの開発を手掛ける技術者集団です。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
110
Help us understand the problem. What is going on with this article?