JSXはただの「糖衣構文」。裏側で何が起きているかを知れば、コードはもっと洗練される。
やあ。Reactを使っていて「JSXを書くのは当たり前」になっていないか？
中級者へのステップアップとして一番大事なのは、「自分が書いているJSXが、最終的にどういうJSの関数に変換されているか」を脳内で透過的に見られるようになることだ。
今日は、JSXの「波括弧 `{}`」の正体と、現場でついついやってしまう「アンチパターン」を回避するための現実的な知見を共有しようと思う。
—
1. JSXは「魔法」ではなく「関数呼び出し」だ
まず、大前提を叩き込んでおいてほしい。ブラウザはJSXなんて1ミリも理解できない。ブラウザが実行するのは、あくまでピュアなJavaScriptだけだ。
Reactのビルドツール（BabelやSWC）は、あなたが書いたJSXをこんな風に変換している。
// あなたが書くJSX
const element =
Hello, World!
;
// ビルド後の姿（React.createElement）
const element = React.createElement(
“h1”,
{ className: “title” },
“Hello, World!”
);
この `React.createElement` が生成するのは、DOMそのものではなく、「UIの構成要素を記述したただのプレーンなJavaScriptオブジェクト」だ。これがReactの仮想DOMの正体である「React Element」になる。
「JSXはXMLライクな構文で、JS式を波括弧で囲む」というルールは、この関数呼び出しの引数にどうデータを渡すかというルールに他ならない。
—
2. 波括弧 `{}` の中身は「式」でなければならない
ここからが実務の話だ。JSXの中で `{ }` を使うとき、初心者がよくやる間違いが「文（Statement）」を突っ込もうとすることだ。
JSXの波括弧内には「値として評価されるJavaScriptの式（Expression）」しか書けない。`if`文や `for`ループのような「文」は書けないんだ。
実務で頻出する「綺麗に書く」ためのパターン
現場でよく見る「汚いコード」を、Reactらしい「クリーンなコード」に書き換える手法を伝授しよう。
const UserProfile = ({ user }) => {
// NG: JSXの中でif文は使えない。
// NG: { if(user) { return
} } // これはビルドエラーになる
// OK: 三項演算子を使う（最も一般的）
// OK: 論理演算子(&&)を使う（条件が単一の場合）
return (
{user &&
{user.name}
}
{/ 条件分岐による表示の切り替え /}
{user.isPremium ? (
プレミアム会員
) : (
)}
);
};
プロのTip: `&&` の落とし穴
`{count &&
安全を期すなら `{!!count &&
—
3. リストレンダリングの最適化：そのキーは「何のため」にあるのか
JSXで最もミスが起きやすいのがリスト表示だ。
const UserList = ({ users }) => {
return (
-
{users.map((user) => (
- {user.name}
// keyにはindexを安易に使わないこと。
// リストの順序が変わったり、削除・追加がある場合にバグの温床になる。
))}
);
};
なぜ `key` が必要なのか。それはReactが「どの要素が追加・削除されたかを、仮想DOMの差分比較（Reconciliation）で効率的に特定するため」だ。
`index` をキーにすると、配列の途中に要素が挿入された瞬間、Reactは「すべての子要素が変わった」と誤解して再描画コストが跳ね上がる。これ、パフォーマンスチューニングの初歩の初歩だが、意外と見落とされているぞ。
—
まとめ：結局、何が言いたいのか
1. JSXは単なる `React.createElement` の糖衣構文。 深く考えすぎず、でも裏側を意識して書くこと。
2. `{ }` の中身は式だけ。 `if` や `for` で迷ったら、JSXの外で変数に代入するか、三項演算子で解決する。
3. `key` は単なる識別子ではない。 コンポーネントのライフサイクルを制御する「指紋」だと心得よ。
フロントエンドの技術は日進月歩だが、このJSXの基本ルールはReactが続く限り変わらない不変の真理だ。
明日からのコードレビューで、誰かの書いた `if` がJSXの中に紛れ込んでいたら、ニヤリと笑って教えてやってくれ。それが、チーム全体の技術レベルを底上げする、お前というシニアエンジニアの役割だ。
また何か詰まったら聞きに来い。現場からは以上だ。
コメント