ViteでTailwindCSSとテンプレートエンジンのHandlebarsを使ったページコーディング

Vite2023.4.14

最終更新日：2023.4.14 Update!!

Viteを使うことで手軽にフロントエンド開発やコーディングの環境を作成できますが、フレームワークなどと組み合わせることで、より効率良いコーディングが実現できます。特にシンプルな静的ページを作成するときにはその効果を発揮します。今回はCSSのフレームワークであるTailwindCSSと、JavaScriptのHTMLテンプレートエンジンのHandlebarsを使って効率良くコーディングをする例を見ていきます。こちらの内容は、下記の記事でViteの基本的な開発環境ができているという前提になります。詳しくは各記事でまとめていますので合わせてご参照ください。（参考記事）フロントエンドの開発環境にVite ＋ TypeScriptを導入する ViteでPostCSS周りの設定やSassを使う

テンプレートエンジンHandlebarsのインストール

まずはテンプレートエンジンの導入からです。テンプレートエンジンは効率良くサイトが作成できるよう様々な機能や、複数のテンプレートをまとめて1つのデータを生成できるような仕組みになります。代表的なものであれば、PugやEJSといったものがあり、以前にもいろんな記事を紹介していました。（Pugに関する記事一例） Pugで覚えておくと便利なコーディング方法まとめ（機能編） Pugでページテンプレートの作成にextendsとblockを活用する（EJSに関する記事一例） EJSでコンポーネントのインクルードや値の受け渡しなどを試してみる EJSでテンプレートとデータでファイルを切り分けた開発を行う PugもEJSもいろんな機能がありとても優れたテンプレートエンジンですが、記法や処理などの学習コストが高く、ちょっと敷居が高い印象があります。そこで静的なページコーディングではよりシンプルにミニマムな機能で、HTMLと同じように扱えるHandlebarsもお勧めします。【Handlebars】 https://handlebarsjs.com/ まずは、開発環境でHandlebarsが使えるようにモジュールをインストールしていきます。

$ npm install --save-dev vite-plugin-handlebars

モジュールのインストール後はViteの設定ファイルでプラグインのオプションに追加します。これでViteのプロジェクトでHandlebarsが使用できます。【vite.config.js】

import { defineConfig } from 'vite';
import handlebars from 'vite-plugin-handlebars';
export default defineConfig({
  .....
  plugins: [
    handlebars()
  ]
  .....
});

では実際にHandlebarsを使うサンプルと設定方法などを見ていきます。 1.Handlebars Contextを使った変数 Handlebarsでは外部に定義した変数をページ側で読み込むことができます。グローバル変数や環境変数に近いイメージでしょうか。変数を定義する際には、Handlebarsの「context」オプションに変数名となるキーとその値を指定します。下記ではViteのコマンドの値を参照し、開発用か本番用のビルドに合わせてURLを分岐させる例です。ちなみにコマンドの値を使う場合には、defineConfigのコールバック関数の引数を渡す必要があります。【vite.config.js】※一部抜粋

export default defineConfig(({ command }) => ({
  .....
  plugins: [
    handlebars({
      context: {
        appUrl: command === 'serve' ? 'http:localhost/' : 'https://example.com/'
      }
    })
  ]
  .....
}));

これで変数には実行中のコマンドに応じてそれぞれの値が入るようになります。実際にソースファイルのHTML側で変数を呼び出します。変数を展開する場合には二重波括弧で変数を囲みます。【src/index.html】※一部抜粋

<a href="{{ appUrl }}">サイトトップ</a>

実際にビルドすると下記のように環境に合わせて出力される値が切り替わっていることが確認できます。

// 本番ビルド後（dist/index.html）
<a href="https://example.com/">サイトトップ</a>

// 開発環境サーバー
<a href="http:localhost/'">サイトトップ</a>

全ページにわたる動的なデータなどはこのように変数を使うことでとても管理がしやすくなりますね。 2.パーシャルファイルを使ったコンポーネント もう一つ試してみたい機能はパーシャルファイルです。テンプレートエンジンを使う理由やメリットとして、ページ共通の部分をコンポーネントとして扱うことが挙げられます。Handlebarsでは個別のファイルをパーシャルファイルとすることで、コンポーネントのようにインクルードさせることが可能になります。その際には、特定のディレクトリをパーシャルファイル用のディレクトリとして指定する必要があります。【vite.config.js】※一部抜粋

