コメントの書き方を学ぼう

学習の目標

本章では、以下の内容を学習します。

一行コメント（//）の書き方と使い方を理解する
複数行コメント（/* */）の書き方と使い方を習得する
コメントを書くタイミングと意識を学ぶ
読みやすいコードのためのコメント活用方法を身につける

はじめに

プログラムを書いていると、「このコードは何をしているのか」「なぜこう書いたのか」といった説明を残したくなることがあります。

また、一時的にコードの実行を止めたい場合もあるでしょう。

JavaScriptでは、コメントという機能を使って、コードに説明を追加したり、一部のコードを実行させないようにしたりできます。

コメントは実際にプログラムが動く時には無視されるため、日本語で説明を書いても問題ありません。

それでは、JavaScriptでコメントを書く方法を学んでいきましょう。

一行コメント（//）の使い方

基本的な一行コメントの書き方

JavaScriptで最もよく使われるコメントは、//（スラッシュ2つ）で始まる一行コメントです。

VS Codeで新しいファイルを作成してみましょう。

comment_practice.htmlというファイルを作成し、以下のコードを入力してください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>コメント練習</title>
</head>
<body>
    <h1>JavaScriptコメント練習</h1>

    <script>
        // これはコメントです
        console.log("Hello, World!");

        // console.log("この行は実行されません");

        console.log("ブラウザのコンソールを確認してください");
    </script>
</body>
</html>

実行結果:

Hello, World!
ブラウザのコンソールを確認してください

このHTMLファイルをブラウザで開き、開発者ツールのコンソールを確認してみましょう。

//で始まる行は実行されず、コンソールには「Hello, World!」と「ブラウザのコンソールを確認してください」だけが表示されるはずです。

//の後に書かれた内容は、JavaScriptの実行時に完全に無視されます。

これにより、コードの動作に影響を与えることなく、説明や注意点を記述できます。

コードの行末にコメントを追加する

コメントは新しい行に書くだけでなく、実際のコードの後ろに書くこともできます。

先ほどのHTMLファイルの<script>タグ内を以下のように修正してみましょう。

<script>
    let userName = "田中"; // ユーザーの名前を保存
    let userAge = 25; // ユーザーの年齢を保存

    console.log("名前: " + userName); // 名前を表示
    console.log("年齢: " + userAge); // 年齢を表示
</script>

実行結果:

名前: 田中
年齢: 25

このように、コードの右側にコメントを書くことで、そのコードが何をしているのかを説明できます。

ファイルを保存してブラウザを更新し、コンソールで結果を確認してみてください。

コメント部分は表示されず、実際のコードのみが実行されることが分かります。

一時的にコードを無効にする

開発中に「このコードを一時的に動かしたくない」という場面があります。

そんな時も、//を使ってコードをコメントアウト（無効化）できます。

<script>
    let score = 85;

    console.log("テストの点数: " + score);

    // console.log("この表示は一時的に止めています");
    // let bonus = 10;
    // console.log("ボーナス点: " + bonus);

    console.log("コメントアウトの練習完了");
</script>

実行結果:

テストの点数: 85
コメントアウトの練習完了

上記のコードでは、真ん中の3行がコメントアウトされているため、実行されません。

後でこの機能を有効にしたい時は、//を削除するだけで済みます。

複数行コメント（/* */）の使い方

複数行コメントの基本的な書き方

長い説明や複数行にわたる注意点を書きたい場合は、/*で始まり*/で終わる複数行コメントが便利です。

先ほどのHTMLファイルの<script>タグ内を以下のように修正してみましょう。

<script>
    /*
      このプログラムは学生の成績を管理するシステムです。
      以下の機能があります：
      1. 学生の名前を保存
      2. テストの点数を保存
      3. 結果をコンソールに表示
    */

    let studentName = "山田";
    let testScore = 78;

    console.log("学生名: " + studentName);
    console.log("点数: " + testScore);

    /*
      メモ: 後で以下の機能を追加する予定
      - 複数の学生を管理
      - 平均点の計算
      - 成績の評価（A、B、C）
    */
</script>

実行結果:

学生名: 山田
点数: 78

複数行コメントを使うことで、改行を含む長い説明を書くことができます。

プログラムの概要説明や、将来の改善予定などを記述する際によく使われます。

複数行のコードをまとめてコメントアウトする

複数行コメントは、複数行のコードを一度にコメントアウトしたい時にも使えます。

<script>
    let itemName = "りんご";
    let itemPrice = 150;

    console.log("商品名: " + itemName);
    console.log("価格: " + itemPrice + "円");

    /*
    // 以下の機能は開発中のため一時的に無効化
    let taxRate = 0.1;
    let totalPrice = itemPrice * (1 + taxRate);
    console.log("税込価格: " + totalPrice + "円");

    if (totalPrice > 100) {
        console.log("100円以上です");
    }
    */

    console.log("価格表示完了");
</script>

実行結果:

商品名: りんご
価格: 150円
価格表示完了

このように、/*と*/で囲むことで、複数行のコードを一度にコメントアウトできます。

開発中に機能を一時的に停止したい場合などに便利です。

コメントを書くタイミングと意識

わかりやすいコメントの書き方

コメントは単にコードの説明をするだけでなく、なぜそのコードを書いたのかを説明することが大切です。

以下の例を見てみましょう。

<script>
    let temperature = 35;

    // 気温が30度以上の場合は熱中症注意のメッセージを表示
    if (temperature >= 30) {
        console.log("熱中症に注意してください");
    }

    // ユーザーの入力をチェックする前に、空白文字を削除
    let userInput = "  こんにちは  ";
    let cleanInput = userInput.trim();
    console.log("入力内容: " + cleanInput);
</script>

実行結果:

熱中症に注意してください
入力内容: こんにちは

このように、「何をしているか」だけでなく「なぜそうしているか」を書くと、後でコードを見返した時に理解しやすくなります。

まとめ

本章では、JavaScriptでのコメントの書き方について学びました。以下の内容を理解できたことと思います。

//を使った一行コメントで、コードに説明を追加したり一時的に無効化したりできる
/* */を使った複数行コメントで、長い説明や複数行のコードをまとめて扱える
コメントは「何をしているか」だけでなく「なぜそうしているか」を書くと効果的

コメントを適切に使うことで、自分が後で見返した時や、他の人がコードを読む時の理解が格段に向上します。

コードを書く習慣と一緒に、適切なコメントを書く習慣も身につけていきましょう。

学習の目標

はじめに

一行コメント（//）の使い方

基本的な一行コメントの書き方

コードの行末にコメントを追加する

一時的にコードを無効にする

複数行コメント（/* */）の使い方

複数行コメントの基本的な書き方

複数行のコードをまとめてコメントアウトする

コメントを書くタイミングと意識

わかりやすいコメントの書き方

まとめ

Starterプランでより詳しく学習