ブログ

これからのコーディングは再利用と効率化だ!話題のPugを使ってみた(前半)

pug

こんにちは、フロントエンドエンジニアのかみーゆです。
数年前にsassに出会い、タスクランナーを走らせてコーディングするようになり、めちゃめちゃ作業が早くなりました。Emmetの出現にも目から鱗が出るほど驚き日々技術の進化に感動してます。

そしてまたまた便利なものを見つけちゃいました!!!
Pug(旧:Jade)です(犬ではない)。

最近このPugを使ってhtmlを書いてすごーく感動したので、使い方をまとめようと思います。

公式サイトはこちら
Pug公式サイト

内容が長いのでお品書きを参考にして、さっさとテンプレート作りたい人はすっ飛ばして読んでください。

お品書き

※ 2017/5/9に太字の項目を追記しました。

PugはHTMLを書くためのテンプレートエンジンです。
平たくいうと、HTMLを共通部分headerやfooter、ページごとに違う主要コンテンツを切り分けてコーディングすることができます。
DreamweaverのTemplateを使ったことがある方ならわかると思いますが、少し感覚的に似ていると思います。

共通で使い回す部分を一旦設定してしまえば、ページごとに違うコンテンツのところだけ作ればいいので静的HTMLのページも量産できます。
共通部分を切り分けて作れるので後からメニューなどの変更があっても一箇所書き換えればいいだけです。

HTMLのようにタグで囲むことがないですが、改行やインデントなどで全体を構成していきます。
正しくインデントする必要がありますが、タグの閉じ忘れは無くなります。

変数が使えたり、分岐やループも使えるので多少プログラムライクではありますが、ノンプログラマーでも少し作法を覚えれば十分使えるのでは?!と思います。。。。

百聞は一見に如かず、とりあえずチャレンジしてみましょう。

Pugを始めるために用意するもの

Pugを使うために、ご自身のPCにNode.jsをインストールする必要があります。

あと、ターミナル、テキストエディタぐらいですかね。
ちなみに私は以下を使ってます。

  • ターミナル・i-term
  • テキストエディタ・Atom

一回環境を作ってしまえば再利用できるのでインストールしておきましましょう。
ちなみに、環境がMacを前提にお話ししているのでWindowsの方は多少やり方が違うかもしれません。ご了承ください。

Node.jsをインストール

Node.jsの公式サイトでNode.jsをダウンロードしてください。
Node.js公式サイト

※古いバージョンが入っている場合はPugがインストールできない可能性があります。
その場合はバージョンアップしてください。

Pugをインストール

$ npm i pug-cli -g

バージョンを確認してみます。
$ pug --version

helpも確認できます。
Pugのコマンドを忘れたらこちらを叩いてみてください。
$ pug --help

一番簡単なものを作ってみます。

任意の場所にpug練習用のディレクトリを作ります。
今回私はディレクトリ名をpug-testにしてみました。

ターミナルでも先ほど作ったディレクトリに移動しておきます。
あらかじめターミナルにcd [半角スペース]と打ち込んでおいてフォルダをターミナルにドラッグ&ドロップ、enterキーでディレクトリ移動できます。(他のターミナルでは動作確認してません。Macのデフォルトのターミナルではできたはず)

$ cd 任意の場所/pug-test

フォルダ内にindex.pugファイル(pugの拡張子は.pug)を作り以下のソースを書きます。
インデントでネストします。間違えないように注意してくださいね。

pug-test/
    index.pug

PUG

 

私はAtomに言語Pugのパッケージを入れてます。コーディングが楽になりますので、気になる人は入れてみてください。
ちなみにドキュメント宣言はdoctype htmlでhtml5になります。他にも宣言できるので以下を参考にしてください。

https://pugjs.org/language/doctype.html

コマンドを叩く
$ pug index.pug

このままでは改行のない一行のhtmlが生成されます。最後に–prettyをくっつけるだけでキレイなhtmlに整形してくれます。
それでは実行してみましょう。
$ pug index.pug --pretty

HTML
<!DOCTYPE html>
<html lang=”ja”>
  <head>
     <meta charset=”UTF-8″>
     <title>Pugレッスン</title>
  </head>
  <body>
     <h1>Pug始めました</h1>
     <main class=”main”>
     <p>Pugでhtml作ったよ</p>
     </main>
  </body>
</html>

コンパイルできましたね!!

基本の記述方法にチャレンジしましょう。
さらに詳しい記述方法を知りたい方は公式サイトを参考にしてください。

Pug公式サイト

コメントの書き方

