JSXに変数を埋め込もう

前回のレッスンでは、基本的なJSXの書き方を学びましたね。
このレッスンでは、JSXの中にJavaScriptの変数や式を埋め込む方法を学んでいきましょう！

JSXの中にJavaScriptを埋め込む方法

JSXでは、{} を使ってJavaScriptの変数や式を直接埋め込むことができます。

変数や式を埋め込む

たとえば、ユーザーの名前を表示したい場合は、こんな感じで書きます。

function App() {
  const name = "mosyabo";
  return <h1>Hello, {name}!</h1>;
}
// 画面には "Hello, Mosyabo!" と表示される

JSXの中で関数を実行する

JSXの中でJavaScriptの関数を呼び出すこともできます。
ただし、関数の戻り値は数値や文字列、JSX要素などの値である必要があります。

function getYear() {
  return new Date().getFullYear();
}

function App() {
  return (
    <p>今は西暦{getYear()}年です。</p>
  );
}

つまり、JSXの中で関数を使うのはOKだけど、その関数の戻り値はJSXがちゃんと理解して表示できる形でないとダメってことだね！

属性に変数を埋め込む

JSXの中で、HTMLタグの属性の値としてJavaScriptの変数を使うこともできます。

function App() {
  const url = "https://www.google.com";
  return <a href={url}>Google</a>;
}

JSXの注意点

JSXでは、テキスト、数値、JSX要素といったものを直接表示することができますが、オブジェクトやクラスのようなものを直接表示しようとするとエラーになります。

たとえば、下のコードの例を見てみましょう！

function App() {
  const obj = { name: "Mosyabo" };
  return <h1>{obj}</h1>;
}

オブジェクトを直接HTMLに変えられないから、このコードは動かなくてエラーになるんだね！

オブジェクトを表示したいときは、オブジェクト全体を画面に表示しようとするとエラーが起きるので、オブジェクト内の具体的な値（たとえば、文字列や数値など）に絞る必要があります。

function App() {
  const obj = { name: "Mosyabo" };
  return <h1>{obj.name}</h1>;
}
// 画面には "Mosyabo" と表示される