webpack

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

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タグの中身を変更したら、両者に差異が出てしまいます

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

生徒
生徒
headerナビが各ページで違ったら、ユーザーは迷ってしまいますね。。。

 

 

includeのメリット

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

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

先生
先生
めちゃくちゃ便利!WordPressで言うところの、header.phpやfooter.phpのようなものだね。

共通部分は、includeさせればコーディングを効率化できる

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

 

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

 

先生
先生
includeさせている”特別なファイル”だと分かるように、_から始まるファイル名すると良いよ

 

_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を起動し、ブラウザで確認してみると・・・

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

先生
先生
変更したのは、_headerNav.pugだけなのに、2ページとも反映されているね!

 

まとめ

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

  • 共通パーツ部分を各ファイルに記述
  • 個別ファイル対応の問題点
  • includeのメリット
  • includeさせよう!
  • webpackを起動
  • ブラウザで確認する
  • 【おまけ】試しにincludeファイルを変更してみると…

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

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

 

参考

ABOUT ME
大城ゆう
エンジニア歴5年。 大学卒業後、フィールドエンジニア職に就くがその後のキャリアに不安を感じ、ゼロスキルからWEBデザイナーに転職。 その後WEB制作会社、東証一部上場企業のECサイト担当を経て、現在は自社開発企業のWEBエンジニアとして仕事に従事。