【デイトラ】実務編  Pugで効率的にコーディングしよう【DAY24】

Web制作学習
2023.01.15
ハッサク
ハッサク

こんにちは！ハッサク(@hassaku_888)と申します。

2022年6月からデイトラのWeb制作コース受講開始。日々勉学に励んでいます。

日々の学習記録は主にTwitterで配信していますが、振り返りたい内容や量が多い場合は、こちらのブログでまとめています。

Pugを使えば、効率的でシンプルなコーディングをすることができます。

Pugのコード記法

Pugは基本的に、階層構造＝インデント(字下げ)。
例えばbodyタグ内にdivタグを置きたい場合は、divをTabで字下げしてから入力する。

入力
body
    header.header
      .header__inner.inner
        h1.header__logo: a(href="./index.html") Logo
        nav.header__nav
          a.header__link(href="./company/index.html") 会社概要　※divは省略してもOKな要素
          a.header__link(href="./contact/index.html") お問い合わせ　※classは属性を省略し.を書く
↓
出力
<body>
    <header class="header">
      <div class="header__inner inner">
        <h1 class="header__logo"><a href="./index.html">Logo</a></h1>
        <nav class="header__nav">
          <a class="header__link" href="./company/index.html">会社概要</a>
          <a class="header__link" href="./contact/index.html">お問い合わせ</a>
        </nav>
      </div>
    </header>
</body>
ハッサク
ハッサク

class=”header”は .header でOK。

<div><a href=””>は a(href=””)でOK。(divが省略可能）

書き方の詳細については以下のとおり。

  • 要素（例：html、h2）→　文字をそのまま記入
  • 属性（例：href、src）→　()で囲む
  • 文字が中にあるもの　→　要素を指定＋半角スペース＋文字
    例：<title>タイトル</title>　だと　「title タイトル」と記入する

変数

変数の定義（黄色マーカー部分）

まず最初に「- const」で、定数名と定数内容を定義する。
→– const 定数名 = “定数内容”;

完成コード（よく見かける右上に表示されるメニュー文言部分）
- const menuCompany = "会社概要";
- const menuContact = "お問い合わせ";
- const urlCompany = "./company/index.html";
- const urlContact = "./contact/index.html";
- 
  const menus = [
    {
      name: "会社概要",
      url: "./company/index.html"
    },
    {
      name: "お知らせ",
      url: "./news/index.html"
    },
    {
      name: "お問い合わせ",
      url: "./contact/index.html"
    },
  ];

doctype html
html(lang="ja")
  head
    meta(charset="utf-8")
    meta(name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no")
    title DEMOサイト
    meta(name="description" content="トップページのディスクリプション")

    // Font
    link(rel="preconnect" href="https://fonts.googleapis.com")
    link(rel="preconnect" href="https://fonts.gstatic.com" crossorigin)
    link(href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap" rel="stylesheet")

    // CSS
    link(rel="stylesheet" href="./assets/css/style.css")

  body
    header.header
      .header__inner.inner
        h1.header__logo: a(href="./index.html") Logo
        nav.header__nav
          each menu in menus
            a.header__link(href=`${menu.url}`) #{menu.name}

配列部分（赤マーカー部分）

書き方には注意が必要です。以下参照。

悪い例
-　const menus = [　　//→ハイフンの後、改行されていない（このままだとエラーになる）
    {
      name: "会社概要",
      url: "./company/index.html"
    },
    {
      name: "お問い合わせ",
      url: "./contact/index.html"
    },
  ];
良い例
- 
  const menus = [　　//→ハイフンの後、改行されている（OK!)
    {
      name: "会社概要",
      url: "./company/index.html"
    },
    {
      name: "お知らせ",
      url: "./news/index.html"
    },
    {
      name: "お問い合わせ",
      url: "./contact/index.html"
    },
  ];
ハッサク
ハッサク

配列で管理する利点は、コードの効率化につながる！
・メニューの塊が把握しやすい！
・何回もaタグやclass名をかかなくてすむ！

定義した変数の使い方（青マーカー部分）

テキストを表示する部分は、#{-constで定義した名前}と書く。例：#{menuCompany}
配列を使用している場合は、以下のようになる。　例：#{menu.name}

          each menu in menus　//配列menusから一つずつ取り出してmenuに格納している
            a.header__link(href=`${menu.url}`) #{menu.name}

属性の中に書く場合は注意が必要で、書き方が以下のように変わる。
→`${menu.url}`　もしくは　menu.url

例：href=`${menu.url}`　もしくは　href=menu.url

ファイル分割

include＋パスを指定するだけで簡単に使えます。
例：include ./parts/_footer.pug

分割したfooter等は、partsフォルダ作成→ファイル「_footer.pug」を作成→ファイル内に記述すればOK。

ハッサク
ハッサク

例えば最初にindex.pugに全て記述し、その後footer等を分割した場合、インデントが下がった状態でコピペされます。
が、このままだとエラーになるので、新しいファイルに移動したらインデントを調整してあげましょう。（以下イメージ）

↓このようにインデントが下がった状態でコピペされるので
    footer.footer
      .footer__inner.inner
        .footer__copyright Copyright &copy; 2021 Logo All rights reserved.
↓インデントがない状態に調整してあげます（と、エラーがなくなります）
footer.footer
  .footer__inner.inner
    .footer__copyright Copyright &copy; 2021 Logo All rights reserved.
ハッサク
ハッサク

補足：上記の前提条件として、以下関数がGulpで設定されているものとします。

function compilePug() {
  return gulp.src(["./src/**/*.pug", "!./src/**/_*.pug"]) //_から始まるpugファイルは除くという設定
  .pipe(pug({
    pretty: true
  })) //pugのパッケージを読み込む
  .pipe(gulp.dest("./public"))
}

テンプレート作成

doctypeやhtml/headerの内容等、どのページでも共通して使う要素をテンプレート化し、何度も同じコードを書く手間を省くことができる。

ハッサク
ハッサク

テンプレートはどこでも使えるように汎用性を持たせることが大事！

変わる可能性がある部分は変数とblockに置き換えます。

変数とblockの内容は、各ページから指定していきます。

blockの書き方は、対象のblockに対して、インデントをひとつ下げて、そこに反映するコンテンツを記述する。(以下参照)

block ＋ 変数名

blockで、コンテンツの塊を指定することができる。

コード例
↓テンプレートを使うという宣言、使用するテンプレートのパスを書く
extend ./template/_page.pug
 
↓定義した変数の内容を設定
append value
  - const title = "DEMOタイトル";
  - const description = "DEMOのディスクリプション";

block mainVisual
  .main-visual.is-top
    .main-visual__content
      .main-visual__text トップページ

block content
  .section
    .inner
      h2.section__title セクション
      .section__lead Section
      .section__body
        p トップページのコンテンツが入ります。
ハッサク
ハッサク

テンプレートを使うと必要な部分だけを埋めながらコーディングができるため、かなり効率的にコーディングできるようになります！

テンプレートを作れるというのはPugの特徴なので、テンプレを作りながらコーディングしていきましょう。

Pugのメリット

  • 変数の指定ができる
  • ループの処理ができる
  • 共通で使うパーツ(header/footer等)は、ファイル分割で作れる
    →更新場所が1つですむ為、工数が減る
  • テンプレートを作成できる
    →必要な部分を埋めるだけで良い為、コーディングの工数が減る
タイトルとURLをコピーしました