前回記事「Pugでmixinやblock appendを使って値を受け渡してコンポーネントファイルの読み込みを分岐させる」でも紹介しているのですが、普段はPugを使ってwebpackでコンパイルするという形でテンプレートエンジンを使って静的コーディングを進めていくことが多かったりします。ただ、案件によって処理や分岐ごとにコンポーネントを切り分ける場合に、複雑なケースではPugの場合では用意されている構文での対応では無理が生じたり、コンポーネントのコード量が増えてしまうなど限界がきてしまうことがあります。そんな時に、JavaScriptの中でHTMLが扱えるReactのJSXを使うと快適にコンポーネントを扱えることができそうなので一度試してみることにしました。今回はReactをテンプレートエンジンとして使い、静的HTMLコーディングを行なってみたいと思います。   Reactで扱うJSXあるいはTSXについては、過去記事「create-react-appでReactの導入とJSXの記法に触れてみる」にて詳しくまとめていますのでご参考に。また、ここではReactの開発環境としてwebpackを使う前提で進めていきます。webpackを使ったReactの開発環境については、過去記事「webpack ＋ TypeScript／Babel（JavaScript）の環境でReactを導入する」にまとめていますので、本記事ではこの記事でまとめている開発環境ができている前提で解説しています。   では早速開発環境の構築を進めていきます。今回は下記のような構成を想定しています。distディレクトリにはビルドされたHTMLやコンパイル後のスクリプトファイルなど静的アセットが格納されます。そして、実際にコードを扱っていくファイルはsrcディレクトリに格納しています。ポイントとしては、静的HTMLを生成するためのテンプレートとして使うファイルは、全て「template」ディレクトリに格納し、個別のHTMLファイルとして書き出さないもの、つまりコンポーネントとして扱うファイルには先頭にアンダースコアをつけて区別しておきます。この辺りはwebpackの設定で指定できるので、区別ができるのであればどのようなルールでもいいかと思います。

dist
  ┣ index.html
  ┣ *****.html
  ┣ ........
  ┗ js
    ┗ main.js
src
  ┣ template
    ┣ index.jsx
    ┣ ******.jsx
    ┣ ........
    ┗ components
      ┣ _Head.jsx
      ┣ _BodyScript.jsx
      ┣ _Header.jsx
      ┣ _Footer.jsx
      ┣ ........
  ┗ main.jsx
.eslintrc.js
package.json
webpack.config.js
node_modules

  ESLintなどの設定については、ここでは省略していますので詳しくは過去記事「webpackでESLintが使える環境を構築してみる」などを参考にしていただければと思います。   続いてwebpackの設定ファイルを見ていきます。ここでは「Reactで動的なコンポーネントを生成する」処理と「JSXファイルをHTMLファイルに変換」する処理の両方をできるようにしていきます。前者については過去記事「webpack ＋ TypeScript／Babel（JavaScript）の環境でReactを導入する」に沿って進めています。ですので、新たに後者の処理を作成していくのですが、HTMLファイルに変換するのは「html-webpack-plugin」を使いますので、PugファイルをHTMLファイルに変換する処理（参考記事「webpackでPugのコンパイル環境を作成してみる」）をそのままJSXファイルに使えるようカスタマイズしていきます。 【webpack.config.js】

const path = require('path');
const globule = require('globule');
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const buildDefault = {
  mode: 'development',
  devtool: 'source-map',
  entry: './src/main.jsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/main.js'
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        use: 'ts-loader'
      },
      {
        test: /\.(js|jsx)$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [ '@babel/preset-env', '@babel/preset-react' ]
            }
          }
        ]
      }
    ]
  },
  resolve: {
    extensions: [ '.ts', '.js', '.tsx', '.jsx', '.json' ]
  },
  plugins: [
    new ESLintPlugin({
      extensions: [ '.ts', '.js', '.tsx', '.jsx' ],
      exclude: 'node_modules'
    }),
  ],
  target: [ 'web', 'es5' ]
}

const reactFiles = globule.find( 'src/template/**/*.jsx', {
  ignore: [ 'src/template/**/_*.jsx' ]
});
reactFiles.forEach((react) => {
  const html = react.split('/').slice(-1)[0].replace('.jsx', '.html');
  buildDefault.plugins.push(
    new HtmlWebpackPlugin({
      inject: false,
      filename: `${path.resolve(__dirname, 'dist')}/${html}`,
      template: react,
      minify: false
    })
  )
});

module.exports = buildDefault;

  この時に、HTMLファイルに変換するJSXファイルの対象を、templateディレクトリ配下にある、ファイル名の先頭にアンダースコアがついていない拡張子が.jsxのファイルに限定しておくことで、ページ単位で個別のHTMLを生成できるようになります。Pugのコンパイル時と同様に拡張子を.htmlに変換し、distディレクトリ配下に格納されるようにしていきます。   続いてエントリーポイントとなるファイルを見ていきます。ここでは適宜必要な処理を行なっていき、最終的には外部の静的なJSファイルとしてコンパイルされるようになっています。下記ではReactで動的なコンポーネントとして出力する処理を作成しています。コンパイルされると処理に含めているHTMLがマウント先の要素の中に描画されます。 【src/main.jsx】

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  return (
    <>
      <div>Reactで動的に出力するコンポーネント</div>
    </>
  )
};
ReactDOM.render( <App />, document.getElementById('app') );

  そして本題のテンプレートエンジン用のJSXファイルを見ていきます。まずは個別にページ用のHTMLとして出力されるファイルです。ここでは、まずは各種コンポーネントとなるファイルをインポートしておきます。また併せて、Reactで描画されるHTMLを静的な形で出力する「renderToStaticMarkup()」メソッドを使えるようにモジュールをインポートしておきます。これを使うことで、テンプレートエンジンのように静的な形でHTMLが生成できるようになります。 【src/template/index.jsx】

