• コーディング ファクトリーHOME
  • Coding Methodology
  • 第140回 始めよう!テンプレートエンジン - Pugから学ぶマークアップ管理 -

コーディングメソドロジー

第140回 始めよう!テンプレートエンジン - Pugから学ぶマークアップ管理 -

静的、動的、フレームワークの有無を問わず、Web制作では情報(コンテンツ)、構造(マークアップ)、見た目(スタイル)、作用(スクリプト)の4つの柱を適切に管理することが大切です。サイトを構成するHTML、CSS、JavaScriptファイルを直接編集・作成してしまうと、反復される要素すべてを記述する必要があるなど、4つの柱を管理することが難しくなります。そんな時は、マークアップにテンプレートエンジン(meta言語)を用いて、資材管理を容易にしましょう。今回はHTMLのテンプレートエンジンの一つであるPugを用いた具体例を挙げて、構造からWeb制作をコントロールする方法をご紹介します。

Example1:変数をつかって開発と納品のパスを書き換える

CMS等のマークアップでは、開発環境と公開環境とで画像やファイルのパスが変わってしまうことがよくあります。CMS投入前に置換するのは手間がかかるし事故の元。次のような変数を記述すると、ビルド時のNODE_ENVを変更するだけで適切なパスに出し分けができます。

Pugの記述

// 変数を宣言
-
  const 
    appEnv = process.env.NODE_ENV
    path = appEnv == 'develop' ? "/dev/path/" : "/prod/path/"

// マークアップ部分
link(rel='stylesheet', type='text/css', href=`${path}css/style.css`)

HTMLへ展開後

<!-- 開発時 -->
<link rel="stylesheet" type='text/css' href="/dev/path/style.css">

<!-- 公開時 -->
<link rel="stylesheet" type='text/css' href="/prod/path/style.css">

Example2:mixinで頻出する要素をパーツ化する

アートディレクション(環境に応じて画像を出し分ける)が必要となる画像要素には、pictureタグを使いたいところ。せっかくなのでmixin化してどこでも使用できるパーツを作成します。挿入箇所によって変更されるものは変数化します。(画像名、拡張子、デバイスによる画像の出し分けの要否・接尾語の要否など)

Pugの記述

// mixinの定義
mixin picture(name,type,alt,device=true)
  -
    const imgPath = path+'images/' 
  picture

    // deviceがtrueであればsrcセットを使用(初期値はtrueとしています。)
    if device
      source(media="(min-width:768px)" srcset=src=`${imgPath+name}_pc.${type}`)

    // device が true であれば画像名の接尾字に'_sp'を追加
    img(src=`${imgPath+name}${device?'_sp':''}.${type}` alt=alt)

// mixinの使用(マークアップ部分)
// アートディレクションあり 
+picture('画像名','png','alt')

// SP/PC共通画像
+picture('画像名','png','alt',false)

HTMLへ展開後

<!-- アートディレクションあり -->
<picture>
<source media="(min-width:768px)" srcset="/dev/path/images/画像名_pc.png">
<img src="/dev/path/images/画像名_sp.png" alt="alt">
</picture>

<!-- SP/PC共通画像 -->
<picture> 
<img src="/dev/path/images/画像名.png" alt="alt">
</picture>

mixinを一度定義してしまえばほぼ1行でモジュールを呼び出せるので、ソースの見通しがとても良くなるとともに、「break pointを変更したい」などの突然の変更も1箇所の修正で済んでしまいます。

mixinや変数は別ファイルで管理がおすすめ

meta言語・テンプレートエンジンを用いた開発を進めるにあたって強くおすすめしたいのが、「とにかく小さくファイルを分割する」ことです。一つのモジュールについてのみ記述したmixinファイル、変数だけのPugファイル、すべてのmixinを呼び出すためだけのPugファイル、ヘッダーだけ、フッターだけ...etc
小さくファイルを分け、ファイルレベルで構造化して管理をすると、修正、更新時にスコープがしっかり分かれるため安全かつ迅速に開発が進められます。

いかがでしたでしょうか?
次回はHTMLテンプレートエンジンの強力な機能である反復処理(for文)を使い、構造と情報を切り分けてマークアップする勘所をご紹介したいと思います。では!

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム