ViteでHandlebarsを使った複数ページの作成に使える外部JSONファイルのデータを読み込む
最終更新日： Update!!
引き続きViteに関する記事になります。前回記事「ViteでTailwindCSSとテンプレートエンジンのHandlebarsを使ったページコーディング」では、テンプレートエンジンのHandlebarsを使ったコーディングの導入と基本的な使い方についてまとめていました。今回はその応用として、複数ページを作成ケースとその時にページ共有用のデータを外部のJSONファイルで扱い、データを読み込んでHTML側で出力する方法についてまとめていきます。
以前の記事で、webpackを使った環境でPugとEJSを使うときにこのような方法について紹介していましたが、今回はVite環境でHandlebarsを使うときの方法になります。
（参考記事）
Pugでテンプレートとデータでファイルを切り分けた開発を行う
EJSでテンプレートとデータでファイルを切り分けた開発を行う
このようにデータとテンプレートやコンポーネントのHTMLを切り分けることで、より制作が効率よく進められることや、ページ数が多くなったときや複雑な階層になった時も運用が楽になるというメリットがあります。
では先にデータをまとめておくJSONファイルを用意していきます。PugとEJSの時はそれぞれ専用の変数用ファイルや、JSファイルとしていましたが、今回はJSON形式で作成していきます。ここではサイトデータとしてサイト名や各ページのメタ情報などを下記のようにまとめています。一点、重要な部分として、ページ用の識別キーはファイルパスの文字列になるように指定します。これは後述するViteの設定で必要になるためです。
【sitedata.json】
{
"siteName": "サンプルサイト",
"siteUrl": "https://example.com",
"pageMeta": {
"/index.html": {
"id": 1,
"name": "home",
"title": "トップページ",
"description": "サイトのトップページです",
"ogpImage": "/public/images/ogp.jpg",
"type": "website",
"path": "/"
},
"/page1.html": {
"id": 2,
"name": "page1",
"title": "ページ1",
"description": "ページ1の説明文です",
"ogpImage": "/public/images/ogp.jpg",
"type": "article",
"path": "/page1.html"
}
.....
}
}
これらのデータはViteのプラグインを経由して、Handlebars側の変数として扱われるようになります。そのための設定をViteの設定ファイルに追記していきます。今回はローカルのJSONファイルを参照するので「require()」メソッドで読み込むことができます。注意点としては、作成するページ数が動的になるため、contextのオプションにそのまま値を指定するのではなく、関数を作成し、引数で対象のページを判別しておくことがポイントになります。先ほど作成したデータ用のJSONファイルでページのキーとなるのがパスになっているのはそのためです。これでそれぞれのページに対応したデータがHTML側の変数として扱えるようになります。
【vite.config.js】※一部抜粋
const siteData = require('./sitedata.json');
export default defineConfig(({ command }) => ({
....
plugins: [
handlebars({
context: (pagePath) => {
return {
envUrl: command === 'serve' ? 'http:localhost' : 'https://example.com',
siteName: siteData.siteName,
siteUrl: siteData.siteUrl,
pageMeta: siteData.pageMeta[pagePath]
}
}
....
}),
]
}));
上記の指定でhandlebarsの変数として登録されたので、ソースコード側のHTMLやhandlebarsのパーシャルファイル内で変数を展開できるようになります。下記のようにmetaタグなどの値に指定していきます。
【src/index.html】※一部抜粋
<head>
<meta property="og:title" content="{{pageMeta.title}}">
<meta property="og:description" content="{{pageMeta.description}}">
<meta property="og:url" content="{{envUrl}}{{pageMeta.path}}">
<meta property="og:type" content="{{pageMeta.type}}">
<meta property="og:image" content="{{envUrl}}{{pageMeta.ogpImage}}">
<meta name="description" content="{{pageMeta.description}}">
<title>{{pageMeta.title}}</title>
</head>
.....
ビルドされたHTMLを確認すると、JSONファイルで指定した値が正しく出力されているのが確認できます。もちろん複数ページの場合にはそれぞれページごとに指定した値になっています。
【dist/index.html】※一部抜粋
<head> <meta property="og:title" content="トップページ"> <meta property="og:description" content="サイトのトップページです"> <meta property="og:url" content="https://example.com/"> <meta property="og:type" content="website"> <meta property="og:image" content="https://example.com/public/images/ogp.jpg"> <meta name="description" content="サイトのトップページです"> <title>トップページ</title> </head> .....このようにして各ページのメタ情報などは一元管理できるようになりましたが、Viteで複数のHTMLをビルド対象とする場合には、下記のようにbuild.rollupOptionsのinputのオプションでそれぞれ独立したエントリーポイントとして指定する必要があります。
build: {
.....
rollupOptions: {
input: {
index: resolve(__dirname, 'src/index.html'),
page1: resolve(__dirname, 'src/page1.html'),
.....
},
.....
}
}
少ないページ数では問題ないですが、数が多くなってくると手動では限界があります。そこでソースファイルのディレクトリ内から対象のHTMLを検索して自動でエントリーポイントが設定されるようにしていきます。この方法については、以前にwebpackでPugのコンパイル環境を作成した方法と同じようなやり方になり（参考記事：webpackでPugのコンパイル環境を作成してみる）「globule」を使ってHTMLファイルを検索していきます。そこでまずは必要なモジュールをインストールしていきます。
$ npm install --save-dev globuleモジュールを読み込み、「globule」の「find()」メソッドで対象のディレクトリからhtmlファイルを検索していきます。この時、第二引数には除外する条件を指定できるので、handlebarsのパーシャルファイルなどを除いておくと良いですね。 【vite.config.js】※一部抜粋
import { resolve } from 'path';
import { defineConfig } from 'vite';
import handlebars from 'vite-plugin-handlebars';
import globule from 'globule';
const htmlFiles = globule.find('src/**/*.html', {
ignore: [
'src/hbs/*.html',
'src/**/_*.html'
]
});
const multiPageObject = Object.fromEntries(htmlFiles.map((path) => {
return [
path.split('/').slice(-1)[0].replace('.html', ''), resolve(__dirname, path)
]
}));
検索結果はファイルパスの配列として返されるので、それをbuild.rollupOptionsのinputのオプションの値に合うよう変換していきます。具体的にはちょうど下記のように値を変換しています。
// htmlFiles（各HTMLソースファイルの配列）
[ 'src/index.html', 'src/page1.html', .... ]
↓
// multiPageObject（ファイル名のキーとファイルパスのオブジェクト）
{
index: '/Users/********/PROJECT_DIR/src/index.html',
page1: '/Users/********/PROJECT_DIR/src/page1.html',
}
あとはViteの設定ファイルにて、対象となるオプションに変換した値を指定すると動的にHTMLのエントリーポイントが展開されるようになり、ページの数に合わせて自動で対応できるようになります。
build: {
.....
rollupOptions: {
input: multiPageObject,
.....
}
}
.....
HTMLのコーディングではハードコーディングになりがちで静的な箇所が多くなっていしまいますが、一手間かけてこういった仕組みを用意しておくと、ページの数が多くなったりした時の対応もしやすく、ミスを減らすことも期待できるので、ぜひ準備しておきたいですね。
この記事を書いた人
sponserd
keyword search
recent posts
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
- ViteでVue.jsとVuex（Pinia）とVue Routerを使ってみる
ViteでVue.jsとVuex（Pinia）とVue Routerを使ってみる
- ViteでHandlebarsを使った複数ページの作成に使える外部JSONファイルのデータを読み込む
ViteでHandlebarsを使った複数ページの作成に使える外部JSONファイルのデータを読み込む
- ViteでTailwindCSSとテンプレートエンジンのHandlebarsを使ったページコーディング
ViteでTailwindCSSとテンプレートエンジンのHandlebarsを使ったページコーディング
- ViteでPostCSS周りの設定やSassを使う
ViteでPostCSS周りの設定やSassを使う
- フロントエンドの開発環境にVite ＋ TypeScriptを導入する
フロントエンドの開発環境にVite ＋ TypeScriptを導入する
categories