export default defineConfig({
  .....
  plugins: [
    handlebars({
      partialDirectory: resolve(__dirname, 'src/hbs')
    })
  ]
  .....
});

ここで指定したディレクトリ配下のファイルがパーシャルファイルとして認識されるようになります。「partialDirectory」オプションでパーシャルファイルのディレクトリをパスで指定します。またパーシャルファイルとして扱えるのは拡張子が「.html」もしくは「.hbs」が対象になるので注意が必要です。.htmlの拡張子を使う場合には先頭にアンダースコアを入れるなど、パーシャルファイルであることを明示しておくとわかりやすいですね。個人的には、.hbsの拡張子を使うようにしていますが。実際に下記のようにコンポーネントファイルを作成します。【src/hbs/header.hbs（header.html）】

<header>ヘッダー</header>

あとは定義したコンポーネントをソースファイルのHTML側で呼び出します。こちらも変数と同じく二重波括弧でファイル名を指定しますが、前に「＞」の記号が追加されるのを忘れないようにします。【src/index.html】

<!DOCTYPE html>
<html lang="ja">
  <head>
    ......
  </head>
  <body>
    {{> header }}
    <main>メイン</main>
    <footer>フッター</footer>
    <script type="module" src="./ts/main.ts"></script>
  </body>
</html>

実際にビルドすると呼び出した部分にコンポーネントファイルのコードが出力されているのが確認できます。【dist/index.html】

<!DOCTYPE html>
<html lang="ja">
  <head>
    ......
    <script type="module" crossorigin src="./assets/scripts/index.min.js"></script>
  </head>
  <body>
    <header>ヘッダー</header>
    <main>メイン</main>
    <footer>フッター</footer>
  </body>
</html>

Handlebarsにも一応条件分岐などの構文が用意されているようですが、PugやEJSよりシンプルに扱えるので、動的な分岐処理や、繰り返しが複雑な場合でなければ、手軽で快適にコーディングできるのではないでしょうか。

CSSフレームワークTailwindCSSのインストール

続いてCSSのフレームワークを見ていきます。CSSフレームワークも様々な種類がありますが、近年はやはりTailwindCSSが主流なのではないでしょうか。以前の記事「webpack＋Reactの環境にTailwindCSSを導入してみる」でもTailwindCSSについては少し触れていますが、今回はViteで使う方法をあらためてチェックしていきます。まずは以前と同様にモジュールをインストールしていきます。Viteで扱う場合にはTailwindCSSの設定ファイルも必要なので合わせて作成しておきます。また、PostCSSのモジュールや設定ファイルがない場合にはこのタイミングで準備しておきます（参考記事：ViteでPostCSS周りの設定やSassを使う）

$ npm install --save-dev tailwindcss
$ touch tailwind.config.js

モジュールがインストールできたら、先にTailwindCSSの設定ファイルを下記のように記述していきます。この辺りは以前にやったものと同じですね。TailwindCSSで使うclassを限定する対象のファイル名を指定しておくことで、ビルド後のファイルサイズを最適化できます。【tailwind.config.js】

export default {
  content: [
    "./src/*.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Viteの場合にはPostCSSの設定も必要になりますので、下記のように「plugins」のオプションに登録しておきます。これで準備ができました。【postcss.config.cjs】

module.exports = {
  plugins: {
    ....
    tailwindcss: {}
  },
}

TailwindCSSを使うにはCSSもしくはSassファイル側で下記のように必要に応じたモジュールを指定することでスタイルが適用されるようになります。【src/main.scss】

@tailwind base;
@tailwind components;
@tailwind utilities;

あとはHTML上でTailwindCSSのclassを指定していくことで、スタイルが反映されていきます。

<p class="text-3xl font-bold underline mx-2">TailwindCSSでのスタイリング</p>

実際にビルド後のCSSを確認すると、TailwindCSSで用意されたスタイルが含まれているのが確認できますね。【dist/main.css】

*,:before,:after{-webkit-box-sizing:border-box;box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}.....

今回はTailwindCSSとHandlebarsというCSSのフレームワークとテンプレートエンジンをViteで扱う方法についてまとめてみました。Viteの快適な開発環境に加えて、ちょっとしたプロトタイプやサンプルページ、ペライチのLPなどであれば、かなりスピーディーに作成できるのではないでしょうか。コーディングの効率化を目指す際にはぜひ導入を検討してみたいものですね。（参考にさせていただいたサイト） npm vite-plugin-handlebars Install Tailwind CSS with Vite