（最終更新月：2023年11月）
✔ 以下のような方々へおすすめの記事です
「JavaScriptでコメントアウトはどうするの？」
「コメントアウトの記述方法を知りたい」
「JavaScriptでのコメントアウトの具体例が見てみたい」
✔ 当記事で伝える内容は以下の通りです
- JavaScriptでのコメントアウトの基本的な方法
- 正しいコメントアウトの記述法とその適用例
- コメントアウトの実例とその活用法
当記事では、JavaScriptにおけるコメントアウトの基本から、コメントアウトのうまい使い方まで、具体的な例を通じて解説をおこなっています。
ぜひ最後まで読んでみてください。
筆者プロフィール
【現職】プロダクトマネージャー
【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作
「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。
【当ブログで紹介しているサイト】
✔人に見せても恥ずかしくないコードを書こう
「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。
- 見るからにきれいなコードの書き方
- コードの分割方法
- 変数や関数の命名規則
エンジニアのスタンダートとすべき基準を一から解説しています。
何回も読むのに値する本なので、ぜひ手にとって読んでみてください。
一行注釈：基礎と実践
こちらでは、「一行注釈」の基本から実践的な使い方までを解説します。
一行注釈を理解し適切に使用することで、コードの可読性やメンテナンス性が向上するでしょう。
- JavaScriptでの一行コメントの書き方
- 一行コメントの具体的な使用例
JavaScriptでの一行コメントの書き方
JavaScriptで一行コメントを書く方法は非常に簡単です。
//を行の先頭に書き、その後にコメント内容を記述します。
// これは一行コメントです
let name = "Alice";この例では、//の後にコメントが記述されており、この行はコードとして実行されません。
一行コメントの具体的な使用例
一行コメントは、コードの特定の部分の機能を一時的に無効化したり、ほかの開発者や将来の自分へのメモとして使えます。
let age = 25;
// let address = "Tokyo"; この行は一時的に無効化されています複数行注釈：基礎と実践
こちらでは、「複数行注釈」の基本からその活用方法までをご紹介します。
複数行注釈を適切に使用することで、コードの概要や複雑な部分の説明が容易になるでしょう。
- 複数行コメントの作成方法
- 複数行コメントの具体的な使用例
複数行コメントの作成方法
JavaScriptで複数行のコメントを書くには、/*でコメントを開始し、*/でコメントを終了します。
/*
これは
複数行の
コメントです
*/
let number = 10;このように、/*と*/の間に書かれた内容は全てコメントとして扱われます。
複数行コメントの具体的な使用例
複数行コメントは、関数の説明や、特定の処理に関する詳細な説明など、複数行にわたる情報を記述する際に使用します。
/*
この関数は、与えられた2つの数値を
足し合わせる機能を持っています
*/
function add(a, b) {
return a + b;
}HTMLライクなコメント（ES2015）
こちらでは、「HTMLライクなコメント」とは何か、そしてJavaScriptでのその取り扱い方法を解説します。
HTMLライクなコメントを理解することで、HTML内のJavaScriptコードをより適切に書けるはず。
- HTMLとJavaScriptでのコメントの違い
- JavaScriptにおけるHTML風のコメントはどのように扱うか
HTMLとJavaScriptでのコメントの違い
HTMLでのコメントは、<!-- で開始し、--> で終了します。
一方、JavaScriptでは、一行コメントは // で、複数行コメントは /* */ で表現されます。
<!-- これはHTMLのコメントです -->// これはJavaScriptの一行コメントです
/*
これはJavaScriptの複数行コメントです
*/HTMLのコメントは主にHTML文書内のメモやコードの一時的な無効化などに使用され、JavaScriptのコメントはコードの説明やデバッグ時の一時的な無効化などに利用されます。
JavaScriptにおけるHTML風のコメントはどのように扱うか
古いブラウザはJavaScriptをサポートしていないか、または部分的にしかサポートしていないことがありました。
そのため、JavaScriptコードをHTMLコメントで囲むことで、非対応のブラウザでエラーが発生するのを防ぐためのテクニックとして利用されていました。
<script type="text/javascript">
<!--
var name = "Alice";
// -->
</script>しかし現代のブラウザはほぼ全てがJavaScriptをサポートしているため、このようなテクニックはもはや必要ありません。
現代の開発では、このようなHTML風のコメントを使用することは推奨されません。
コメントの利点及び注意点
こちらでは、コード内の「コメント」の利点と、それを取り扱う際の注意点について解説します。
コメントを適切に使用することで、コードの可読性を高め、開発者間のコミュニケーションを促進します。
- コメントの効果
- コメントの適切な使用方法と注意点
コメントの効果
コメントはコードの説明書のようなもので、特定のコードや関数がどのような目的で書かれたのか、どのように動作するのかを説明するためのものです。
ほかの開発者や、未来の自分がコードを読む際に、迅速に理解し、修正や追加をおこなえます。
コメントの適切な使用方法と注意点
コメントは重要ですが、過度なコメントはむしろコードの可読性を低下させる可能性があります。
必要な箇所にのみコメントを付け、冗長な説明は避けるよう心掛けることが重要です。
またコメントとコードの内容が一致していない場合、混乱を招く原因となるため、コードの変更時にはコメントも適切に更新することが求められます。
まとめ
当記事では、JavaScriptにおけるコメントアウトについて学習してきました。
- コメントを適切に活用することで、高品質でメンテナンスしやすいコードを作成する手助けとなる
- コメントは、コードの背後にある考え方や意図を明示的にする手段
- 適切なコメントは、単なるコードの説明ではなく、チーム内のコミュニケーションツールとしての役割も果たす
コメントの活用方法はプロジェクトやチームによって異なるため、常にベストプラクティスを追求し、チーム内でのガイドラインやスタイルガイドを確立することが推奨されます。
自分だけのやり方でなく、チーム内でルールを決めておくことも重要だといえるでしょう。