コメントの書き方 – JSX内にコメントを書く方法

ReactでのUI記述に使われるJSXでは、通常のJavaScriptとは異なるルールでコメントを書く必要があります。本ドキュメントでは、TypeScript（TSX）形式におけるJSX内の正しいコメント記法を紹介します。

1. JSX外でのコメント（通常のJavaScriptコメント）

JSX外、つまり関数定義や処理ロジック部分では、通常のJavaScript/TypeScriptのコメント記法を使用します。

// これは1行コメントです

/*
  これは複数行のコメントです
*/
const title = "Welcome";

2. JSX内でのコメント

JSXタグの中でコメントを書く場合は、中括弧 {} 内に / コメント / の形式で記述する必要があります。

const Example = () => {
        return (

<div>
                {/* タイトル表示 */}

<h1>Hello World</h1>

                {/* 以下は説明文 */}

<p>This is a paragraph.</p>
            </div>
        );
};

間違った書き方

const Example = () => {
  return (

<div>
      // タイトル表示 ← JSX内ではエラーになります

<h1>Hello</h1>
    </div>
  );
};