式の埋め込み｜基礎を学ぶ

文字を直接書かない

ここまで、見出しの文字は JSX に直接書いてきました。

<h1>あおいのプロフィール</h1>

これだと名前を変えたいときに、名前が書いてある場所をすべて探して直すことになります。React では、値は変数に置いておき、JSX からはその変数を呼び出します。呼び出すときに使うのが波かっこ { } です。

const profile = {
  name: "あおい",
  title: "Web エンジニア",
};

export default function App() {
  return <h1>{profile.name}のプロフィール</h1>;
}

画面には「あおいのプロフィール」と出ます。波かっこの中は JavaScript として実行され、その結果が文字として表示されます。

書けるのは式です。式とは、計算すると1つの値になるもののことです。変数、プロパティの参照、計算、関数の呼び出しはすべて式なので書けます。

<p>{works.length} 件の作品</p>
<p>{profile.name} さん</p>
<p>{2026 - 2025} 年目</p>
<p>{profile.title.toUpperCase()}</p>

書けないのは文です。if 文や for 文は値にならないので、波かっこの中には書けません。条件によって表示を変えたいときは、あとの章で三項演算子を使います。

波かっこはタグの中身だけでなく、属性の値にも使えます。属性で使うときはクォートで囲みません。

<img src={work.image} alt={work.title} />

alt="{work.title}" のようにクォートで囲むと、変数の中身ではなく波かっこを含んだ文字がそのまま入ってしまいます。囲まない、と覚えてください。

波かっこの中にオブジェクトをそのまま入れると、画面に出ずにエラーになります。

<p>{profile}</p>

profile はオブジェクトなので、React はどう表示してよいか分かりません。表示したいのは中の値なので、profile.name のようにプロパティまで指定します。配列は表示できますが、要素が並べて出るだけなので、思ったとおりの形にはなりません。

もう1つ、波かっこを2重にしてしまう間違いもよくあります。{{ profile.name }} と書くとオブジェクトを渡したことになるので、波かっこは1つです。

プロフィールと作品のデータを用意してあります。画面に直接書いてある文字を、データから出す形に直します。