React＋TypeScript（TSX）でコンポーネントを使った効率のよい静的HTMLコーディング

React2022.5.13

以前の記事でReactを使ったテンプレートエンジンでHTMLのマークアップをする方法についてまとめていました（参考記事「ReactのJSXでコンポーネントを使って効率のよい静的HTMLコーディング」）が、TypeScriptを使う場合には型付けが必要となり、ファイルの拡張子も.tsxに変わります。今回は前回のReactのコンポーネントを使ったHTMLのマークアップ方法でTypeScriptを導入してみたいと思います。構成についてはJSXの時と同様に、コンパイル後のファイル出力先であるdistディレクトリとコンパイル前のソースコードが格納されるsrcディレクトリに必要ファイルを用意します。拡張子が.jsxから.tsxに変わっていますがそれ以外は同じになりますね。

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

続いて各種設定ファイルです、webpackの方は対象のファイルを.jsxから.tsxに変える以外は前回のものをそのまま引き継ぎます。ESLintの設定ファイルについては過去記事「webpackでESLintが使える環境を構築してみる」などをご参考に。【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.tsx',
  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/**/*.tsx', {
  ignore: [ 'src/template/**/_*.tsx' ]
});
reactFiles.forEach((react) => {
  const html = react.split('/').slice(-1)[0].replace('.tsx', '.html');
  buildDefault.plugins.push(
    new HtmlWebpackPlugin({
      inject: false,
      filename: `${path.resolve(__dirname, 'dist')}/${html}`,
      template: react,
      minify: false
   })
  )
});

module.exports = buildDefault;

そして、エントリーポイントになるファイル作成していきますが、これらも基本的にはJSXのものと処理自体は同じで、型付けが加わるという感じになります。Reactコンポーネントの型は「React.VFC 」というものになります。そして動的なHTMLが返される返り値の型は「JSX.Element」となりますが、こちらは省略することで型推論されます。【src/main.tsx】

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

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

またReactでTypeScriptを扱う場合に、コンポーネントを定義する方法として、「関数コンポーネント」と「Classコンポーネント」の2種類があります。記述方法は下記のように少し異なるのですが、今回は全て関数コンポーネントの形で進めていきます。

// 関数コンポーネント
const App: React.VFC = (): JSX.Element => {
  return (
    <>
      <div>Reactで動的に出力するコンポーネント</div>
    </>
  )
}

// Classコンポーネント
class App extends React.Component {
  render(): JSX.Element {
    return (
      <>
        <div>Reactで動的に出力するコンポーネント</div>
      </>
    )
  }
}

そしてテンプレートエンジンで扱うページコンポーネント用の処理を見ていきます。ページテンプレートではJSXの時と同じくページ固有のmeta情報を扱うので変数として保持して、コンポーネント側にpropsとして受け渡します。TypeScriptではそれらの値の型を定義しておかないと型のエラーが発生してしまいます。コンポーネントへ値を受け渡す場合には注意が必要ですね。【src/template/index.tsx】

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

interface pageMetaInterface {
  name: string,
  title: string,
  description: string,
  ogpImage: string,
  type: string,
  url: string
}

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

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

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

propsの値を受け取る側のコンポーネントでも受け取る値の型を定義します。それ以外はJSXの時と同じように必要なコンポーネントを用意していきます。

// src/template/components/_Header.tsx
import React from 'react';
export type PageMeta = {
  meta: {
    name: string,
    title: string,
    description: string,
    ogpImage: string,
    type: string,
    url: string,
  }
}
export const Header: React.VFC<PageMeta> = (props) => {
  return (
    <>
      <header></header>
    </>
  );
}

// src/template/components/_Footer.tsx
import React from 'react';
export type PageMeta = {
  meta: {
    name: string,
    title: string,
    description: string,
    ogpImage: string,
    type: string,
    url: string,
  }
}
export const Footer: React.VFC<PageMeta> = (props) => {
  return (
    <>
      <footer></footer>
    </>
  );
}

// src/template/components/_BodyScript.tsx
import React from 'react';
export type PageMeta = {
  meta: {
    name: string,
    title: string,
    description: string,
    ogpImage: string,
    type: string,
    url: string,
  }
}
export const BodyScript: React.VFC<PageMeta> = (props) => {
  return (
    <>
      <script src="./js/main.js"></script>
    </>
  );
}

今回はページ固有のmeta情報をコンポーネント内で扱う想定なので、受け取った値を下記のようにHTML上に出力していきます。【src/template/components/_head.tsx】

import React from 'react';
export type PageMeta = {
  meta: {
    name: string,
    title: string,
    description: string,
    ogpImage: string,
    type: string,
    url: string,
  }
}
export const Head: React.VFC<PageMeta> = (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>
    </>
  );
}

コンポーネントの作成や諸々の処理が出来上がるとビルドを実行していきます。ビルドのコマンドについては前回記事「ReactのJSXでコンポーネントを使って効率のよい静的HTMLコーディング」をご参考にどうぞ。renderToStaticMarkup()メソッドにより、コンポーネントがHTMLの文字列として処理され、各ページごとに静的な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>

今回はTypeScriptを使ったReactのコンポーネントでHTMLのテンプレートエンジンで効率良くコーティングを行う方法についてまとめてみました。ReactなどのフレームワークはHTMLを動的に取り扱う処理を実装するときにとても便利ですが、このようにコンポーネントを活用することで、テンプレートエンジンとしても活用できるので、うまくコーディングの効率化につなげていきたいですね。