コメントアウトとは
コメントアウトとは、プログラムなどの文をプログラムとして実行されない文（コメント）にすることを指します。
コメントアウトされた文は、主にメモ的な用途に使われることが多いですが、一時的に一部のプログラムを非活性化する用途でも使用されます。
JavaScriptでコメントアウトされた文は、WEBブラウザ上でのWEBサイトの動作には影響しませんが、検証ツールなどでソースコードを見るとコメントアウトされた文を確認することができます。
また、JavaScriptに限らずほとんどのプログラミング言語でコメントアウトができます。ただし、プログラミング言語によってコメントアウトする方法が異なることがあるため、注意が必要です。
JavaScriptでコメントアウトする方法
JavaScriptでコメントアウトする方法について確認しましょう。
1行をコメントアウトする
JavaScriptで1行をコメントアウトするには、「//」とスラッシュを2回記述します。
// コメントアウトされています。スラッシュの後のスペースはなくても問題ないですが、スペースを開けることでコメントが見やすくなります。
また、行の途中でもコメントアウトすることが可能で、スラッシュを記述した箇所から右側がコメントアウトされます。
変数や関数に少しだけ説明を加えておきたい時など、プログラムのすぐ横にコメントを記述することでよりわかりやすい説明ができます。
ここはコメントアウトされません。 // スラッシュから右側がコメントアウトされます。また、当然ですが1行のコメントアウトを続けて複数行に行うことで、擬似的に複数行をコメントアウトすることもできます。
// 複数行の
// JavaScriptのコードを
// スラッシュ2回で
// コメントアウトすることができます。
複数行をコメントアウトする
複数行をコメントアウトする際には、「/*」と「*/」でコメントアウトしたい行を囲みます。
/*
コメントアウトされています。
コメントアウトされています。
コメントアウトされています。
*/上の記述方法でも確かにコメントアウトすることができますが、コメントとプログラムの境が多少分かりにくいです。
どこからどこまでがコメントアウトされているのかを見やすくするために、複数行をコメントアウトする際に以下のように記述することがあります。
/*
* コメントアウトされています。
* コメントアウトされています。
*/行の初めにアスタリスク「*」を揃えて記述することで、コメントアウトしている行であることをひと目でわかるようになっています。
実用性はあまりありませんが、行の途中からコメントアウトを始めることや、行の途中でコメントアウトを終わらせることもできます。
コメントアウトされていません。 /* コメントアウトされています。
コメントアウトされています。コメントアウトされています。
コメントアウトされています。 */ コメントアウトされていません。
HTML内のJavaScriptをコメントアウトする
HTML内に書かれたJavaScriptのコードもコメントアウトすることができます。
コメントアウトの方法は普通のJavaScriptのコメントアウトと同じです。
~
<p>JavaScript</p>
<p>コメントアウト</p>
<script>
// console.log('1行コメントアウト');
/*
* console.log('複数行コメントアウト');
* console.log('複数行コメントアウト');
*/
</script>
~JavaScriptのコードを記述するscriptタグ（<script></script>）ごとコメントアウトしたい時には、JavaScriptのコメントアウトではなく、HTMLのコメントアウト（<!– –>）を使用します。
~
<p>JavaScript</p>
<p>コメントアウト</p>
<!--
<script>
console.log('全てコメントアウトされます');
console.log('全てコメントアウトされます');
</script>
-->
~
その他のコメントアウト（非推奨）
実はHTMLのコメントアウトである「<!–」や「–>」でもJavaScriptのコードをコメントアウトできます。
他にも、「#!」を使ってコメントアウトできるJavaScriptのコードもありますが、ここで紹介するコメントアウトの方法は全て非推奨の方法です。
これらのコメントアウトを使ってしまうと。、正しくコメントアウトできていないことが原因でバグや不具合の原因になってしまうため、使わないようにしましょう。
JavaScriptのコメントアウトにおいて、全てのケースで「//」または「/* */」で対応可能です。
コメントアウトのショートカットキー
多くのテキストエディタでは、以下のショートカットキーでコメントアウトを行うことができます。
- Mac … 「⌘」＋「/」
- Windows … 「Ctrl」＋「/」
ショートカットキーを覚えておくとコメントアウトを楽に行うことができ、作業の効率化に繋がりますのでぜひ覚えましょう。
コメントアウトをする意味と活用方法
意外に思われる人もいるかもしれませんが、プログラミングにおいてコメントはとても重要です。
プログラミング上級者になると、書かれているコメントでそのコードが優れているかどうかを判断できるとも言われています。
コメントアウトが重要な理由
では、なぜコメントアウトが重要と言われるのでしょうか？
プログラミングでは、誰かが書いたコードを複数人で共有することがほとんどです。
コメントがないと、「そのプログラムではどのような処理を行いたいのか」や「どのプログラムと連携しているのか」がわかり辛くなります。
そうすると、テスト工程に割く時間が無駄に増えてしまったり、バグや不具合が発生してしまった時の原因の究明に時間がかかってしまいます。
コメントアウトの活用方法
プログラムを作成する人と運用する人が同じであるとは限りません。
運用する人がわかりやすいようにコメントアウトを使っていると、運用をスムーズに行うことができます。
逆に、そうでなければ運用に大きな工数がかかってしまったり、致命的なミスにも繋がってしまう可能性もあります。
プログラミングでは、自分だけでなく、他人にもコードが理解できるようにコメントアウトを活用することが大事になってきます。
また、作成したプログラムを一時的に機能しないようにするときにコメントアウトを活用することもあります。
プログラムが想定の動作を行わなかった時、その原因と思われる箇所をコメントアウトすることでデバッグ作業を進めることで、原因の特定や改善策の検討につながります。
他にも、プログラムを作成し始める前に「どのような処理を行うのか」をコメントで記述しておくことで、迷いなくプログラミングを行うことができるようにもなります。
まとめ
JavaScriptに限らず、ほとんどのプログラミング言語にはコメントアウト機能があります。
コメントアウト機能を使いこなすことで、作業にかかる時間を減らせたりミスや不具合を発生させる確率を下げることができます。
ぜひ意識してコメントアウトを使い、わかりやすいコメントで効率よくプログラミングを行いましょう。
コメント