【webpack】pugファイルをincludeしてコーディングをさらに効率化しよう

記事内に商品プロモーションを含む場合があります

このような疑問に答える記事です。

前回までで、webpackを使って「どのようにpug化するか」「pugの書き方」について理解できたかと思います。

前回の記事を読んでいない方は、こちら↓

【webpack】pugを使って、効率的にコーディングしよう【pug-html-loader】 HTMLをpug化するメリットって何？ webpackでpugってどう導入するんだろう？ 以上の疑問の解決記事です。...

 

では、今回はpug化の大きなメリットである、includeさせる方法について解説していきます。

 

 

共通パーツ部分を各ファイルに記述

まず、includeする前に、各ページファイルに共通パーツ部分を書きます。
（今回は「headerナビ」を書きますね）

 

その前に、全体像が分かるよう、現在の階層構造を記載します。

webpack-tutorial
├dist/
|   ├──css/
|   |   └──style.css
|   ├──js/
|   |   └──bundle.js
|   └──index.html
|
├node_modules/
├src/
|   ├──images/
|   ├──js/
|   |   ├──index.js
|   |   └──sub.js
|   ├──scss/
|   |   └──style.scss
|   └──templates/
|   |   ├──index.pug //headerナビを追加する
|       ├──index.html
|   |   └──menu.pug //headerナビを追加する
|
├package-lock.json
├package.json
└webpack.config.js

 

それぞれのファイルにheaderタグを記述します。

index.pug

//index.pug

doctype html
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(http-equiv="X-UA-Compatible", content="IE=edge")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title Document
    body
        header
            ul 
                li 
                    a(href="./index.html") TOP
                li 
                    a(href="./menu.html") MENU
        h1 webpackチュートリアル
            span (SCSSを追加)
        img(src="/src/images/mountain.jpg", alt="")
        img(src="/src/images/sea.jpg", alt="")

 

menu.pug

//menu.pug

doctype html
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(http-equiv="X-UA-Compatible", content="IE=edge")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title メニュー | webpackチュートリアル
    body
        header
            ul 
                li 
                    a(href="./index.html") TOP
                li 
                    a(href="./menu.html") MENU
        h1 メニュー
            span (SCSSを追加)
        img(src="/src/images/mountain.jpg", alt="")
        img(src="/src/images/sea.jpg", alt="")

 

webpack起動後、ブラウザで確認

これらをwebpackを起動し、ファイル出力後、ブラウザ確認すると以下のようになります。

各ファイルにheaderを追加したので、ごく自然な出力結果かと思います。

 

個別ファイル対応の問題点

ただし、これが片方のファイル（例えば、index.pug）だけ、headerタグの中身を変更したら、両者に差異が出てしまいます。

この状態だと、サイトとして使い勝手が悪くなってしまいますよね。

 

 

includeのメリット

このような時にincludeが役立ちます。

headerタグ部分を共通パーツとして使用（include）すれば、1ファイル変更するだけで、それを読み込んでいる全ページに変更が反映されます。

では、具体的にどのように記述するかを見ていきましょう。

 

includeさせよう！

【手順1】includeファイルを作成する

読み込ませたいファイルを作成します。

webpack-tutorial
├dist/
|   ├──css/
|   |   └──style.css
|   ├──js/
|   |   └──bundle.js
|   └──index.html
|
├node_modules/
├src/
|   ├──images/
|   ├──js/
|   |   ├──index.js
|   |   └──sub.js
|   ├──scss/
|   |   └──style.scss
|   └──templates/
|   |   ├──_headerNav.pug //追加
|   |   ├──index.pug
|       ├──index.html
|   |   └──menu.pug
|
├package-lock.json
├package.json
└webpack.config.js

 

 

_headerNav.pug

//_headerNav.pug

header
    ul 
        li 
            a(href="./index.html") TOP
        li 
            a(href="./menu.html") MENU

 

 

【手順2】読込み記述を各ファイルに追加する

次にincludeファイルを読み込ませる記述を書きます。

index.pug

//index.pug

doctype html
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(http-equiv="X-UA-Compatible", content="IE=edge")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title Document
    body 
        //- ここから変更
        include _headerNav.pug
        //- ここまで変更
        h1 webpackチュートリアル
            span (SCSSを追加)
        img(src="/src/images/mountain.jpg", alt="")
        img(src="/src/images/sea.jpg", alt="")

 

menu.pug

//menu.pug

doctype html
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(http-equiv="X-UA-Compatible", content="IE=edge")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title メニュー | webpackチュートリアル
    body 
        //- ここから変更
        include _headerNav.pug
        //- ここまで変更
        h1 メニュー
            span (SCSSを追加)
        img(src="/src/images/mountain.jpg", alt="")
        img(src="/src/images/sea.jpg", alt="")

 

これで準備完了です。

 

 

webpackを起動

下記コマンドでwebpackを起動します。

npm run build

 

ブラウザで確認する

さっきと表示は変わらず、表示されているのを確認できました。
（読み込み方法が違うだけなので、これでOKです）

 

【おまけ】試しにincludeファイルを変更してみると…

これだけだと、本当にincludeファイルが機能しているかが不明瞭なので、_headerNav.pugを変更してみましょう。

 

_headerNav.pug

以下のように、変更します。

header
    ul 
        li 
            a(href="./index.html") 変更されたトップページ
        li 
            a(href="./menu.html") 変更されたメニューページ

 

これで両ページのheaderナビが変更されていればOKですね。

 

webpackを起動後、ブラウザで再度確認

webpackを起動し、ブラウザで確認してみると・・・

無事に両ページ反映されました。

 

まとめ

本記事では、「pugファイルをincludeしてコーディングを効率化しよう」と題して、以下のことを解説しました。

include機能は、pug化の大きなメリットです。
共通化可能なところは積極的に使っていくと良いでしょう。

次回はテンプレート継承についてみていきます。

 

参考

• Webpackでウェブサイト制作のHTML/CSS/JSコーディングを一気に効率化する実践講座 (Mac / Win)