Coding Methodology

始めよう!テンプレートエンジン~Pugから学ぶマークアップ管理~その2

2021 / 05 / 01

前回(4月号)はpugの変数とmixinを活用して、制作環境やコンポーネント設計の足がかりをご説明しました。今回は、テンプレートエンジンの強力な機能であるイテレーション(反復処理)を使った、リスト要素の管理方法をご紹介します。

始めよう!テンプレートエンジン~Pugから学ぶマークアップ管理~その2

Process1:コンテンツ情報のみのpugファイルを作成する。

ナビゲーションのリスト要素の作成を例に進めていきます。
まずは必要となるテキスト、リンク、必要属性のみをまとめたデータ用のpugファイル(navContents.pug)を用意します。このようにしておけば、制作を進めていく中で遷移先等に変更が出た場合、こちらのファイルに情報が集約されているため情報更新や修正が簡易になります。またマークアップ前の情報の棚卸しにもなりコーディングもスムーズに進められます。
(各種フレームワークや静的サイトジェネレーターを導入する際は、マークアップとは別ディレクトリでJavaScriptファイル等で管理するのもおすすめです。)

Pugの記述(navContents.pug)

//- navContents.pug
-
  const navList = [
    {
      text:'ページ1', link:'/page1/'
    },
    {
      text:'ページ2', link:'/page2/', cls:'text-red'
    },
    {
      text:'外部リンク',
      link:'http://external-link.com/',
      targetBlank:true
    },
    {
      text:'プライバシー・ポリシー', link:'/privacy/',
    },
  ]

Process2:マークアップ用のpugファイルを作成する。

次にナビゲーションのマークアップ用pugファイルを作成していきます。
3つの要素のスタイルは基本的には同じですが、偶数番目のli要素に「-even」classを付与して背景色を付ける。「ページ2」はspan要素に対して「text-red」classを付与してテキストを赤色にする。「外部リンク」は別窓遷移となる様にします。(右図表示イメージ参照)

Pugの記述(全体)

//- 先程のデータ用のpugファイルを読み込む
include /path/to/navContents
nav.nav
  ul.nav-list
  //- ループ処理の記述
  each item in navList
    li._item(
      class={'-even':(index+1)%2==0}
    )
      a.nav-link(
        href=item.link,
        target=item.target?'_blank':false
      )
        span._text( class=item.cls )!=item.text

Pugの記述①(一部抜粋)

each item in navList

Pugの記述②(一部抜粋)

    li._item(
      class={'-even':(index+1)%2==0}
    )
      a.nav-link(
      href=item.link,
      target=item.target?'_blank':false
      )
        span._text( class=item.cls )!=item.text

①の部分で、navContents.pug内で定義したnavListの配列の数だけ、配列の内容に沿って②を複製しています。

HTMLへ展開後

<nav class="nav">
  <ul class="nav-list">
    <li class="_item">
      <a class="nav-link" href="/page1/"><span class="_text">ページ1</span></a>
    </li>
    <li class="_item -even">
      <a class="nav-link" href="/page2/"><span class="_text text-red">ページ2</span></a>
    </li>
    <li class="_item">
      <a class="nav-link" href="http://external-link.com/"><span class="_text">外部リンク</span></a>
    </li>
    <li class="_item -even">
      <a class="nav-link" href="/privacy/"><span class="_text">プライバシー・ポリシー</span></a>
    </li>
  </ul>
</nav>


pugファイルを情報と構造の2ファイルに分けたことで、ナビゲーションの項目を増やしたい場合は情報ファイル(navContents.pug)の配列内にオブジェクトを追加するだけで済みます。また、オブジェクトで付与するclassを定義すべきか、構造上でclassや属性の出し分けを定義すべきかなど、実現したい内容に沿った設計ができれば、保守しやすいソースになります。足早な解説になりましたが、参考になれば幸いです。では!

一覧に戻る