Pug上に残して、htmlには反映したくない場合はスラッシュ2こ+ハイフン(//-)。

//- ここにコメントをかく

htmlのコメントとして残したい場合はスラッシュ2こ(//)。

// ここにコメントをかく

divは省略できる

idは#、classは.です。

PUG

HTML
<div id=”id-name”>DivタグにIDを振る</div>
<div class=”class-name”>DivタグにClassをつける</div>

属性の追加

srcやhrefなど属性を追加したい時は()内にこんな感じで書きます。
もちろん、idやclassも中に書くことができます。
下三つのコードは全て出力結果は一緒。

<img id=”id” class=”images” src=”./img/img01.jpg” alt=”画像01”>

ネスト

入れ子にするにはインデントもしくはコロンを使います。

PUG

HTML
<ul>
  <li><a href=”#”>List01</a></li>
  <li><a href=”#”>List02</a></li>
  <li><a href=”#”>List03</a></li>
</ul>

改行、spanなど

インライン内に文字を追加する時はこんな感じで|(パイプ)を使います。

PUG

HTML
<p>こんにちは。<br>フロントエンドエンジニアの<strong>かみーゆ</strong>です。</p>

ハイブリッドコードとか色々

無理にpugの文法に沿わなくても、書きコードの一番上のようなごった煮コードも書けます。
また=(イコール)を使ってコンテンツとなる値を引き渡すこともできます。
ただし、値内に入っているコードは下記のようにエスケープされてしまいますので、エスケープしたくない場合は=の前に!をつけます。

PUG

HTML
<p>こんにちは。<br>フロントエンドエンジニアの<strong>かみーゆ</strong>です。</p>
<p>こんにちは。フロントエンドエンジニアのかみーゆです。</p>
<p>段落は &lt;p&gt;タグで囲みます</p>
<p>段落は<p>タグで囲みます</p>

js、css

ファイルに直接jsやcssを書く場合.(ドット)で繋ぎます。

PUG

css
<style>
  a{
    color: #333;
    background: #aaa;
  }
</style>

js
<script>
  var flug = true;
  if(flug) console.log(flug);
  else console.log(flug);
</script>

変数

PUG

HTML
<a href=”//www.example.com”>トップページ</a>
<a href=”//www.example.com/contact/”>お問い合わせ</a>

For文でループ

PUG

HTML
<ul>
  <li>List01</li>
  <li>List02</li>
  <li>List03</li>
</ul>

IF文で分岐

PUG

HTML
<h2>トップページ</h2>

eachと配列

もちろんeachと配列も使えます。

PUG

HTML
<ul>
  <li>0ゆうさん</li>
  <li>1ゆきぱんだ</li>
  <li>2Tantan</li>
  <li>3かみーゆ</li>
  <li>4しゃーまん</li>
</ul>

メインコンテンツ・共通部分でファイルを分けて作ってみましょう。

include

まずは基本の外部ファイルの読み込みをやってみます。
includeでファイルを読み込めます。

include ファイル名

以下の感じであればincディレクトリにある_header.pugをincludeしてくれます。
(.pugは省略できる)

extend

extendとblockを使って元となるファイルを継承することもできます。

この場合、inc/_layout.pugのblock mainの箇所にindex.pugのblock main以下のタグが出力されます。

append

ページごとに独自の設定をもたせたいときはappendを使います。

mixin

sassのようにmixinも作れる。
同じコードを繰り返し作るときなど便利。

値も代入できる

テンプレートを作ってみよう!!!

それでは、これらを踏まえてテンプレートを作ってみましょう。

ファイル構造はこんな感じです。
コンパイルされるデータをdestフォルダに出力します。
cssやjsファイルなどは用意してませんが、あるものと想定してやってみてください。

pug-test/
  ├ dest/
  │  └ asset/
  │    ├ css/
  │    ├ js/
  │    └ images/
  └ inc/
       _header.pug
       _footer.pug
       _layout.pug
  index.pug

index.pug

inc/_layout.pug

inc/_header.pug

inc/_footer.pug

以下のコマンドでコンパイル。$ pug index.pug --pretty --out dest

dest/index.html
<!DOCTYPE html>
<html lang=”ja”>
  <head>
    <meta charset=”utf-8″>
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <title>トップページ | Pugレッスン</title>
    <!– css–>
    <link rel=”stylesheet” href=”assets/css/swiper.min.css”>
    <link rel=”stylesheet” href=”assets/css/top.css”>
  </head>
  <body>
     <header>
       <h1 class=”site-name”>Pugで作ったサイト</h1>
     </header>
     <nav class=”global-nav”>
       <ul>
           <li><a href=”#”>トップ</a></li>
           <li><a href=”#”>メニュー01</a></li>
           <li><a href=”#”>メニュー02</a></li>
           <li><a href=”#”>メニュー03</a></li>
           <li><a href=”#”>メニュー04</a></li>
       </ul>
     </nav>
     <main class=”main”>
       <h2>Pugでhtml作ったよ</h2>
       <p>Pugって楽しいね!!!!</p>
     </main>
     <footer>
       <p><small>copyright m-field</small></p>
     </footer>
     <!– js–>
     <script src=”//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>
     <script src=”assets/js/top.js”></script>
  </body>
</html>

mixinを使うとなぜかインデントがちょっとズレちゃうのは気になりますが、一応コンパイルできました。

まとめ

今回はPugの基本の使い方をまとめてみました!
次は、タスクランナーで自動出力する方法についてまとめます。

※ 2017/5/9追記しました。

参考

■この記事を書いた人 かみーゆ(フロントエンドエンジニア)

CMS concrete5の認定エバンジェリスト。コーディングからプログラミングまでフロント周りを中心にお仕事してます。広島支社でフロントエンドからサーバエンドまで幅広く触れるリベロなエンジニアを目指してます。お得意のconcrete5や技術的なTipsの記事を主にUPしてます。好きなものは肉とビール。

関連記事

  1. japanese-flower-tutorial-title-8 Illustratorチュートリアル 和風「ねじり梅」の描き方
  2. 吹き出しの作り方タイトル画像 いろいろな種類の吹き出しフラッシュ・ベタフラ・叫びや雲形など 【初心者OK】IllustratorCCで漫画風吹き出しの作り方…
  3. blog image-illustrator-pentool ペンツールでベジェ曲線を描くコツはアンカーポイントの打ち方にあり…
  4. blog_panda_penguin ユーモアのあるサムネイル画像をデザインするための発想法
  5. blog_gif-01 トップページのカープ優勝バージョンで紙吹雪とともに降ってきたモノ…
  6. Google-auto-mail-return-8 Googleフォームの自動返信機能を追加する(前編)
  7. blog_mobile 【ホームページ制作】「モバイルファースト」ってなんじゃ?
  8. illust-tutorial-sample Illustratorチュートリアル 遠近グリッドの使い方!

最近の記事

  1. DSC_0072
  2. Hirofuro-logo-8
  3. carp9
  4. carp8
  5. carp7
PAGE TOP