先生と生徒の会話形式で理解しよう

生徒

「ReactのJSXで、ボタンの文字とか画像のパスを変えたいときって、どうやって値を渡すんですか？」

先生

「Reactでは、JSXという書き方でHTMLのようなコードを書きますが、その中で動的に値を渡すには中かっこ（波かっこ）を使います。」

生徒

「中かっこですか？HTMLと何が違うんですか？」

先生

「HTMLでは固定の文字しか書けませんが、ReactのJSXでは変数や関数の結果を渡せるのが特徴です。では具体的に見ていきましょう。」

1. JSXとは？Reactで使われる特別な書き方

まず、JSX（ジェイエスエックス）とは、JavaScriptの中でHTMLのように見えるコードを書くための記法です。Reactでは、ユーザーに見せる画面（UI）を作るためにJSXが使われます。

普通のHTMLでは、<h1>こんにちは</h1>のように文字を直接書きますよね。でもReactでは、表示する文字や画像、スタイルなどを変数や関数の結果に置き換えて動的に変えることができます。

2. JSX属性に動的な値を渡す基本：中かっこ { }

ReactのJSXでは、中かっこ { } を使うことで、JavaScriptの変数や関数をHTMLタグの属性に渡すことができます。

たとえば、ボタンの文字や画像のURL、class名などを変数で管理して、柔軟に使い回すことができます。

それでは、具体的なサンプルコードを見てみましょう。

3. サンプルコード：ボタンのテキストを変数で制御する


import React from "react";

function App() {
  const buttonText = "クリックしてね";

  return (
    <div>
      <button>{buttonText}</button>
    </div>
  );
}

export default App;

（画面に「クリックしてね」という文字のボタンが表示されます）

この例では、変数 buttonText の中身をボタンに表示しています。HTMLのように見えますが、中かっこ {} を使うことでJavaScriptの変数が使えるのです。

4. JSXの属性に変数を渡してみよう：画像の例

画像のURLを変数で管理して、JSXに渡すこともできます。


import React from "react";

function App() {
  const imageUrl = "https://example.com/sample.jpg";

  return (
    <div>
      <img src={imageUrl} alt="サンプル画像" />
    </div>
  );
}

export default App;

（画面に「https://example.com/sample.jpg」の画像が表示されます）

このように、src={imageUrl} のように記述することで、画像のURLを動的に変更できます。

5. クラス名を変数で渡す：CSSとの連携

ボタンのスタイルを切り替えたいときにも、クラス名を変数で管理できます。


import React from "react";

function App() {
  const classNameValue = "btn btn-primary";

  return (
    <div>
      <button className={classNameValue}>送信</button>
    </div>
  );
}

export default App;

（「送信」ボタンがBootstrapの青いボタンスタイルで表示されます）

className はHTMLの class と同じ意味ですが、Reactでは予約語の関係でclassではなくclassNameを使います。

6. 関数の結果を属性に使うこともできる

属性には、関数の戻り値を直接渡すことも可能です。たとえば、ランダムなメッセージを表示する関数を使ってみましょう。


import React from "react";

function getRandomText() {
  const messages = ["こんにちは！", "おはようございます！", "こんばんは！"];
  const index = Math.floor(Math.random() * messages.length);
  return messages[index];
}

function App() {
  return (
    <div>
      <h1>{getRandomText()}</h1>
    </div>
  );
}

export default App;

（画面に毎回違うメッセージが表示されます）

このように、関数の結果をJSXに渡すことで、動的で面白い画面を作ることができます。

7. 属性に文字列をそのまま渡すときは中かっこ不要

動的な値ではなく、固定の文字列を渡すときは中かっこは使いません。


<input type="text" placeholder="名前を入力してください" />

このように、HTMLと同じように文字列をそのまま書けばOKです。ただし、変数や関数を使うときは必ず { } を使う必要があります。

8. 属性に使えるのは「JavaScriptの値」

ここまでの内容をまとめると、ReactのJSXで属性に動的な値を渡すときは、次のように考えましょう：

中かっこ { } で囲めば、JavaScriptの変数や関数を使える
srcやalt、classNameなど、どの属性にも使える
固定の文字列だけ使うなら、中かっこは不要

JSXの書き方に慣れてくると、属性にどんどん動的な値を渡せるようになります。これがReactの「柔軟さ」や「コンポーネント再利用のしやすさ」に繋がっているのです。

まとめ

JSX属性に動的な値を渡す考え方を振り返ろう

この記事では、ReactのJSXで属性に動的な値を渡す方法について、基礎から順番に解説してきました。 JSXは一見するとHTMLとよく似ていますが、実際にはJavaScriptの文法として処理されているため、単なるマークアップとは違った考え方が必要になります。特に重要なのが、中かっこを使ってJavaScriptの値を埋め込むという点です。

ボタンの文字を変数で管理したり、画像のURLを動的に切り替えたり、クラス名を変数として渡して見た目を変更したりすることで、 Reactのコンポーネントは一気に柔軟性を持つようになります。これにより、同じ部品を使い回しながら、表示内容だけを切り替えるといった実装が簡単にできるようになります。 JSX属性に動的な値を渡せるかどうかは、Reactを使いこなせるかどうかの大きな分かれ道と言えるでしょう。

中かっこが持つ意味を正しく理解する

JSXで使われる中かっこは、「ここからJavaScriptを書きます」という合図のようなものです。 HTMLの世界では、タグの中に直接変数を書くことはできませんが、 ReactのJSXでは中かっこを使うことで、JavaScriptの変数や関数の戻り値を自然に埋め込めます。これは、画面の状態に応じて表示を変えるReactの思想と非常に相性が良い仕組みです。

たとえば、同じボタンでも、ログイン前とログイン後で表示する文字を変えたい場合、中かっこを使って変数を渡せば、条件に応じて簡単に切り替えられます。この考え方は、後々学ぶ条件分岐や状態管理とも深くつながっていきます。まずは「中かっこで囲んだ中はJavaScript」という基本ルールを、しっかり体に染み込ませることが大切です。

属性に渡せる値の種類を整理する

JSXの属性に渡せるのは、単なる文字列だけではありません。変数、数値、真偽値、配列、オブジェクト、関数の戻り値など、 JavaScriptとして扱える値であれば、基本的に何でも渡すことができます。その中でも初心者のうちは、変数と関数の戻り値を使いこなせるようになるだけで十分です。

一方で、固定の文字列を渡す場合は中かっこが不要である点も重要です。すべてに中かっこを付ければ良いわけではなく、「動的かどうか」で使い分ける意識を持つことで、コードの読みやすさが大きく変わります。 JSXは自由度が高い分、書き方のルールを理解していないと混乱しやすいですが、基本を押さえれば自然と整理されたコードが書けるようになります。

動的な属性を使ったシンプルなサンプル


import React from "react";

function App() {
  const buttonLabel = "送信する";
  const imagePath = "https://example.com/sample.jpg";

  return (
    <div>
      <h1>動的な属性のサンプル</h1>
      <img src={imagePath} alt="サンプル画像" />
      <button>{buttonLabel}</button>
    </div>
  );
}

export default App;

（画面に「動的な属性のサンプル」と表示され、画像と「送信する」ボタンが表示されます）

このサンプルのように、値を変数として管理してJSXに渡すだけで、表示内容を簡単に差し替えられるようになります。実際の開発では、この考え方を発展させて、状態や外部データに応じた表示切り替えを行っていきます。まずはシンプルな形で、動的な属性の便利さを実感してみてください。