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

生徒

「Reactでコードに説明を書くにはどうしたらいいですか？」

先生

「それはコメントを書くことで実現できます。Reactでは少しだけ独特な書き方があるんですよ。」

生徒

「JavaScriptのコメントと同じじゃないんですか？」

先生

「JavaScriptのコメントも使えますが、JSXという特別な書き方の中では注意が必要なんです。では実際に見てみましょう。」

1. JSXでコメントを書くときの基本

Reactでは、HTMLのような見た目で書けるJSX（じぇいえすえっくす）という記法を使います。JSXの中でコメントを書くときは、JavaScriptのコメントと少し違った書き方になります。

通常のJavaScriptでは、// コメント や /* コメント */ と書きますよね。

しかし、JSXの中では、HTMLに似ているため、そのままではコメントが書けません。JSX内では{/* コメント内容 */}のように書きます。

2. JSX外とJSX内でのコメントの違い

JSXの外、つまり関数の宣言や変数の定義など通常のJavaScriptコードの部分では、ふつうのコメント記法を使えます。


import React from "react";

// これは通常のJavaScriptコメント

function App() {
  return (
    <div>
      {/* JSXの中ではこのようにコメントを書く */}
      <p>こんにちは！</p>
    </div>
  );
}

export default App;

（画面には「こんにちは！」だけが表示され、コメントは表示されません）

上のコードでは、{/* ～ */}の部分がJSXの中にあるコメントです。画面には表示されず、プログラムの説明として残せます。

3. なぜJSXでは{}を使うの？

JSXはJavaScriptとHTMLを組み合わせたような書き方です。そのため、JavaScriptの処理を中に書きたいときは{}（中括弧）で囲む必要があります。

コメントもJavaScriptの一部とみなされるため、JSXの中に入れるときは{}で囲い、その中に/* コメント */と書くことで、正しく認識されます。

4. 閉じタグと閉じタグの間で使うコメント

次のように、divやulなど、複数のタグの間にコメントを入れるときも同じように書きます。


function App() {
  return (
    <div>
      <h1>メニュー</h1>
      <ul>
        {/* リストの項目をここに追加 */}
        <li>カレー</li>
        <li>ラーメン</li>
        <li>ハンバーグ</li>
      </ul>
    </div>
  );
}

（画面には「メニュー」と「カレー」「ラーメン」「ハンバーグ」が表示され、コメントは画面に出ません）

このように、リストの途中などにも説明文を入れておくと、あとで見たときに何の処理をしているのかがわかりやすくなります。

5. コメントの使いすぎには注意！

コメントはとても便利ですが、多すぎると逆に見づらくなることがあります。あくまで「わかりにくい部分」や「将来のために残しておきたい情報」にだけ使うのがポイントです。

また、コメントを消し忘れて公開してしまうこともあるので、不要になったら削除する習慣をつけましょう。

6. JSXコメントのNGパターン

間違ったコメントの書き方をすると、Reactの画面にエラーが出てしまいます。次のような例は間違いです。


function App() {
  return (
    <div>
      // これはJSX内では使えません
      <p>こんにちは</p>
    </div>
  );
}

JSXの中で//を使うと、エラーになってしまうので注意が必要です。

7. コメントでコードの一部を一時的に無効にする

React開発では、一部のコードを一時的に使わないようにする（コメントアウト）ときにもコメントが役立ちます。


function App() {
  return (
    <div>
      {/* <p>この行は一時的に非表示</p> */}
      <p>表示される行</p>
    </div>
  );
}

（画面には「表示される行」だけが表示され、「この行は一時的に非表示」は見えません）

このようにして、確認や調整のときに使うことができます。

まとめ

Reactでのコメントの書き方について振り返ると、JSX内では{/* コメント内容 */}という独自の書き方が必要であり、JavaScriptの通常の// コメントや/* コメント */とは区別して使うことが重要です。JSXの中にJavaScriptの式や値を埋め込むための{}を使う仕組みと同じ理由で、コメントも{/* */}で囲む必要があります。このルールを守ることで、画面に不要な文字を表示せず、コードの可読性を保ちながら説明やメモを残すことができます。

また、JSXの外、つまり関数の宣言や変数定義などJavaScriptの通常コード部分では、普段通り//や/* */を使うことができ、JSX内のコメントと使い分けることで、React開発におけるコードの整理が容易になります。特に、複数のタグの間やリストの中にコメントを入れることで、後からコードを見たときに目的や処理内容をすぐ理解できる利点があります。

コメントの活用法としては、コードの説明、将来の変更点のメモ、一時的にコードを無効化するコメントアウトなどがあります。ただし、コメントの書きすぎは逆に見づらくなるため、必要な箇所に限定して使用することが推奨されます。また、公開時に不要なコメントが残らないよう注意することも重要です。

サンプルプログラムまとめ


import React from "react";

function Menu() {
  return (
    <div>
      <h1>今日のメニュー</h1>
      <ul>
        {/* ここにリスト項目を追加します */}
        <li>カレー</li>
        <li>ラーメン</li>
        <li>ハンバーグ</li>
      </ul>
      {/* この下に追加のメッセージを書くことも可能 */}
    </div>
  );
}

export default Menu;

（画面には「今日のメニュー」と「カレー」「ラーメン」「ハンバーグ」が表示され、コメントは表示されません）

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

生徒

「JSX内では{/* */}でコメントを書くんですね。普通の//ではエラーになるのが驚きでした。」

先生

「そうです。JSXはHTMLのような構文をJavaScriptの中に書いているので、コメントも少し特殊な書き方が必要です。」

生徒

「リストの途中にコメントを入れると、あとで見たときに処理内容がわかりやすくなりますね。」

先生

「その通りです。また、コメントを使って一時的にコードを無効にすることもできるので、開発中のテストや調整にも便利です。」

生徒

「コメントは便利だけど、多すぎると逆に見づらくなるので、必要なところだけに使うようにします。」