JavaScriptのコメントの書き方について解説します。JavaScriptのコメントは二通りの書き方があります。またコメントを使ったデバッグの方法についても見ていきましょう。
目次
1. JavaScriptのコメントの記述方法
1.1. 一行コメント
「JavaScript」のコメントは、ソースコードとして認識されない為、コードの説明を書く際に便利です。一行コメントとは、コメント記号を記述した行のみコメントとして扱われます。一行コメントは、スラッシュ「/」を二つ並べた記号です。
●一行コメント
「//」
以下サンプルコードの「comment1.html」を「utf-8」形式で保存して、ブラウザーで確認してみましょう。
●comment1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Introduction to JavaScript</title>
</head>
<body>
<p id="tokyo"></p>
<p id="osaka"></p>
<script>
// 都道府県を設定する。
document.getElementById("tokyo").innerHTML = "東京";
document.getElementById("osaka").innerHTML = "大阪";
</script>
</body>
</html>
行頭に「//」記号がある一行目の「都道府県を設定する。」はプログラムの中で実行される事はありません。ブラウザーにもコメント行は表示されません。
●「comment1.html」
また、行の途中にコメント記号を挿入する事もできます。
<body>
<p id="tokyo"></p>
<p id="osaka"></p>
<script>
var tokyo = "東京都"; // tokyoの初期値を設定する。
var osaka = "大阪府"; // osakaの初期値を設定する。
document.getElementById("tokyo").innerHTML = tokyo;
document.getElementById("osaka").innerHTML = osaka;
</script>
</body>
JavaScriptの変数宣言部分の「var tokyo = "東京都";」と「var osaka = "大阪府";」は実行されますが、行の途中の「//」記号以降のテキスト「tokyoの初期値を設定する。」と「osakaの初期値を設定する。」はコメントとして扱われます。
1.2. 複数行のコメント
コメントが複数行にわたる場合には、スラッシュ＋アスタリスク記号「/*」とアスタリスク＋スラッシュ記号「*/」でコメントを囲みます。
<body>
<p id="tokyo"></p>
<p id="osaka"></p>
<script>
/*
idが「tokyo」の段落に「東京」、
idが「osaka」の段落に「大阪」
を設定する。
*/
document.getElementById("tokyo").innerHTML = "東京";
document.getElementById("osaka").innerHTML = "大阪";
</script>
</body>
「/*」～「*/」で囲まれたテキストは、一行コメントと同様ブラウザーに表示されることはありません。
2. コメント記号を使ってデバッグをする
2.1. 一行コメントでデバッグをする
JavaScriptのデバッグ・コードテストの中で特定の行を実行させたくない場合、その行をコメントアウトする方法もあります。
<body>
<p id="tokyo"></p>
<p id="osaka"></p>
<script>
//document.getElementById("tokyo").innerHTML = "東京";
document.getElementById("osaka").innerHTML = "大阪";
</script>
</body>
コメントアウトした、「document.getElementById("tokyo").innerHTML = "東京";」が実行されませんので、「東京」を表示している段落に値が設定されることはありません。
ブラウザーの表示も「大阪」のみの表示になります。
●「comment1.html」
2.2. 複数行コメントでデバッグをする
複数行にわたってコードをコメントアウトすると特定の範囲のプログラムが実行されません。
<body>
<p id="tokyo"></p>
<p id="osaka"></p>
<script>
/*
document.getElementById("tokyo").innerHTML = "東京";
document.getElementById("osaka").innerHTML = "大阪";
*/
</script>
</body>
「/*」～「*/」で囲まれたJavaScriptはブラウザーで実行されません。id属性が「tokyo」と「osaka」の段落タグ内にテキストが設定されない為、ブラウザーには「東京」、「大阪」どちらのテキストも表示されません。
●「comment1.html」
