今回はJavaScriptのコメント記述方法についての記事です。
皆さんは普段からプログラムにコメントを付けることを意識していますか？またエラーが発生した際は、どうエラー部分を特定していますか？
コメントはプログラミングには必須の要素で、使いこなせるとさらに綺麗なコードを書けるようになるでしょう。早速使い方と用途を学んでいきましょう！
JavaScriptが学べるおすすめの入門サイトを紹介！
目次
JavaScriptでコメントを挿入する
JavaScriptのコメントには一行コメントと複数行コメントの2種類があります。
一行コメント
|
1 2 3 |
// 一行コメント // "Hello World"と画面に表示 console.log("Hello World"); |
複数行コメント
|
1 2 3 |
/* 複数行コメント Hello Worldと画面に表示 */ console.log("Hello World"); |
出力結果はどちらも『Hello World』で違いはありません。一行コメントはスラッシュで、副業コメントはスラッシュとアスタリスクで記述します。
HTML-likeコメント
JavaScriptを学習済みの方はご存じかと思いますが、JavaScriptはHTML内にも記述できるため、HTMLのコメント挿入を使ってもコメントアウトができます。
|
1 2 3 4 5 |
<script> <!-- HTML-likeコメント console.log("Hello World"); --> Hello World画面に表示する </script> |
こちらも上の2つと同様出力結果は『Hello World』です。HTMLファイル内に<script>タグを使ってJavaScriptを記述している場合はこの書き方でもコメントできるので、ぜひ活用してみてください。
JavaScriptでのコメント使い分け
HTML-likeコメントはHTMLファイル内限定のコメントアウト方法だとして、一行コメントと複数行コメントはどう使い分けるべきなのでしょうか？
一行コメントはその一行が全てコメントアウトされるわけではなく、スラッシュ2つ（//）の後がコメントアウトされます。
つまりコードの後にコメントを入れたい時に便利なのです。
|
1 2 3 4 |
var number1 = 10; // 出席番号 var name = "takashi"; // 氏名 console.log("出席番号:", number1); console.log("氏名：", name); |
こうしておくと、他の誰かがコードを見た時も「このコードは何のためにあるのか」と理解しやすくなります。
複数行コメントはコメントの途中で改行できるので、長いコメントを記述する際に便利です。
|
1 2 3 4 5 6 |
/* num1に1を代入した後 num2にnum1を代入する */ var num1 = 1; var num2 = num1; console.log(num1); console.log(num2); |
改行した後は文の先頭が揃うように、Tabキーでスペースを入れましょう。
コードには積極的にコメントを入れよう
実はコードそのものと同じくらいコメントは大切で、良いプログラマーはとにかく適切な位置に的確なコメントを挿入します。
今はあまり実感できないかもしれませんが、書いたコードは複数人で共有します。小規模なプロジェクトなら2~5人程度かもしれませんが、大規模なプロジェクトになれば10人以上の人間がコードを見るかもしれません。
その際にコメントがあると、「この一文はこのためにあるのだ」と目的とそのコードの存在意義がはっきりするのです。
コメントのショートカットキーを応用する
しかしコメントの多くは日本語で記述するため、コメントアウト時は日本語と英語の切り替えに少し煩わしさを感じるかもしれません。
そんな時に便利なのが、ショートカットキーです。テキストエディターはプログラマーがより早くコードが書けるように、様々な機能を搭載しています。
Microsoft社が提供する「Visual Studio Code」ではCtrlキー＋/ でカーソルがある文がコメントアウトされます。
JSのコメントには何を書く？
しかし実際に他人のコードを見ないうちは、コメントにどんなものを書けばよいのか分からないでしょう。
コメントの仕方にはポイントがあります。
- そのコードを入れた理由や背景を書く
- 後にコードを修正する方のための引継ぎメモを書く
- 他のプログラマーにメッセージを伝える
先ほど例で紹介した『num1に1を代入した後num2にnum1を代入する』というコメントですが、実はこのコメントはあまり推奨できるものではありません。
書いている関数がどんな機能を持っているかは他のプログラマーでもわかるので、コメントにはなぜその関数を使ったのかを書きます。
JavaScriptの場合、特定のブラウザで動作させるためや、通常の関数ではエラーが発生してしまうためあえてマイナーなものを使っているなど、理由を明確にしておくことで意図が伝わるようになるのです。
またエラーが発生しており、現時点ではそのエラーが修正出来ていないなどもコメントに残しましょう。エラーでなくても伝えたいメッセージがあれば記述しておくと良いですね。
このようにコメントは、他のプログラマーとコミュニケーションを取るために残すのがポイントです。
JSのエラーをコメントアウトで特定する
またコメントアウトでエラーの発生位置を特定することもできます。多くの場合でエラー位置が表示できるようになっていますが、エラーとして表示されない不具合や、記述の間違いはなかなか特定が難しいです。
その際にエラー部分を予測してコメントアウトすることで、エラーがどこで発生するかを特定できるのです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
function calc(num1, num2, num3) { return num1 / num2 / num3; } var result1, result2, result3; result1 = calc(1, 2, 3); result2 = calc(12, 29, 0); result3 = calc(98, 56, 37); if (result1 <= 1000) { console.log("成功"); } if (result2 <= 1000) { console.log("成功"); } if (result3 <= 1000) { console.log("成功"); } |
実行結果
成功
どの値も1000以下になるはずなのに、成功は2回しか表示されません。なぜでしょうか？エラーは表示されないので1つずつコメントアウトして確かめましょう。コメントアウトの手順を以下に示します
- result[x] = calc(nam1, num2, num3)をコメントアウト
- if (result[x] <= 1000) {…}をコメントアウト
- 実行
xには1~3を入れて、それぞれ繰り返します。1と3の時は「成功」が1回に減りますが、2をコメントアウトした際は「成功」は2つのままでした。
よってresult2に入っている値が1000以上になっていることになります。これは0による除法で結果がInfinity（正の無限大）になったから。
このようにコメントアウトによってエラーを特定できるのです。
まとめ
いかがでしたでしょうか？今回はJavaScriptのコメントアウトについて解説しました。コメントアウトはただコメントを記述するだけではなく、エラー部分を特定するのに非常に便利な手法です。
今回はまだ短いコードなので分かりますが、1000行超えのコードになると、よりコメントアウトによるエラー部位特定の真価を実感できるでしょう。
この手法は殆どのプログラミング言語で活用できるので、どんどん利用していきましょう！
【JavaScript】よくあるエラーの原因とその解決方法を解説
