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のスキルが活かせる最新求人情報をチェック!

    年収300万円〜500万円
    勤務地 東京都 台東区
    • このページをはてなブックマークに追加

    おすすめ記事

  • ピックアップ

    正社員

    【HTML5/CSS3/JavaScript】フロントエンドエンジニア|Webサイトの構築・企画・デザイン NEW

    年収 :350万円〜500万円

    当社は、Webサイトやサービス構築を企画、デザインからシステム開発、運用まで、まるごと受託開発してい...

    株式会社ジークス

    正社員

    【Illsutrator/Photoshop】Webデザイナー|Webサイト制作 NEW

    年収 :300万円〜500万円

    Webデザイン

    株式会社Liblock

    フリーランス

    【Java/JavaScript】フルスタックエンジニア★運搬車両の位置情報サービス開発

    Salesforce等を中心に受託開発や自社パッケージの導入カスタマイズなどを行っている企業です。 今回は...

    フリーランス

    【JavaScript】フロントエンドエンジニア★建機シミュレーションサービスの開発

    Salesforce等を中心に受託開発や自社パッケージの導入カスタマイズなどを行っている企業です。 今回は...