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

生徒

「ReactのJSXって書き方にルールとかコツってありますか？」

先生

「実は、JSXには読みやすく保守しやすくするためのベストプラクティスがあります。」

生徒

「えっ、ただ書けば動くものだと思ってました！」

先生

「動くコードと読みやすいコードは違いますからね。具体例を交えて説明します！」

1. JSXとは？見た目はHTMLだけどJavaScriptの一部

Reactでは、見た目を定義するためにJSX（ジェイエスエックス）という特別な構文を使います。JSXは見た目はHTMLに似ていますが、実際はJavaScriptの一部として処理されます。

たとえば、次のようにJSXを書いた場合、内部ではJavaScriptで変換されてReactが処理します。


return (
  <div>
    <h1>こんにちは</h1>
    <p>Reactを始めましょう！</p>
  </div>
);

2. ベストプラクティス1：1行が長くなりすぎないように改行する

長い行は一見して内容が分かりにくくなるため、JSXではタグの区切りや属性の位置で改行するのが一般的です。改行しても意味は変わらず、可読性が大きく上がります。


<button
  onClick={() => handleClick()}
  className="btn btn-primary"
>
  クリック
</button>

3. ベストプラクティス2：意味のあるコンポーネント名を使う

Reactではコンポーネントをたくさん作りますが、名前が「Box1」や「ComponentA」では役割が分かりません。何をするかが分かるように名付けましょう。


// NGな例
function ComponentA() {
  return <div>ボタン</div>;
}

// OKな例
function SubmitButton() {
  return <button>送信</button>;
}

4. ベストプラクティス3：1コンポーネントに1つの責務

コンポーネントが大きくなりすぎると、修正や再利用が難しくなります。1つのコンポーネントは1つの機能に絞ることで、保守しやすくなります。

たとえば、入力フォーム・表示領域・ボタンなどをそれぞれ別のコンポーネントに分けると管理がしやすくなります。

5. ベストプラクティス4：三項演算子や条件分岐は見やすく整理

条件によって表示を変える場合、複雑なロジックを直接書くと読みにくくなります。できれば別関数にしたり、三項演算子（条件 ? 真 : 偽）を使って整理しましょう。


<div>
  {isLoggedIn ? (
    <p>ログイン中です</p>
  ) : (
    <p>ログインしてください</p>
  )}
</div>

6. ベストプラクティス5：タグを閉じ忘れない！セルフクローズも活用

JSXではすべてのタグを必ず閉じる必要があります。<br>や<img>なども<br />のようにスラッシュ付きで書きます。


<img src="sample.jpg" alt="サンプル画像" />

7. ベストプラクティス6：classではなくclassNameを使おう

JSXではHTMLと少し書き方が違う部分があります。CSSクラスを指定する場合、classではなくclassNameと書く必要があります。これはJavaScriptの予約語との衝突を防ぐためです。


<div className="container">内容</div>

8. ベストプラクティス7：JSXはカッコで囲って整形しよう

JSXの中身が複数行にわたる場合は、かっこ()で囲むとエラーを防げて読みやすくなります。とくにreturnのあとには改行しないように注意です。


return (
  <div>
    <h1>JSXの基本</h1>
  </div>
);

9. ベストプラクティス8：複数の要素を返すときは親タグで囲む

JSXでは1つのreturnで複数のタグを返す場合、すべてを<div>や<>（フラグメント）で囲う必要があります。


// OK: divで囲う
return (
  <div>
    <h1>見出し</h1>
    <p>本文</p>
  </div>
);

// OK: フラグメントで囲う
return (
  <>
    <h1>見出し</h1>
    <p>本文</p>
  </>
);

10. JSXを丁寧に書くと読みやすさが全然違う

JSXをただ動かすだけでなく、読みやすく、わかりやすく、メンテナンスしやすく書くことが大切です。

チーム開発や後から自分で見直すときにも、丁寧な書き方が役立ちます。最初のうちは少し意識するだけで十分なので、徐々に慣れていきましょう！

まとめ

JSXのベストプラクティスを理解することの大切さ

ここまで、Reactで使われるJSXについて、「ただ動けばいい書き方」ではなく、 読みやすく、保守しやすいコードを書くための考え方を学んできました。 JSXはHTMLに似ているため、初心者の方でも比較的とっつきやすい構文ですが、書き方に気を配らないと、コードがすぐに読みにくくなってしまいます。特にReactではコンポーネントが増えやすく、JSXの量も多くなりがちです。そのため、最初の段階からベストプラクティスを意識して書くことが、後々の理解や修正をとても楽にしてくれます。

JSXはJavaScriptの一部として扱われるため、見た目はHTMLでも、実際にはJavaScriptのルールや制約を受けています。 classではなくclassNameを使う点や、すべてのタグを必ず閉じる必要がある点などは、 HTMLとの違いとして初心者がつまずきやすいポイントです。これらを正しく理解しておくことで、エラーの原因にも気づきやすくなります。

読みやすさがReact開発を支える理由

JSXのベストプラクティスの多くは、「人が読みやすいかどうか」を基準にしています。たとえば、1行が長くなりすぎないように改行することや、意味のあるコンポーネント名を付けること、 1つのコンポーネントに1つの役割を持たせることなどは、すべてコードの可読性を高めるための工夫です。 Reactのコードは、将来の自分や他の開発者が読む可能性が高いため、「誰が見ても理解しやすいJSX」を意識することが重要になります。

条件分岐や三項演算子を使う場面でも、無理に1行で書かず、改行やインデントを整えることで、 JSXの構造がひと目で分かるようになります。 JSXはUIの構造を表すものなので、見た目とコードの構造が一致しているほど、 Reactアプリ全体の理解もしやすくなります。

ベストプラクティスを意識したJSXの例


function UserMessage({ isLoggedIn }) {
  return (
    <div className="message-box">
      {isLoggedIn ? (
        <p>ログイン中です</p>
      ) : (
        <p>ログインしてください</p>
      )}
    </div>
  );
}

（ログイン状態に応じて、表示されるメッセージが切り替わります）

この例では、条件分岐をJSXの中で分かりやすく整理し、コンポーネントの役割も「ユーザーへのメッセージ表示」に限定しています。 JSXを丁寧に整形することで、初めて見る人でも処理の流れが理解しやすくなります。こうした小さな積み重ねが、React開発全体の品質を高めてくれます。

JSXの書き方は成長とともに洗練される

最初のうちは、「とりあえず表示できたらOK」と考えてしまいがちですが、 JSXの書き方を少し意識するだけで、コードの印象は大きく変わります。ベストプラクティスは一度に完璧に身につける必要はありません。改行の仕方、命名の工夫、コンポーネント分割など、できるところから少しずつ取り入れていくことが大切です。

JSXをきれいに書けるようになると、 Reactのコンポーネント設計や状態管理の理解も深まっていきます。読みやすいJSXは、バグの発見もしやすく、機能追加や修正のときにも安心して手を入れられます。その結果、React開発がより楽しく、スムーズに進められるようになります。

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

生徒

「JSXって、ただ書けばいいものだと思っていましたけど、読みやすさを意識するだけで全然違うんですね。」

先生

「そうですね。JSXは見た目がそのままUIになるので、きれいに書くほどReact全体が分かりやすくなります。」

生徒

「改行やコンポーネント分割も、意味がちゃんとあると分かりました。」

先生

「その意識が大切です。最初から完璧でなくていいので、少しずつベストプラクティスを取り入れていきましょう。」