JavaScriptのコメントの書き方

    • このページをはてなブックマークに追加

    公開日:2018年06月23日 最終更新日:2019年09月26日

    JavaScriptのコメントの書き方について解説します。JavaScriptのコメントは二通りの書き方があります。またコメントを使ったデバッグの方法についても見ていきましょう。

    目次

    1. JavaScriptのコメントの記述方法

    1.1. 一行コメント

    JavaScript」のコメントは、ソースコードとして認識されない為、コードの説明を書く際に便利です。一行コメントとは、コメント記号を記述した行のみコメントとして扱われます。一行コメントは、スラッシュ「/」を二つ並べた記号です。

    ●一行コメント

    //

    以下サンプルコードの「comment1.html」を「utf-8」形式で保存して、ブラウザーで確認してみましょう。

    ●comment1.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>Introduction to JavaScript</title>
    </head>
    <body>
    <p id="tokyo"></p>
    <p id="osaka"></p>
    <script>
    // 都道府県を設定する。
    document.getElementById("tokyo").innerHTML = "東京";
    document.getElementById("osaka").innerHTML = "大阪";
    </script>
    </body>
    </html>

    行頭に「//」記号がある一行目の「都道府県を設定する。」はプログラムの中で実行される事はありません。ブラウザーにもコメント行は表示されません。

    ●「comment1.html」

    また、行の途中にコメント記号を挿入する事もできます。

    <body>
    <p id="tokyo"></p>
    <p id="osaka"></p>
    <script>
    var tokyo = "東京都"; // tokyoの初期値を設定する。
    var osaka = "大阪府"; // osakaの初期値を設定する。
    document.getElementById("tokyo").innerHTML = tokyo;
    document.getElementById("osaka").innerHTML = osaka;
    </script>
    </body>

    JavaScriptの変数宣言部分の「var tokyo = "東京都";」と「var osaka = "大阪府";」は実行されますが、行の途中の「//」記号以降のテキスト「tokyoの初期値を設定する。」と「osakaの初期値を設定する。」はコメントとして扱われます。

    ▲ページトップへ戻る

    1.2. 複数行のコメント

    コメントが複数行にわたる場合には、スラッシュ+アスタリスク記号「/*」とアスタリスク+スラッシュ記号「*/」でコメントを囲みます。

    <body>
    <p id="tokyo"></p>
    <p id="osaka"></p>
    <script>
    /*
    idが「tokyo」の段落に「東京」、
    idが「osaka」の段落に「大阪」
    を設定する。
    */

    document.getElementById("tokyo").innerHTML = "東京";
    document.getElementById("osaka").innerHTML = "大阪";
    </script>
    </body>

    /*」~「*/」で囲まれたテキストは、一行コメントと同様ブラウザーに表示されることはありません。

    ▲ページトップへ戻る

    2. コメント記号を使ってデバッグをする

    2.1. 一行コメントでデバッグをする

    JavaScriptのデバッグ・コードテストの中で特定の行を実行させたくない場合、その行をコメントアウトする方法もあります。

    <body>
    <p id="tokyo"></p>
    <p id="osaka"></p>
    <script>
    //document.getElementById("tokyo").innerHTML = "東京";
    document.getElementById("osaka").innerHTML = "大阪";
    </script>
    </body>

    コメントアウトした、「document.getElementById("tokyo").innerHTML = "東京";」が実行されませんので、「東京」を表示している段落に値が設定されることはありません。

    ブラウザーの表示も「大阪」のみの表示になります。

    ●「comment1.html」

    ▲ページトップへ戻る

    2.2. 複数行コメントでデバッグをする

    複数行にわたってコードをコメントアウトすると特定の範囲のプログラムが実行されません。

    <body>
    <p id="tokyo"></p>
    <p id="osaka"></p>
    <script>
    /*
    document.getElementById("tokyo").innerHTML = "東京";
    document.getElementById("osaka").innerHTML = "大阪";
    */

    </script>
    </body>

    /*」~「*/」で囲まれたJavaScriptはブラウザーで実行されません。id属性が「tokyo」と「osaka」の段落タグ内にテキストが設定されない為、ブラウザーには「東京」、「大阪」どちらのテキストも表示されません。

    ●「comment1.html」

    ▲ページトップへ戻る

    JavaScriptのスキルが活かせる最新求人情報をチェック!

    年収400万円〜700万円
    勤務地 東京都 品川区
    年収350万円〜600万円
    勤務地 東京都 港区
    年収400万円〜700万円
    勤務地 東京都 渋谷区
    月額単価40万円〜
    勤務地 東京都 港区
    • このページをはてなブックマークに追加

    おすすめ記事

  • ピックアップ

    正社員

    【LAMP】システムエンジニア|ECに特化した顧客管理システムの開発 NEW

    年収 :400万円〜700万円

    自社サービス「うちでのこづち」、また新サービスの開発全般 をお願いします。 アジャイル開発を行っ...

    株式会社E-Grant

    正社員

    【PHP】フロントエンドエンジニア|Webサイトのデザイン・コーディング NEW

    年収 :350万円〜600万円

    様々な業種や規模の企業を担当していただき、Webサイトの デザインとコーディングを行っていただきます...

    株式会社ミスターフュージョン

    正社員

    【PHP】システムエンジニア|ショッピングシステムの開発・運用 NEW

    年収 :400万円〜700万円

    ネットショップ構築サービスの運営業務や新機能の開発を お任せします。 同社の通販事業部で利用して...

    ジェイフロンティア株式会社

    フリーランス

    【JavaScript】フロントエンドエンジニア★大手テレビ局の動画配信サイトの開発

    月額単価 :40万円〜

    【業務内容】 大手テレビ局の動画配信サイトのフロントエンドの改修、新規開発を担当していただきます...