JavaScriptのコメントアウトのやり方を解説

2024年11月6日2024年11月8日

JavaScriptでコードを書いていると、

時々「この部分を一時的に無効にしたい」「あとで見返すためにメモを残したい」ということがありますよね。

そんなときに便利なのが「コメントアウト」です。

コメントアウトの方法をしっかり理解すれば、コードの見通しが良くなり、誤って動作させてしまうミスも防げます。

この記事では、JavaScriptにおけるコメントアウトを基本から丁寧に解説します。

JavaScript初心者の方でもわかりやすいように、

優しい言葉遣いで解説しますので、ぜひ参考にしてみてくださいね！

おねしゃす

コメントアウトとは？

まず「コメントアウト」とは何かを簡単に説明します。

コメントアウトとは、コードの一部をJavaScriptエンジンに無視させるためのテクニックです。

通常、プログラム内に書かれたコードはそのまま実行されますが、コメントアウトされた部分は実行されません。

コメントアウトは「コードのメモを残したい」「一部のコードを一時的に無効にしたい」といったときに

非常に便利です。

JavaScriptのコメントアウトの種類

JavaScriptには主に2種類のコメントアウト方法があります。

1行コメントアウト
複数行コメントアウト

では、それぞれの使い方を見ていきましょう。

1行コメントアウト

1行コメントアウトは、その行だけをコメントアウトしたい場合に使います。

この方法は、簡単なメモや説明を残したいときに便利です。

// これは1行コメントアウトです
console.log("この行は実行されます");

JavaScript

上記の例では、//で始まる行がコメントアウトされています。

console.logの行は実行されますが、その上のコメント部分は無視されます。

使い方のポイント

一言メモに便利：1行コメントアウトは短い説明やメモに最適です。
コードのデバッグにも活用：特定の行だけ無効化したい場合にも役立ちます。

複数行コメントアウト

複数行コメントアウトは、長めのメモを残したい場合や、

一時的に複数行のコードを無効化したいときに使います。

/*
  ここから複数行コメントアウトです。
  console.log("この行は実行されません");
  console.log("この行も実行されません");
*/
console.log("この行だけが実行されます");

JavaScript

上記の例では、/*で始まり、*/で終わる部分がコメントアウトされます。

この部分は複数行にまたがっていても問題ありません。

使い方のポイント

複数行のメモや説明文に便利：コメントが長くなる場合に最適です。
コードの一部をまとめて無効化：特定のブロック全体を無効にするのに役立ちます。

コメントアウトの注意点

コメントアウトは便利ですが、コード内に多すぎると読みづらくなることもあります。

適切な量で、読み手にとって必要な情報だけを残すように心がけましょう。

コメントアウトを利用した応用テクニック

コメントアウトを理解すると、以下のような応用テクニックも活用できます。

デバッグ時に一部をコメントアウトする

コードがうまく動かないときに、

どこに問題があるかを調べるために一時的にコメントアウトする方法もあります。

// デバッグ時にコメントアウトして動作を確認
let a = 10;
let b = 20;
// console.log(a + b);  // この行をコメントアウト
console.log(a * b);

JavaScript

上記の例では、a + bの計算部分をコメントアウトすることで、a * bの結果だけを確認できます。

HTMLでのコメントアウトはJavaScriptでは利用できない

HTMLではを使ってコメントアウトすることができますが、

この形式はJavaScriptでは使えません。

JavaScriptのコメントアウトは、必ず//や/* */を使うようにしましょう。

<!-- これはHTMLのコメント -->
<script>
  // JavaScriptでは使えません！
  console.log("これはJavaScriptのコメントの例です");
</script>

HTML

JSXでのコメントアウト方法

JSXでは、JavaScriptのコードとHTMLライクな構造が混在しているため、

コメントアウトの方法も少し独特です。

JSX内でのコメントアウト

JSX内では{/* ... */}を使ってコメントアウトします。

これは、JSXがJavaScriptの構文とHTMLの要素を組み合わせたものであるため、

JavaScript式の形式でコメントを挿入できるからです。

import React from 'react';

function App() {
  return (
    <div>
      {/* これはJSX内のコメントアウトです */}
      <h1>Hello, World!</h1>
      {/* <p>この行はコメントアウトされています</p> */}
    </div>
  );
}

export default App;

JSX

この{/* ... */}の形式でコメントを書くと、JSX内の要素やタグ、文字列などを一時的に無効にできます。

JSX外でのコメントアウト

Reactコンポーネントの中でもJSXの外であれば、通常のJavaScriptのコメントアウト方法が使用できます。

たとえば、//や/* ... */を使ってコンポーネントのロジック部分をコメントアウトすることができます。

import React, { useState } from 'react';

function App() {
  // React Hookで状態を定義
  const [count, setCount] = useState(0);

  return (
    <div>
      {/* JSX内でのコメントアウト */}
      <h1>カウント: {count}</h1>
      <button onClick={() => setCount(count + 1)}>増加</button>
    </div>
  );
}

export default App;

JSX

上記の例のように、

const [count, setCount] = useState(0);の部分には通常の//を使ったコメントアウトができます。

条件付きでコンポーネントを無効化する

複数行を一気にコメントアウトする場合や、

条件に基づいて特定の要素をレンダリングしたくない場合は、

以下のような条件分岐を利用する方法もあります。

import React, { useState } from 'react';

function App() {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <div>
      {isVisible && (
        <div>
          <h1>この部分は表示されます</h1>
          {/* <p>この行はコメントアウトされています</p> */}
        </div>
      )}
      <button onClick={() => setIsVisible(!isVisible)}>表示/非表示</button>
    </div>
  );
}

export default App;

JSX

この方法では、isVisibleの値をfalseにすると、該当の要素全体が一時的に非表示になります。

これは、コメントアウトではなく条件付きレンダリングの応用ですが、

Reactでコードブロックを動的に無効化する場合に便利です。

TSXでのコメントアウト

TSXでも、基本的なコメントアウトの方法はJSXと同じです。

TypeScriptの型アノテーションが入るために若干見た目が異なることがありますが、

コメントアウトに関しては同様の書き方が使えます。

たとえば、TSX内でのコメントアウトも{/* ... */}を使います。

import React, { useState } from 'react';

type Props = {
  title: string;
};

const App: React.FC<Props> = ({ title }) => {
  const [count, setCount] = useState<number>(0);

  return (
    <div>
      {/* コメントアウトの方法はJSXと同じです */}
      <h1>{title}</h1>
      <p>カウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>増加</button>
    </div>
  );
};

export default App;