JSXの「見た目はHTML、中身はJavaScript」。その境界線で迷わないためのプロの流儀
やあ。現場でコードを書いていて、ふと「あれ？ここってHTMLだっけ、Reactだっけ？」と手が止まることはないか？
Reactを触り始めた頃は「HTMLを書いてるつもりなのに何かが違う」という違和感に苦しむものだ。だが、中級者として一歩先へ行くなら、「JSXはHTMLを模したただのJavaScriptの糖衣構文（シンタックスシュガー）である」という事実を、骨の髄まで理解しておく必要がある。
今日は、JSXにおける属性とPropsの受け渡しという、一見地味だが疎かにするとバグの温床になるポイントを、現場の視点から深掘りしていこう。
—
1. なぜ `class` ではなく `className` なのか？
これはReact界隈で最も古典的かつ頻出する疑問だ。結論から言えば、「classはJavaScriptの予約語だから」だ。
JSXは最終的に `React.createElement` という関数呼び出しに変換される。もし属性名にJavaScriptの構文である `class` をそのまま使おうとすれば、パーサーが混乱するのは明白だろう。同様に、`
ブラウザのDOM要素としてレンダリングされる際、Reactは賢くこれらを正しいHTML属性（`class`や`for`）へと変換してくれる。我々はただ、Reactというフレームワークが定めた「ルール」に従うだけでいい。
2. 文字列とJavaScript式の使い分け
JSXにおいて、「属性に何を渡すか」は極めて重要な判断だ。
- 静的な文字列: 二重引用符 `””` で囲む。
- 動的な値や式: 波括弧 `{}` で囲む。
ここでの鉄則は、「不必要な波括弧を使わない」ことだ。
// 悪い例: 文字列なのにわざわざ波括弧で囲んでいる
// 良い例: 静的な値はそのまま記述する
逆に、変数や計算結果を渡すときは、迷わず `{}` を使う。ここで重要なのは、`{}` の中は完全にJavaScriptの領域であるということだ。三項演算子や論理演算子を駆使して、コンポーネントの挙動を柔軟に制御できる。
—
3. 実践：属性の受け渡しとPropsのスマートな展開
現場でよく見る「Propsのバケツリレー」を少しでも綺麗に書くためのテクニックを伝授しよう。特に `…props` (スプレッド構文) は強力だが、諸刃の剣でもある。
/
- スプレッド構文を使ったPropsの受け渡し例
- 必要なものだけ分割代入(destructuring)し、残りをDOMへ流し込むパターン
/
const CustomButton = ({ label, variant, …rest }) => {
// variantはコンポーネント内で処理し、残りの属性(onClick, type, idなど)は
// スプレッド構文でそのままbutton要素に渡す
const className = `btn btn–${variant}`;
return (
);
};
// 使用側
const App = () => {
return (
disabled={false} // restに含まれる
/>
);
};
ここで注意してほしいこと
`{…rest}` を多用すると、「どのPropsがそのコンポーネントに渡されているのか」がブラックボックス化する。
チーム開発では、本当に必要なPropsだけを明示的に受け取る方が、圧倒的に保守性が高い。「とりあえず全部渡す」のは、プロトタイプを作る時だけにしておこう。
—
4. まとめ：プロとして意識すべき「背後」の挙動
JSXの属性を扱う際、常に意識してほしいのは以下の3点だ。
1. キャメルケースの徹底: `aria-` や `data-` 属性を除き、基本はキャメルケースだ。これがReactの流儀である。
2. 真偽値の挙動: `{true}` を渡すと属性名だけがDOMに残り、`{false}` を渡すと属性自体が消える。これは条件付きレンダリングで非常に便利だ。
3. ブラウザとの距離感: JSXはあくまで「JavaScriptの記述を楽にするための手段」。最終的なDOMの状態を常に意識し、「今Reactは何をしているのか？」を想像する癖をつけてほしい。
Reactのコードは、書く人が違えば驚くほど表情を変える。だが、こうした基本ルールを徹底しているエンジニアのコードは、誰が見ても美しい。
さあ、エディタを開いて、君のコンポーネントを一段上のレベルへ引き上げてみないか？何か不明点があれば、またいつでも聞いてくれ。応援しているぞ。
コメント