テンプレート文字とは

テンプレート文字列は、文字列の中に式を埋め込むことができるJavaScriptの機能です。例えば、次のコードはname変数の内容を文字列に埋め込んで表示します。

const name = "ちゃろぼ";
const message = `こんにちは、${name}です。`;
console.log(message); // こんにちは、ちゃろぼです。

テンプレート文字列を使うときは`で文字を囲みます。"でも'でもないので、注意しましょう。

React.jsのソースコード例

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

const Profile = () => {
	const name = "ちゃろぼ";
	const message = `こんにちは、${name}です。`;

	return (
		<div>
			<h1>{message}</h1>
		</div>
	);
}

ReactDOM.render(
	<Profile />,
	document.getElementById('root')
);