OWNED MEDIAウェブ制作に役立つコンテンツを発信中!

HTMLテンプレートエンジンのPugを導入するまで

最終更新日:2020.4.7 Update!!
フロントエンド周りでは作業効率化のためのいろんなツールが登場しています。今回はHTMLを作成するときに便利なテンプレートエンジンである「Pug」を導入するときの流れをまとめていきたいと思います。  
Pugのパッケージをインストール
まず、Pugを使うにはNode.jsが必要になります。Node.jsのインストール方法などについて詳しくは過去記事「WEB開発環境(Mac OS)に必要な各種インストール方法まとめ(1)」にまとめていますので、こちらをご覧ください。   Node.jsはインストールされている状態で、Pugをインストールしていきます。今回はPugをコマンドラインで操作できるパッケージを使用していきます。下記コマンドを入力してnpmでインストールします。完了したらバージョンを表示させてチェックします。
$ npm install -g pug

// インストールされているか確認
$ pug --version
   
Pugを使ったHTMLコーディング
では、実際にPugを使ったコーディングをやっていきます。流れとしてはPugの記法で作成したpugファイルをコンパイルしてhtmlに変換するという流れになります。まずは基本の形でpug記法のコーディングをしていきます。 【sample.pug】
doctype html
html(lang="ja")
  head
    meta(charset="utf-8")
    link(rel="stylesheet" href="./style.css")
    title Pugを使ったコーディング
  body
    div#wrap
      header
        h1.main_ttl.ttl タイトルタイトルタイトル
      main
        p テキストテキストテキストテキストテキストテキスト 
      footer
  このようにPug記法 については特徴的ですが、主なルールとしては以下のような形になります。 1. doctype htmlでDOCTYPE宣言 2. タグ要素名はそのまま記述 3. 属性と値は要素の続けて(attr="value")という形で記述 4. 要素ごとに改行する 5. インデントで入れ子の指定 6. 要素直後に半角スペースを入れてタグに入るテキストを入力 7. classやidは要素に続けて記述する   少し慣れるまで時間がかかりますが、慣れると閉じタグなども不要になるので正確に早くコーディングすることが可能ですね。  
pugファイルをhtml形式にコンパイルする
Pugでのコーディングが終われば、「.pug」という拡張子で保存し、下記コマンドでコンパイルしhtmlに変換します。prettyオプションをつけることでタブなどを整形して出力してくれます。
$ pug sample.pug

// HTMLを整形して出力する場合
$ pug sample.pug --pretty
  先ほどのpugファイルがこんな感じでHTMLに変換されました。いつも通り見慣れた形になっていますね。ちなみにインデントを半角スペースとなるよう指定している場合はコンパイル時にエラーとなるのでインデントはハードタブ(タブになるよう)で設定しておく必要があります。 【sample.html】
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <style src="./style.css"></style>
    <title>Pugを使ったコーディング</title>
  </head>
  <body>
    <div id="wrap">
      <header>
        <h1 class="main_ttl ttl">タイトルタイトルタイトル</h1>
      </header>
      <main>
        <p>テキストテキストテキストテキストテキストテキスト</p>
      </main>
      <footer></footer>
    </div>
  </body>
</html>
  Pugを使うことで、HTMLコーディングがより早く正確に行うことができます。ですのでコーディングの効率化や工数の圧縮などに効果的なのではないでしょうか。このほかにも共通部分のインクルードやループなどもできるみたいなので、また別記事でまとめていきたいと思います。
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

SPONSORED

    KEYWORD SEARCH

    RECENT POSTS

    合同会社デザインサプライ -DesignSupply. LLC-

    サイト制作・開発 / 各種デザイン制作 / ウェブプロモーション企画

    合同会社デザインサプライ(DesignSupply. LLC)

    Office:大阪府大阪市天王寺区清水谷町3-22
    Email:info@designsupply-web.com
    • Twitter
    • Github
    CONTACT USSCROLL TO TOP
      • Facebook
      • Twitter
      • Github
      • Instagram