このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

【JavaScript入門】コメントの書き方

コメントの書き方

　プログラムを書くと、後で自分や他の開発者がコードを見たときに、何を意図して書いたのか、どんな処理を行っているのかを理解しやすくするために「コメント」は非常に重要です。特に初心者の場合、コードそのものだけでは理解しにくい部分も多いため、丁寧にコメントを書くことで、コードの流れや意図が明確になり、後のメンテナンスや学習に大きく役立ちます。ここでは、JavaScriptにおけるコメントの基本的な書き方と実践例を、具体的なHTMLファイルを用いて解説します。

１．コメントの基本

1.1. 単一行コメント

　JavaScriptでは、//を使って行の途中または行全体をコメントとして記述できます。これは、一行だけ説明を書きたいときに便利です。たとえば、以下のように記述します。

// これは単一行コメントです。コードの意図や注意事項を簡単に記述します。
console.log('単一行コメントの例です。');

1.2. 複数行コメント

　複数の行に渡る説明や、詳細な注釈を記述したい場合は、/* ... */を使用します。これにより、コードの一部分全体をコメントアウトすることも可能です。

/*
  これは複数行コメントの例です。
  この部分には、プログラムの処理の流れや、特定の関数の役割について
  詳細に説明することができます。
*/
console.log('複数行コメントの例です。');

２．コメントの実践例

　ここでは、実際のHTMLファイルにJavaScriptのコメントを組み込んだ例を示します。ファイル名「comment_sample.html」として、headとbodyの両方にコメントを記述する方法を紹介します。

【comment_sample.html】

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>コメントのサンプルページ</title>
    <style>
      /* CSSのコメント: 見出しの色と余白を設定 */
      h1 { color: #2d6cdf; margin-bottom: 1em; }
    </style>
    <script>
      // head内のJavaScript: ページの初期設定を行います。
      console.log('head内のスクリプトが実行されました。');
    </script>
  </head>
  <body>
    <h1>コメントの書き方のサンプル</h1>
    <p>このページでは、JavaScriptのコメントの基本的な書き方を学びます。</p>
    <script>
      // body内のスクリプト: DOM操作の例として、テキストを変更します。

      // DOMContentLoadedイベントを使用して、ページが完全に読み込まれた後に実行
      document.addEventListener('DOMContentLoaded', function() {
        // 要素の取得
        const para = document.querySelector('p');
        /*
          以下のコードは、取得した段落要素のテキストを変更する処理です。
          ユーザーに説明文が更新されたことを確認してもらうためのサンプルです。
        */
        para.textContent = 'JavaScriptのコメントは、コードの意図を伝えるために非常に有用です。';
        console.log('body内のスクリプトが正常に実行され、段落のテキストが変更されました。');
      });
    </script>
  </body>
</html>

実行結果

デバッグコンソールの出力

head内のスクリプトが実行されました。
body内のスクリプトが正常に実行され、段落のテキストが変更されました。

解説

  • head内のスクリプトでは、ページ読み込み前に初期設定として、コンソールにメッセージを出力しています。ここでは単一行コメントを使用して、その意図を説明しています。
  • body内のスクリプトは、DOMContentLoadedイベントを利用して、ページ全体が読み込まれた後に実行されます。複数行コメントを使って、段落要素のテキストを変更する処理の詳細を説明し、実際にテキストが更新されたことをコンソール出力で確認できるようにしています。
  • HTMLとJavaScript、CSSが連携して動作する例として、コメントの使い方を具体的に示すことで、実践的な理解を深めることができます。

３．コメントを書く際のポイント

3.1. コメントを書く目的

　コメントは、後でコードを見返したときに、なぜその処理を書いたのか、どのような意図があるのかを理解するための手助けとなります。特に、複雑な処理や関数ごとに、どのような役割を持つのかを明記しておくと、メンテナンスが容易になります。

3.2. コメントの量と質

　初心者のうちは、コードの各部分に対して多めにコメントを書くことが推奨されます。ただし、コードと同じ内容をただ繰り返すのではなく、なぜその処理が必要なのか、注意点や補足情報を記述するよう心がけましょう。コメントを書く際のポイントは以下の通りです。

  • プログラムの意図や目的を書く。
  • 処理の流れや注意事項を記述する。
  • 関数や複数行の処理ブロックにはタイトル的なコメントを付ける。
  • 慣れてくれば、不要なコメントは削除し、必要な情報だけ残す。

まとめ

　ここでは、JavaScriptにおけるコメントの基本的な書き方とその重要性について学びました。単一行コメントと複数行コメントの構文を理解し、実際のHTMLファイルに組み込んだサンプルコードを通じて、どのようにコメントがコードの可読性と保守性を向上させるかを確認しました。
　コメントは、プログラムの意図を明確にし、後々のデバッグや他の開発者との協業をスムーズにするための強力なツールです。ぜひ、日々の開発において積極的にコメントを活用し、コードの品質向上に役立ててください。