0%

Programmingプログラミングナレッジ

Posted:2018.05.03

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

フロントエンド周りでは作業効率化のためのいろんなツールが登場しています。今回は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コーディングがより早く正確に行うことができます。ですのでコーディングの効率化や工数の圧縮などに効果的なのではないでしょうか。このほかにも共通部分のインクルードやループなどもできるみたいなので、また別記事でまとめていきたいと思います。

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】