2022.5.13以前の記事でReactを使ったテンプレートエンジンでHTMLのマークアップをする方法についてまとめていました(参考記事「ReactのJSXでコンポーネントを使って効率のよい静的HTMLコーディング」)が、TypeScriptを使う場合には型付けが必要となり、ファイルの拡張子も.tsxに変わります。今回は前回のReactのコンポーネントを使ったHTMLのマークアップ方法でTypeScriptを導入してみたいと思います。構成についてはJSXの時と同様に、コンパイル後のファイル出力先であるdistディレクトリとコンパイル前のソースコードが格納されるsrcディレクトリに必要ファイルを用意します。拡張子が.jsxから.tsxに変わっていますがそれ以外は同じになりますね。main.tsx.eslintrc.jspackage.jsonwebpack.config.jsnode_modules続いて各種設定ファイルです、webpackの方は対象のファイルを.jsxから.tsxに変える以外は前回のものをそのまま引き継ぎます。ESLintの設定ファイルについては過去記事「webpackでESLintが使える環境を構築してみる」などをご参考に。buildDefault;そして、エントリーポイントになるファイル作成していきますが、これらも基本的にはJSXのものと処理自体は同じで、型付けが加わるという感じになります。」というものになります。動的なHTMLが返される返り値の型は「JSX.Element」となりますが、こちらは省略することで型推論されます。);またReactでTypeScriptを扱う場合に、コンポーネントを定義する方法として、「関数コンポーネント」と「Classコンポーネント」の2種類があります。記述方法は下記のように少し異なるのですが、今回は全て関数コンポーネントの形で進めていきます。}}そしてテンプレートエンジンで扱うページコンポーネント用の処理を見ていきます。ページテンプレートではJSXの時と同じくページ固有のmeta情報を扱うので変数として保持して、コンポーネント側にpropsとして受け渡します。TypeScriptではそれらの値の型を定義しておかないと型のエラーが発生してしまいます。コンポーネントへ値を受け渡す場合には注意が必要ですね。</body></html>`;propsの値を受け取る側のコンポーネントでも受け取る値の型を定義します。それ以外はJSXの時と同じように必要なコンポーネントを用意していきます。);}今回はページ固有のmeta情報をコンポーネント内で扱う想定なので、受け取った値を下記のようにHTML上に出力していきます。);}コンポーネントの作成や諸々の処理が出来上がるとビルドを実行していきます。ビルドのコマンドについては前回記事「ReactのJSXでコンポーネントを使って効率のよい静的HTMLコーディング」をご参考にどうぞ。renderToStaticMarkup()メソッドにより、コンポーネントがHTMLの文字列として処理され、各ページごとに静的なHTMLページが出来上がります。</body></html>今回はTypeScriptを使ったReactのコンポーネントでHTMLのテンプレートエンジンで効率良くコーティングを行う方法についてまとめてみました。ReactなどのフレームワークはHTMLを動的に取り扱う処理を実装するときにとても便利ですが、このようにコンポーネントを活用することで、テンプレートエンジンとしても活用できるので、うまくコーディングの効率化につなげていきたいですね。topこのウェブサイトはCookieを使用します当ウェブサイトではCookieを使用してアクセス解析や広告を行なっており、ウェブサイトの運用やコンテンツ制作に役立てています。サイトの利用を続けることで、Cookie使用に同意したことになります。