import React from 'react';
import { renderToStaticMarkup } from 'react-dom/server';
import { Head } from './components/_Head.jsx';
import { Header } from './components/_Header.jsx';
import { Footer } from './components/_Footer.jsx';
import { BodyScript } from './components/_BodyScript.jsx';

const pageMeta = {
  name: 'home',
  title: 'トップページ',
  description: 'サイトのトップページです',
  ogpImage: 'assets/img/ogp.jpg',
  type: 'website',
  url: 'https://example.com/'
};

const Content = () => {
  return (
    <>
      <main>
        <h1>トップページのコンテンツ</h1>
        <div id="app"></div>
      </main>
    </>
  )
};

export default () => `
<!DOCTYPE html>
<html lang="ja">
  <head>
    ${renderToStaticMarkup(<Head meta={pageMeta} />)}
  </head>
  <body>
    ${renderToStaticMarkup(<Header meta={pageMeta} />)}
    ${renderToStaticMarkup(<Content meta={pageMeta} />)}
    ${renderToStaticMarkup(<Footer meta={pageMeta} />)}
    ${renderToStaticMarkup(<BodyScript meta={pageMeta} />)}
  </body>
</html>
`;

  ページ用のテンプレートには、上記のようにページごとに設定する各種メタ情報を変数として定義しておくと便利です。この変数は、各種コンポーネントファイルへpropsとして値を受け渡せるようにしていきます。そして、JSX記法でページコンテンツとなる部分が描画されるようにしておきます。ページの内容はここに含まれるイメージですね。最後にHTML全体の文字列としてエクスポートできるようにしておきます。その中で各種コンポーネントをrenderToStaticMarkup()メソッドで出力するようにしておくことで、HTMLの文字列がインポートされてそのまま反映されるようになります。   あとは必要に応じて各コンポーネント用のファイルを用意していきます。ページのレイアウトや構成に合わせて細かく切り分けておくと便利ですね。

// src/template/components/_Header.jsx
import React from 'react';
export const Header = (props) => {
  return (
    <>
      <header></header>
    </>
  );
}

// src/template/components/_Footer.jsx
import React from 'react';
export const Footer = (props) => {
  return (
    <>
      <footer></footer>
    </>
  );
}

// src/template/components/_BodyScript.jsx
import React from 'react';
export const BodyScript = (props) => {
  return (
    <>
      <script src="./js/main.js"></script>
    </>
  );
}

  コンポーネントの中には、受け取った値を使う場合もあります。今回のサンプルではページのメタ情報を値としてコンポーネント側へ渡しているので、下記のように引数で受け取り、値をHTML上に展開していきます。 【src/template/components/_head.jsx】

import React from 'react';
export const Head = (props) => {
  return (
    <>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <meta property="og:title" content={props.meta.title} />
      <meta property="og:description" content={props.meta.description} />
      <meta property="og:url" content={props.meta.url} />
      <meta property="og:type" content={props.meta.type} />
      <meta property="og:image" content={props.meta.ogpImage} />
      <meta name="description" content={props.meta.description} />
      <link rel="canonical" href={props.meta.url} />
      <title>{props.meta.title}</title>
    </>
  );
}

  これで一通りのファイルが揃いましたので、続いてビルドの準備をしていきます。まずはビルドされたHTMLを整形するための「prettier」をインストールしていきます。

$ npm install --save-dev prettier

  パッケージのインストールが完了したら、各種HTMLファイルに対してprettierコマンドを実行されるようにnpmスクリプトに登録しておきます。 【package.json】※一部抜粋

"scripts": {
  .......
  "build": "webpack && prettier --write dist/**/*.html",
},

  これで実際にビルドコマンドを実行すると、作成したファイルに対応して下記のように静的なHTMLファイルが生成されるようになります。Pugなどのその他テンプレートエンジンと同じような感じで使うことができました。 【index.html】

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <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="assets/img/ogp.jpg" />
    <meta name="description" content="サイトのトップページです" />
    <link rel="canonical" href="https://example.com/" />
    <title>トップページ</title>
  </head>
  <body>
    <header></header>
    <main>
      <h1>トップページのコンテンツ</h1>
      <div id="app"></div>
    </main>
    <footer></footer>
    <script src="./js/main.js"></script>
  </body>
</html>

  JSXのメリットとしては、JavaScriptの処理の中でHTMLが扱えるという点です。テンプレートエンジンでは用意されていないような複雑な分岐や条件に合わせた切り分けなど、直接JavaScriptの処理の中で進められるのでとても対応の幅が広がります。従来のテンプレートエンジンの場合、シンプルな静的サイトの場合では問題ありませんでしたが、動的なものや複雑なものになってくるとコードの見通しが悪くなったり、無理も生じてきますのでReactを使った方法に軍配が上がりそうですね。  

---

  今回はReactのJSXでコンポーネントを使って、テンプレートエンジンのような効率のよい静的HTMLコーディングをする方法についてまとめてみました。Vue.jsをよく使うのでReactはあまり使わなかったりするのですが、このようなJSXのメリットをどんどん活用していきたいですね。ただ、あまり複雑なものに関しては、最初からNuxt.jsやNext.jsなどの静的サイトジェネレーターに対応したフレームワークを使う方がよさそうですね、、色々と勉強しようと思います。   （参考にさせて頂いたサイト） ReactDOMServer - React テンプレートエンジンに React を使いつつ、きれいな HTML を生成したいんじゃ！！