webpack

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

  /

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

pug化するメリットって何？
includeってどう書くの？

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

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

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

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

 

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

 

 

Contents
  1. 共通パーツ部分を各ファイルに記述
  • 個別ファイル対応の問題点
  • includeのメリット
  • includeさせよう！
    1. 【手順1】includeファイルを作成する
    2. 【手順2】読込み記述を各ファイルに追加する
  • webpackを起動
  • ブラウザで確認する
  • 【おまけ】試しに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
    ゆう
    エンジニア歴7年。 大学卒業後、フィールドエンジニア職に就くが「手に職をつけたい」と思い、未経験からWEBデザイナーに転職。 その後、「WEB制作会社」「上場企業のECサイト運用」を経て、現在は「自社開発企業」のフロントエンドエンジニアとして仕事をしています。
    RELATED POST