【handlebars】HTMLの共通部分をパーシャル化して管理する方法

handlebars

SHARE

目次

はじめに

株式会社TOKOSのタクヤです！
今回はヘッダーやフッターなどの共通部分をパーシャル化する方法を解説します！
handlebarsというライブラリを用いた簡単な方法ですので是非試してみてください！

対象読者

  • HTMLコーダー
  • ヘッダーやフッターのHTMLを効率をよく管理したい方

前提

ViteとTypescriptの環境を使用しています。
バージョンは以下のとおりです。

Node20.11.1
Vite5.2.0
Typescript5.2.2
vite-plugin-handlebars2.0.0

導入

プラグインの導入

ライブラリの導入を行います。
今回使うライブラリはvite-plugin-handlebars です。
以下コマンドでインストールしてください。

$ yarn add -D vite-plugin-handlebars

ディレクトリ構造

ここでプロジェクト全体のファイル構成を確認します。

├── node_modules
├── public
├── src
│   ├── company
│   │   └── index.html
│   ├── css
│   ├── js
│   │   └── data.ts
│   ├── partials
│   │   ├── footer.hbs
│   │   └── header.hbs
│   └── index.html
├── package.json
└── vite.config.js

src/partials の中にヘッダーやフッターなどの共通パーツを入れます。拡張子は.hbs です。
src/js の中にプロジェクト全体で使用するサイト名やページ単位で使用するタイトルを記載したdata.ts があります。
src 直下にあるindex.html はトップページ、src/company の直下にあるindex.html は会社概要ページのファイルです。

各ファイルの設定

ライブラリの導入が完了したら、各ファイルの設定を行っていきます。

vite.config.jsの設定

vite-plugin-handlebars を使うためにvite.config.jsの設定をしていきます。

import { resolve } from "path"
import { defineConfig } from "vite"
import handlebars from "vite-plugin-handlebars"
import { pageData, siteData } from "./src/js/data"

export default defineConfig({
  // 省略
  plugins: [
    handlebars({
      partialDirectory: resolve(__dirname, "src/partials"),
      context: (pagePath) => {
        return {
          siteTitle: siteData.title,
          page: pageData[pagePath],
        }
      },
    }),
  ],
})

partialDirectory の値に共通パーツが入っているsrc/partialsを指定します。
context の値には各ページで使用するための情報を返す関数を設定しています。
関数内のsiteTitle とpage は.htmlや.hbs で使用できます。

data.tsの設定

export const siteData = {
  title: "株式会社TOKOS",
}

export const pageData = {
  "/index.html": {
    title: siteData.title,
  },
  "/company/index.html": {
    title: `会社概要 | ${siteData.title}`,
  }
}

サイト、トップページ、会社概要ページのタイトルを定義しています。

共通パーツの作成

共通パーツの作成をしていきます。
ヘッダーとフッターを作成していきます。

header.hbsの作成

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{{page.title}}</title>
  </head>
  <body>
    <div>
      <ul class="global-menu">
        <li>
          <a href="/">トップ</a>
        </li>
        <li>
          <a href="/company/">会社概要</a>
        </li>
        <li>
          <a href="/service/">サービス</a>
        </li>
        <li>
          <a href="/contact/">お問い合わせ</a>
        </li>
      </ul>
    </div>

全ページ共通のheadタグ とヘッダー を共通化しています。
titleタグ には{{ page.title }}でページにおけるタイトルを表示しています。

footer.hbsの作成

    <footer>
      <ul class="global-menu">
        <li>
          <a href="/">トップ</a>
        </li>
        <li>
          <a href="/company/">会社概要</a>
        </li>
        <li>
          <a href="/service/">サービス</a>
        </li>
        <li>
          <a href="/contact/">お問い合わせ</a>
        </li>
      </ul>
    </footer>
    <script type="module" src="/js/main.ts"></script>
  </body>
</html>

フッターとJavascriptの読み込みの記述をしています。

共通化パーツの表示

最後に共通化したパーツを表示していきます。

HTMLファイル

{{> header }}
<h1>{{page.title}}のトップページ</h1>
{{> footer}}

{{> header}}と{{> footer}}で共通化してあるヘッダーとフッターを読み込んでいます。
共通化したパーツの表示は{{> [ファイル名]}} のような形になります。
これで共通化したパーツの表示ができました。

終わりに


今回は HTMLの共通部分をパーツ化する方法を説明しました。
ぜひhandlebarsを使って共通化パーツを作り、HTMLの管理を効率化してみてください。

前の記事

【React】ReactHookFormのuseFieldAr…

次の記事

ContactForm7で作成したお問い合わせフォームのスパム…