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

    月額単価60万円〜90万円
    勤務地 神奈川県
    月額単価60万円〜70万円
    勤務地 東京都 港区
    月額単価70万円〜80万円
    勤務地 東京都 港区
    • このページをはてなブックマークに追加

    おすすめ記事

  • ピックアップ

    フリーランス

    【Java】バックエンドエンジニア★Web教科書配信システムのアプリ開発 NEW

    月額単価 :60万円〜90万円

    小中学校で利用するWeb教科書配信システムの新規開発業務を担当して頂きます。

    フリーランス

    【React】フロントエンドエンジニア★eスポーツにおけるプラットフォーム開発

    月額単価 :60万円〜70万円

    eスポーツのプラットフォーム開発をしているスタートアップ企業にて、フロントエンド開発を担当して頂き...

    フリーランス

    【JavaScript】フロントエンドエンジニア★不動産Techサービスの開発

    月額単価 :70万円〜80万円

    同社はデジタルコンサルティング事業やインターネットメディア事業を展開しています。 今回は、同社が...

    フリーランス

    【HTML5/CSS3】マークアップエンジニア★商社・物流向け新規アプリ基盤構築

    同社は受託開発をメインとしています。 今回はAzure上で稼働するアプリケーションの開発に携わって頂き...