Next.jsで学ぶReact講座（完全初心者向け・30日）演習問題・課題 | 第1章：準備と超基礎 – JSX基礎

この課題のねらい

この演習は、React の「見た目を書く言語」である JSX に慣れるためのものです。
難しいことは一切いりません。

JSXでただ文字を出す
JSXの中でちょっとした計算をする
JSXの中で変数を使う

この3つができれば、もう「React の画面部分を書く基礎」はクリアです。

必須課題① JSXで文字列を表示する

JSXは「HTMLっぽく書けるJavaScript」

Next.js のページコンポーネントは、こんな形をしていました。

export default function Page() {
  return (
    <main>
      <h1>こんにちは</h1>
      <p>これはJSXで書いたテキストです。</p>
    </main>
  );
}

export default function Page() {
  return (
    <main>
      <h1>こんにちは</h1>
      <p>これはJSXで書いたテキストです。</p>
    </main>
  );
}

return ( ... ) の中に書いているのが JSX です。
見た目は HTML に近いですが、あくまで「JavaScript の中で使う特別な記法」です。

必須課題の「JSXで文字列を表示する」は、
この h1 や p の中に、自分の好きなメッセージを書くことで達成できます。

例として、app/page.tsx をこんな感じにしてみてください。

export default function Page() {
  return (
    <main>
      <h1>Next.js × React 入門中です</h1>
      <p>これは JSX で書いたテキストです。</p>
    </main>
  );
}

export default function Page() {
  return (
    <main>
      <h1>Next.js × React 入門中です</h1>
      <p>これは JSX で書いたテキストです。</p>
    </main>
  );
}

ブラウザで http://localhost:3000 を開いて、
この文字がそのまま表示されていれば OK です。

必須課題② JSX内で計算結果を表示する

中かっこ {} の意味が超重要

JSX の中で「JavaScriptの式」を使いたいときは、中かっこ {} を使います。
これは超重要なので、ここでしっかり押さえましょう。

例えば、次のように書くとします。

const a = 2;
const b = 3;

return (
  <p>{a + b}</p>
);

const a = 2;
const b = 3;

return (
  <p>{a + b}</p>
);

この場合、画面には 5 と表示されます。
ポイントは、

{a + b} の中は「JavaScriptの世界」
その結果（ここでは5）が文字として表示される

ということです。

文字列を直書きするときは "..." を使い、
計算や変数を使いたいときは {...} で囲む、という区別です。

実際に計算結果を表示してみる

例として、app/page.tsx に簡単な計算を入れてみましょう。

export default function Page() {
  const price = 1200;
  const count = 3;

  return (
    <main>
      <h1>JSXで計算してみる</h1>
      <p>単価: {price} 円</p>
      <p>個数: {count} 個</p>
      <p>合計: {price * count} 円</p>
    </main>
  );
}

export default function Page() {
  const price = 1200;
  const count = 3;

  return (
    <main>
      <h1>JSXで計算してみる</h1>
      <p>単価: {price} 円</p>
      <p>個数: {count} 個</p>
      <p>合計: {price * count} 円</p>
    </main>
  );
}

ここでは、{price} や {price * count} の部分が「JavaScript」です。
price * count が評価されて、その結果だけが表示されます。

このように、

「HTMLっぽい見た目」＋「中かっこで埋め込む JavaScript」

という組み合わせが JSX の基本イメージです。

挑戦課題：変数を使ってメッセージを表示する

変数と文字列を組み合わせる

次は、変数を使ってメッセージを表示してみましょう。
例えば、「名前」と「学習中の技術」を変数で持って、それを画面に出します。

export default function Page() {
  const name = "太郎";
  const tech = "Next.js × React";

  return (
    <main>
      <h1>プロフィール</h1>
      <p>名前: {name}</p>
      <p>今勉強しているのは {tech} です。</p>
    </main>
  );
}

export default function Page() {
  const name = "太郎";
  const tech = "Next.js × React";

  return (
    <main>
      <h1>プロフィール</h1>
      <p>名前: {name}</p>
      <p>今勉強しているのは {tech} です。</p>
    </main>
  );
}

ここでやっていることはシンプルです。

上で const name = "太郎"; と変数を宣言する
下の JSX の中で {name} と書いて、その中身を表示する
文章の途中なら、 "今勉強しているのは " + tech + " です" でもいいし、 {tech} を埋め込んでもよい

JSX の中では、

<p>名前: {name}</p>

のように、「固定の文字」と「変数」を混ぜて書ける、という感覚を掴むのがポイントです。

もう一歩：式でメッセージを作る

変数と計算を組み合わせることもできます。

export default function Page() {
  const name = "太郎";
  const finishedLessons = 5;

  return (
    <main>
      <h1>学習状況</h1>
      <p>{name}さんは、すでに {finishedLessons} 個のレッスンを完了しています。</p>
      <p>あと {10 - finishedLessons} 個のレッスンで、全10個を制覇です。</p>
    </main>
  );
}

export default function Page() {
  const name = "太郎";
  const finishedLessons = 5;

  return (
    <main>
      <h1>学習状況</h1>
      <p>{name}さんは、すでに {finishedLessons} 個のレッスンを完了しています。</p>
      <p>あと {10 - finishedLessons} 個のレッスンで、全10個を制覇です。</p>
    </main>
  );
}

ここでは、

{10 - finishedLessons}

の部分で計算をし、その結果をそのまま文章の一部として表示しています。

まとめ：この課題で身につけてほしい感覚

この演習で本当に身につけたいのは、次の2つです。

JSXの中で、中かっこ {} を使えば JavaScript の「式」を書けること
変数や計算結果を、HTML っぽい見た目の中に自然に混ぜられること

これが分かると、

TODO の件数を表示する
ユーザー名を画面に出す
API から取ってきたデータを一覧表示する

といった「React らしい画面」が、一気に書きやすくなります。