JSXでコメントが書けない？いや、それは「書き場所」を知らないだけだ

フロントエンドの現場で、ふと「このボタンのprops、なんでこうなってんだっけ？」と後輩のコードを見て思うことはないだろうか。で、そこにコメントを残そうとして `// TODO: ここ修正` と書き込んだ途端、画面が真っ白になったり、あるいは意図せぬテキストがUIに鎮座してしまった経験、君にも一度はあるはずだ。

Reactを触り始めたばかりのエンジニアが最初につまずく、この「JSXのコメント問題」。実はこれ、単なる文法の話ではなく、ReactがDOMをどう構築しているかという「裏側の仕組み」を理解する絶好のチャンスなんだ。

今日は、中級エンジニアとしてもう一歩先に行くための、JSXにおける正しいコメント作法について深掘りしていこう。

—

なぜJSXで「いつもの書き方」が通用しないのか

まず結論から言おう。JSXは「JavaScript」であって「JavaScriptではない」。これがすべての混乱の元だ。

// ❌ やってはいけない例：JSXタグの直下に書く

このコードをブラウザで開くと、画面上に `// ここにコメントを書くと…` という悲しいテキストが表示されるはずだ。なぜか？
JSXはトランスパイラ（BabelやSWC）によって `React.createElement()` に変換される。このとき、JSX内のタグの間に書かれたコメントは、HTMLのノードとして解釈されてしまうからだ。

正しい作法：波括弧 `{ }` という名の「聖域」

JSXの波括弧 `{ }` は、JavaScriptの式を評価するためのエスケープハッチだ。ここでJSの世界に帰還することで、初めてコメントという「JSの機能」が有効になる。

現場で推奨される、最もクリーンなコメントの書き方はこれだ。

const UserProfile = ({ name, role }) => {
return (

);
};

なぜこの書き方が「最強」なのか

この書き方は、Reactの内部処理と非常に相性がいい。

1. ブラウザへの干渉ゼロ: `{ / … / }` で囲むと、その中身はJavaScriptの単なるコメントとして処理され、最終的なDOMツリーには一切影響を与えない。Reactのレンダリングパイプラインから完全に無視される、いわば「透明な記述」になるんだ。
2. IDEのサポート: VSCodeなどのエディタは、波括弧の中にある `/ /` を正しく「JSのコメント」として認識する。これによって、シンタックスハイライトが効き、保守性が格段に向上する。
3. 可読性: 複数行コメントが使えるため、複雑なロジックに対する「なぜこの実装にしたか」というコンテキストを、コードのすぐ側に残せる。

—

実務で差がつく「賢いコメント」の運用ルール

せっかくなので、現場で信頼されるエンジニアになるための「コメントの運用ルール」も伝授しておく。

• 「何をしているか」は書くな: `// ボタンを表示する` と書くのは無駄だ。コードを見ればわかる。書くべきは「なぜそのロジックが必要なのか（意図）」だ。
• マジックナンバーの排除: もしJSX内で直接数値を扱っているなら、コメントで説明する前に定数化を検討しよう。
• `{/ 60秒 5 = 5分 /} setTimeout(…)` と書くより、`const REFRESH_INTERVAL = 300000;` と定義する方が100倍美しい。
• 複雑な条件分岐には必須: `&&` 演算子を使った条件分岐は、慣れると読み飛ばされやすい。条件が複雑な場合は、必ずコメントで「どんな時に表示されるのか」を一言添えるのが、チーム開発における「優しさ」だ。

まとめ

JSXのコメントは、単なるメモ書きじゃない。それは、君がコードを書いた瞬間の「思考の痕跡」をチームに共有するための重要なドキュメントだ。

「とりあえず動けばいい」から一歩踏み出して、波括弧の中に丁寧に意図を刻む。その小さな積み重ねが、半年後の君自身や、君のコードを引き継ぐ誰かを救うことになる。

さあ、今日書くコンポーネントから、この作法を徹底してみてくれ。コードの品格が変わるはずだ。