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

生徒

「先生、Reactのコードで{ }がたくさん出てきますけど、これは何をしているんですか？」

先生

「それはJavaScriptの式をJSXの中に埋め込むための記号なんです。中括弧と呼ばれるものですね。」

生徒

「なるほど！じゃあ中括弧を使えば文字や数字を自由に表示できるんですか？」

先生

「はい、その通りです。実際の使い方を例で見てみましょう！」

1. JSXで中括弧を使う基本ルール

JSXの中で{ }を使うと、JavaScriptの変数や関数の結果を表示できます。これによって、動的に内容を変えられるのがReactの強みです。


function App() {
  const name = "太郎";
  return (
    <div>
      <h1>{name}さん、こんにちは！</h1>
    </div>
  );
}

（画面に「太郎さん、こんにちは！」と表示されます）

2. 数値や計算式を使ってみよう

中括弧の中には数値や計算式も書けます。これにより、単純な計算結果をそのまま表示できます。


function App() {
  const a = 10;
  const b = 5;
  return (
    <div>
      <p>計算結果は {a + b} です。</p>
    </div>
  );
}

（画面に「計算結果は 15 です」と表示されます）

3. 関数の結果を埋め込む

中括弧には関数の戻り値を入れることも可能です。これによって処理結果をそのまま表示できます。


function greet(name) {
  return name + "さん、ようこそ！";
}

function App() {
  return (
    <div>
      <h1>{greet("花子")}</h1>
    </div>
  );
}

（画面に「花子さん、ようこそ！」と表示されます）

4. 条件分岐も中括弧で表現できる

中括弧の中に三項演算子を使えば、簡単な条件分岐をJSX内で実現できます。三項演算子とは「条件 ? 真の場合 : 偽の場合」という書き方です。


function App() {
  const isLoggedIn = true;
  return (
    <div>
      <h1>{isLoggedIn ? "ログイン中" : "ログアウト中"}</h1>
    </div>
  );
}

（画面に「ログイン中」と表示されます）

5. 配列を使った繰り返し処理

中括弧の中でmap()関数を使うと、配列を繰り返し処理して複数の要素を表示できます。これはリスト表示をするときによく使います。


function App() {
  const fruits = ["りんご", "バナナ", "みかん"];
  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
}

（画面に「りんご」「バナナ」「みかん」とリストが表示されます）

6. スタイルを中括弧で指定する

スタイルを指定する場合も中括弧を使います。Reactではスタイルをオブジェクト形式で書き、そのオブジェクトを中括弧で埋め込みます。


function App() {
  const style = { color: "blue", fontSize: "20px" };
  return (
    <div>
      <h1 style={style}>青い文字で表示されます</h1>
    </div>
  );
}

（画面に青い文字の「青い文字で表示されます」と出ます）

7. 中括弧を正しく使うことがReactの基本

ReactのJSXでは中括弧が非常に重要です。変数の値、数式の結果、関数の戻り値、条件分岐、配列処理、スタイルなど、あらゆるケースで中括弧が活躍します。初心者のうちは「中括弧を使えばJavaScriptの式を埋め込める」と覚えておくと理解しやすいでしょう。

まとめ

ReactのJSXにおける中括弧の使い方を振り返ってみると、単に「記号」として存在しているのではなく、画面に動きを与えるためのとても重要な仕組みであることがわかります。中括弧は、変数や計算式、関数の戻り値、条件による表示の切り替え、配列の繰り返し表示、さらにはスタイルを指定する場面まで、 Reactのあらゆる場面で活躍します。とくに初心者の段階では、JSXの中にJavaScriptの式を自然に埋め込めるという点が理解の大きな助けになります。画面の見た目と動きを直感的に結びつけられるため、「なぜ表示が変わるのか」「どうしてこの結果になるのか」が視覚的に理解しやすくなります。

また、実際の例を通して確認したように、Reactの中括弧は単なる文字列の表示にとどまらず、ログイン状態を切り替えるような条件分岐や、リストの生成、スタイルの制御など、 Webアプリケーションで必要となる動的な処理の中心に位置しています。動く画面を作るためには必ず通る道であり、中括弧の役割を理解できるとReactの学びが一段階進んだといえるでしょう。とくに配列処理や条件分岐は実践でも頻繁に出てくるため、ここを押さえておくことで複雑なUIの構築にも対応しやすくなります。

さらに、Reactの魅力は中括弧を使うだけで完了する「小さな成功体験」を積み重ねやすい点にあります。たとえば変数ひとつを画面に表示するだけでも達成感がありますし、条件によって表示が変わる仕組みを作れば、「自分が書いたコードで反応が返ってくる」という手応えを感じられます。初学者にとってこうした体験は、学習を続ける大きなモチベーションとなります。中括弧の理解はReactの基礎でありながら奥が深い部分でもあるため、繰り返し使いながら慣れていく方法が最も効果的です。

まとめのサンプルプログラム

ここでは、中括弧の特徴がひとつにまとまった簡単なサンプルを振り返りとして紹介します。変数の表示、条件分岐、配列の繰り返しがひとつに集約されています。


function SummarySample() {
  const user = { name: "太郎", loggedIn: true };
  const messages = ["ようこそ！", "今日も楽しんでいきましょう", "学習を続ければ必ず上達します"];

  return (
    <div>
      <h2>{user.name}さんのステータス</h2>
      <p>{user.loggedIn ? "ログインしています" : "ログアウトしています"}</p>

      <h3>メッセージ一覧</h3>
      <ul>
        {messages.map((msg, index) => (
          <li key={index}>{msg}</li>
        ))}
      </ul>
    </div>
  );
}

このサンプルでは、中括弧を使ってユーザー情報を表示し、ログイン状態によって文言を分岐しています。さらに map() を使って複数のメッセージを一覧として描画しており、中括弧の使い方が複数同時に確認できる構成になっています。こうした実践的な書き方を体験することで、 JSXとJavaScriptの結びつきがより深く理解できるはずです。

先生と生徒の振り返り会話

生徒

「今日の内容で、中括弧の意味がかなりイメージしやすくなりました！こんなにいろいろ使えるんですね。」

先生

「その通りです。ReactのJSXは中括弧を理解すると一気に世界が広がりますよ。画面の動きとJavaScriptが自然につながる感覚が大切です。」

生徒

「特に配列の map() が便利だと思いました。リストがあっという間に作れるんだなって感じました！」

先生

「そうですね。配列処理は実践でよく使うので、自然に書けるようになると大きな力になりますよ。」

生徒

「これからのReact学習でも、中括弧を意識しながらいろいろ試してみます！」