0%

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

Posted:2018.05.08

Pugで覚えておくと便利なコーディング方法まとめ(機能編)

HTMLテンプレートエンジンのPugですが、前回記事「HTMLテンプレートエンジンのPugを導入するまで」では導入までの流れと基本的なコーディング方法を紹介しましたが、今回はPugを活用するための便利な機能をまとめていきたいと思います。

 

1. 変数定義・ミックスイン

プログラミングでは基本となる変数を扱ったり、Sassなどではおなじみのミックスインも使うことができます。特有の記述方法になりますので慣れるまでは大変ですが、基本的には同じような感じで記述することになります。

// 1.変数を定義し出力する
- var variable = 'Hello World!!'
p #{variable}

<!-- 出力結果 -->
<p>Hello World!!</p>


// 2.ミックスインを定義し出力する
mixin navigation
  nav
    ul
      li ナビメニュー1
      li ナビメニュー2
      li ナビメニュー3
+navigation

<!-- 出力結果 -->
<nav>
  <ul>
    <li>ナビメニュー1</li>
    <li>ナビメニュー2</li>
    <li>ナビメニュー3</li>
  </ul>
</nav>


// 3.ミックスインで引数を使用する
mixin navigation(arg)
  li= arg
nav
  ul
    +navigation('ナビメニュー1')
    +navigation('ナビメニュー2')
    +navigation('ナビメニュー3')

<!-- 出力結果 -->
<nav>
  <ul>
    <li>ナビメニュー1</li>
    <li>ナビメニュー2</li>
    <li>ナビメニュー3</li>
  </ul>
</nav>

 

2. 要素のループ

同じ要素を繰り返す場合はループさせることが可能です。ループさせるにはいくつかの方法がありますが、全く同じものを繰り返す、順番によってテキストを変える、などそれぞれにあった内容を選択するようにしましょう。

// 1.for文でループさせる
ul
  - for (var i = 0; i < 3; i++) {
    li リスト
  - }

<!-- 出力結果 -->
<ul>
  <li>リスト</li>
  <li>リスト</li>
  <li>リスト</li>
</ul>


// 2.while文でループさせる
- var n = 0;
ul
  while n < 3
    li= n++
 
<!-- 出力結果 -->
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>


// 3.each文でループさせる
ul
  each val in ['one','two','three']
    li= val

<!-- 出力結果 -->
<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

 

3. 外部ファイルのインクルード

PHPやSSIのように外部ファイルをテンプレートとしてファイル内にインクルードさせることができます。ページの共通部分がたくさんある場合はメンテナンス性が向上します。ファイル先頭にアンダースコアをつける必要はないですが、目印としてつけておくと管理しやすくなります。

// ファイル構成
index.pug
_includes
  ┣ _header.pug
  ┣ _main.pug
  ┗ _footer.pug

// index.pug
doctype html
html(lang="ja")
  head
    meta(charset="utf-8")
    link(rel="stylesheet" href="./style.css")
    title サンプルコーディング
  body
    include _includes/_header.pug
    main
      p コンテンツ
    include _includes/_footer.pug
 
// header.pug
header
  h1 H1テキスト
  nav
    ul
      li ナビ1
      li ナビ2
      li ナビ3
 
// footer.pug
footer
  span.copyright COPYRIGHT ALL RIGHT RESERVED.
 
<!-- 出力結果 -->
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./style.css">
    <title>サンプルコーディング</title>
  </head>
  <body>
    <header>
      <h1>H1テキスト</h1>
      <nav>
        <ul>
          <li>ナビ1</li>
          <li>ナビ2</li>
          <li>ナビ3</li>
        </ul>
      </nav>
    </header>
    <main>
      <p>コンテンツ</p>
    </main>
    <footer><span class="copyright">COPYRIGHT ALL RIGHT RESERVED.</span></footer>
  </body>
</html>

 

4. 条件分岐

プログラミングではおなじみの条件分岐もif文やcase文のような形式で記述することができます。javascriptの感覚でコーディングできるのでイメージしやすいかと思います。

// 1.if文を使った条件分岐
- var boolean = ture
if boolean === ture
  p コンテンツテキスト
else 
  p コンテンツはありません
 
<!-- 出力結果 -->
<p>コンテンツテキスト</p>
 
// 2.case文を使った条件分岐
- var num = 5
case num
  when 0
    p No count
  when 1
    p 1st count
  default
    p #{num} counts
 
<!-- 出力結果 -->
<p>5 counts</p>

 

ここまでくるとよりプログラミングっぽくなってきましたね、このほかにもいろんな機能があるようなのですが、詳しくは公式サイトのドキュメントを見ていただくのが早いかと思います。慣れるとかなりコーディングスピードが上がりそうですね!

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

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

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

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

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

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

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

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

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

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

CAPTCHA


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