JS コメント (複数行コメント + 単一行コメント)

JS コメント (複数行コメント + 単一行コメント)

 
 
コメントは開発者向けであり、プログラムは実行時にコメントの内容を自動的に無視するため、通常はコメントを使用してコードに説明や説明を追加し、コードの可読性を向上させます。 JavaScriptのコメントは、C/ C++Java 、およびPHPなどの言語のコメントと同じ方法で定義され、単一行コメントと複数行コメントの両方をサポートします。

 

1. 一行コメント

単一行のコメントは、ダブル スラッシュ//で始まり、 //以降はすべてコメントの内容と見なされ、 //より前の内容は影響を受けません。サンプル コードは次のとおりです。

 <!DOCTYPE html>
<html>
<head>
    <title>JavaScript</title>
</head>
<body>
    <div id="サンプル"></div>
    <script>
        // id属性がサンプルのタグに特定の内容を追加する
        document.getElementById("サンプル").innerHTML = "https://it-kiso.com/js/";
    </script>
</body>
</html> 

注: 単一行のコメント // は、それが含まれる行に対してのみ有効です。

さらに、次の例に示すように、単一行のコメントは 1 行を占めるだけでなく、コードの最後にも使用できます。

 var x = 5;      // 変数xを宣言し、5を割り当てます
var y = x + 2;  // 変数yを宣言し、変数x+2を割り当てます
(必要に応じて定数名を変更してください) 

2. 複数行コメント

/*で始まり*/で終わる複数行のコメント. /**/の間のすべてがコメントの内容と見なされます. サンプルコードは次のとおりです.

 <!DOCTYPE html>
<html>
<head>
    <title>JavaScript</title>
</head>
<body>
    <div id="demo"></div>
    <script>
        /*
        id 属性が demo の要素に
        指定した内容を追加する
        */
        const URL = "https://it-kiso.com/js/";
        document.getElementById("demo").innerHTML = URL;
    </script>
</body>
</html> 

3. コメントを使用してプログラムの実行を防止する

コメントを使用してコードに説明や説明を追加するだけでなく、コードをデバッグするときに、実行する必要のないコードに注釈を付けて、プログラムの実行時にブラウザーがコメント内のコードを無視するようにすることもできます。次の例に示すように:

 <!DOCTYPE html>
<html>
<head>
    <title>JavaScript</title>
</head>
<body>
    <div id="demo"></div>
    <script>
        document.getElementById("demo").innerHTML = "JavaScriptのチュートリアル";
        // document.getElementById("demo").innerHTML = "JavaScript";
        /*
            document.getElementById("demo").innerHTML = "コメント";
            document.getElementById("demo").innerHTML = "JavaScriptコメント";
         */
    </script>
</body>
</html> 
4. HTML コメント

JavaScript は、HTML コメントの開始文字<!--も認識し、それらを単一行コメントとして扱います。これは//と同じ効果があります。 HTML コメントのターミネータ-->については、JavaScript が認識できないため、HTML コメントを使用して JavaScript コードに注釈を付けたい場合は、JavaScript の単一行コメントを使用して、HTML コメントのターミネータ-->をコメントアウトする必要があります。例//--> .サンプルコードは次のとおりです。

// document.getElementById("demo").innerHTML = "IT基礎"; 

上記のコードでは、2 つの注釈の効果は同じです。

 

「 JS コメント (複数行コメント + 単一行コメント)」についてわかりやすく解説!絶対に観るべきベスト2動画

NextJS 13 Tutorial: Create a Static Blog from Markdown Files
JavaScriptのメソッド・イベント【全5回でJavaScriptの基礎を徹底】