【React】JSXでコメントアウトする方法について詳しく解説！

この記事ではReact JSXでコメントアウトする方法について、サンプルコードを用いて分かりやすく説明するように心掛けています。

ご参考になれば幸いです。

【React】JSXでコメントアウトする方法

JSX式の外ではJavaScript標準のコメントである/* ... */または// ...が使用可能です。

一方、JSX式の中では{/* ... */}または{// ...}という構文でコメントアウトすることができます。

JSX式の中でのコメントアウト

{/* ... */}
- 改行することで複数行コメントが可能です。
{// ...}
- {...}の閉じタグ(})の前に改行が必要なので注意してください。改行しないと閉じタグ(})がコメントアウトされてエラーになります。
- // ...を複数記述することで複数行コメントが可能です。

また、タグ(<...>)の中ではJavaScript標準のコメントである/* ... */または// ...が使用可能です。

タグの中でのコメントアウト

/* ... */
- 改行することで複数行コメントが可能です。
// ...
- タグ(<...>)の閉じタグ(>)の前に改行が必要なので注意してください。改行しないと閉じタグ(>)がコメントアウトされてエラーになります。
- // ...を複数記述することで複数行コメントが可能です。

では実際にサンプルコードでコメントアウトをどのようにしているか確認してみましょう。

function App() {
  /* 1.コメントです(JSX式の外) */

  // 1.コメントです(JSX式の外)

  /* 2.コメントです(JSX式の外)
       改行することで複数行コメントが可能 */

  // 2.コメントです(JSX式の外)
  //  「//」を複数記述することで複数行コメントが可能です

  return (
    /* 1.コメントです(JSX式の外) */

    // 1.コメントです(JSX式の外)

    /* 2.コメントです(JSX式の外)
        改行することで複数行コメントが可能です */

    // 2.コメントです(JSX式の外)
    //  「//」を複数記述することで複数行コメントが可能です

    <div>
      {/* 3.コメントです(JSX式の中) */}

      {
        // 3.コメントです(JSX式の中) ← {}の閉じタグの前に改行が必要なので注意!!
      }

      {/* 4.コメントです(JSX式の中)
            改行することで複数行コメントが可能です */}

      {
        // 4.コメントです(JSX式の中)
        //  「//」を複数記述することで複数行コメントが可能です
      }

      <p
      /* 5.コメントです(タグの中) */
      >
        Hello
      </p>

      <p
      // 5.コメントです(タグの中) ← <>の閉じタグの前に改行が必要なので注意!!
      >
        Hello
      </p>

      <p
      /* 6.コメントです(タグの中)
            改行することで複数行コメントが可能です */
      >
        Hello
      </p>

      <p
      // 6.コメントです(タグの中)
      //  「//」を複数記述することで複数行コメントが可能です
      >
        Hello
      </p>
    </div>
  );
}

export default App;

1の箇所
- JSX式の外なので/* ... */または// ...でコメントアウト可能です。
2の箇所
- JSX式の外で複数行コメントをしています。
3の箇所
- JSX式の中なので{/* ... */}または{// ...}でコメントアウト可能です。
4の箇所
- JSX式の中で複数行コメントをしています。
5の箇所
- タグの中なので/* ... */または// ...でコメントアウト可能です。
6の箇所
- タグの中で複数行コメントをしています。

本記事のまとめ

この記事では以下の内容を説明しました。

React JSXでコメントアウトする方法

お読み頂きありがとうございました。