hagevvashi/2020-11-24-advent-calendar-2020-server-template-html-implementation.ts

## 2020-11-24-advent-calendar-2020-server-template-html-implementation.ts
function templateHtml(
  title: string,
  reactDom: string,
  styles: string,
  scripts: string
): string {
  return `
<!doctype html>
<html>
  <head>
    <title>${title}</title>
    ${styles}
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"/>
    <meta charset="UTF-8">
  </head>
  <body>
    ${reactDom}
    <script>
// globalに計測のapiが露出している場合などに備えて適当に用意しておく
window.anAnalyticsApi = {};
    </script>
    ${scripts}
  </body>
</html>
  `;
}

// 省略
  res.write(
    templateHtml(
      "Hello",
      '<div id="app"></div>',
      "<style>ol,ul{list-style:none;}</style>",
      '<script src="/bundle.js"></script>'
    )
  );
// 省略
	function templateHtml(
	title: string,
	reactDom: string,
	styles: string,
	scripts: string
	): string {
	return `
	<!doctype html>
	<html>
	<head>
	<title>${title}</title>
	${styles}
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"/>
	<meta charset="UTF-8">
	</head>
	<body>
	${reactDom}
	<script>
	// globalに計測のapiが露出している場合などに備えて適当に用意しておく
	window.anAnalyticsApi = {};
	</script>
	${scripts}
	</body>
	</html>
	`;
	}

	// 省略
	res.write(
	templateHtml(
	"Hello",
	'<div id="app"></div>',
	"<style>ol,ul{list-style:none;}</style>",
	'<script src="/bundle.js"></script>'
	)
	);
	// 省略