プログラミングをしていると、「このコードはどういう意味だっけ？」と後から見返して困ることがありますよね。
そんな時に役立つのがコメント機能です。
コードの中に人間のためのメモを残すことができるので、自分はもちろん、他の人が見た時にも理解しやすくなりますよ。
コメントはプログラムの動作には影響しないので、安心して自由に書き込むことができます。
この記事ではJavaScriptのコメントの書き方を解説｜1行・複数行コメントと使い分けについて解説していきます。
JavaScriptのコメントはスラッシュで書ける！用途に合わせて使い分けよう
JavaScriptのコメントには、大きく分けて2つの書き方があります。
短いメモを残したい時と、長い説明を書きたい時で使い分けるのが基本です。
- 1行だけのコメント：スラッシュを2つ並べる（//）
- 複数行のコメント：スラッシュとアスタリスクで囲む（/* 〜 */）
1行コメントは、コードの右側や上の行にちょっとした補足を書きたい時に大活躍します。
一方で、複数行コメントは、機能の詳しい説明や、一時的にコードを無効化したい時などに便利です。
目的に合わせてこれらを使いこなすことで、誰が見ても分かりやすいコードを作ることができますよ。
コメントを書く習慣をつけると、後からバグを直したり機能を追加したりする作業がずっと楽になります。
1行コメント「//」はコードのすぐ横にちょっとしたメモを残すのに最適
JavaScriptで一番よく使うのが、スラッシュを2つ重ねた「//」の1行コメントです。
この記号を書いた場所から行の終わりまでがコメントとして扱われます。
- 変数の意味や目的をメモする
- 複雑な処理の前に簡単な説明を入れる
- 一時的に1行だけコードの実行を止める
行の途中からでも使えるので、コードのすぐ右側に補足を書くのにもぴったりです。
短い説明をサッと書きたい時は、この1行コメントを積極的に使っていきましょう。
シンプルで書きやすいので、プログラミング初心者の方でもすぐに使いこなせるはずです。
複数行コメント「/* */」は長い説明やコードの無効化に便利
長い文章でしっかりとした説明を残したい場合は、「/*」と「*/」で囲む複数行コメントを使います。
囲まれた部分は改行しても全てコメントとして扱われます。
- 関数の詳しい使い方や注意点を書く
- プログラムの大きなブロック全体の説明をする
- 複数行のコードをまとめて一時的に無効化する（コメントアウト）
プログラミングをしていると、「この処理を一旦止めて、別の動きを確認したい」という場面がよくあります。
そんな時、消したくないコードを「/*」と「*/」で囲んで無効化すれば、簡単にテストをすることができます。
これをコメントアウトと呼び、開発の現場でも頻繁に使われるテクニックです。
コメントを書く時の注意点！分かりやすく簡潔に書こう
コメントは便利ですが、何でもかんでも書けばいいというわけではありません。
読みやすいコードにするためには、いくつか気をつけるべきポイントがあります。
- 当たり前のことは書かない（コードを見ればわかることは省略）
- 「なぜ」その処理をしているのか、目的や理由を書く
- 古くなったコメントは消すか更新する
例えば、「変数に1を足す」といったコードを読めばすぐにわかる説明は不要です。
それよりも、「なぜここで1を足す必要があるのか」という理由を書く方が、後から見る人にとってずっと役立ちます。
また、コードを書き直したのにコメントが古いままになっていると、混乱を招いてしまいます。
コードを変更したら、必ずコメントもセットで見直す習慣をつけましょう。
JavaScriptのコメントに関するよくある質問
JavaScriptのコメントについて、初心者の方が疑問に思いやすいポイントをまとめました。
- Q. コメントを書きすぎるとプログラムが遅くなる？
- A. 全く影響ありません。プログラムが実行される前にコメントは全て無視されるので、どれだけ書いてもスピードは変わりません。
- Q. HTMLのコメントとJavaScriptのコメントはどう違うの？
- A. HTMLは「<!– –>」を使いますが、JavaScriptは「//」や「/* */」を使います。言語によって書き方が違うので注意しましょう。
- Q. コメントアウトしたコードは残しておいていいの？
- A. テストや修正が終わって、もう絶対に使わないとわかったコードは、混乱を避けるために消してしまうのがおすすめです。
コメントは未来の自分へのメッセージでもあります。
わからないことがあれば、まずはコードの中にメモを残して整理してみるのも、プログラミング上達のコツですよ。
プログラミングを本格的に学ぶならスクールもおすすめ
JavaScriptの基礎がわかってきて、もっと本格的にプログラミングを学んでみたいと思ったことはありませんか？
独学でも素晴らしいですが、プロのサポートを受けると学習スピードがグンと上がりますよ。
- わからないことをすぐに質問できる環境がある
- 実践的なカリキュラムで効率よく学べる
- 転職や就職のサポートを受けられる
基礎からしっかり固めたい方や、最短でエンジニアとしてのキャリアをスタートさせたい方には、スクールの利用がとても効果的です。
自分に合った学習スタイルを見つけて、楽しくプログラミングを続けていきましょう！
DMM WEBCAMP 学習コース（プログラミングコース）
Skill Hacks
CodeCamp
JavaScriptのコメントを使いこなして読みやすいコードを書こう！
JavaScriptのコメントの書き方について解説してきました。
短いメモを残したい時は「//」の1行コメント、長い説明やコードの無効化には「/* */」の複数行コメントを使うのが基本です。
後からコードを見返す自分や、一緒に開発をする仲間のために、目的や理由を意識したわかりやすいコメントを残すことを心がけましょう。
コメントを上手に活用して、プログラミングのスキルをさらに磨いていってくださいね！
WordPressテーマ「SIMPLE」
「SIMPLE」は、シンプルなデザインと多彩な機能を兼ね備えたオリジナルWordPressテーマです。
