Webに関する言語のコメントアウト方法まとめ【ウェブデザイン技能検定 1級学科範囲】

コメントアウトはコードの説明やデバッグに役立つ重要な機能です。
本記事では、HTML、CSS、JavaScript、PHPなど、Web開発に関係する多種多様な言語のコメントアウト方法をまとめました。

HTMLのコメントアウト

HTMLでは、<!-- -->を使用します。クライアントに送信されても表示されず、ブラウザが無視します。

<!-- これはHTMLコメントです -->
<p>この段落は表示されます。</p>

CSSのコメントアウト

CSSでは、/* */を使用します。スタイル定義の中で無視されます。

/* これはCSSコメントです */
body {
  background-color: #fff; /* 背景色を白に設定 */
}

JavaScriptのコメントアウト

JavaScriptでは、行コメントとブロックコメントの2種類があります。

行コメント

// これは行コメントです
console.log("表示されるログ");

ブロックコメント

/*
  これはブロックコメントです。
  複数行にわたるコメントを記述できます。
*/
console.log("このログも表示されます");

jQueryのコメントアウト

jQueryはJavaScriptのライブラリなので、JavaScriptと同じコメントアウト方法を使用します。

// これはjQueryのコメントです
$("p").hide(); /* この段落を隠す */

PHPのコメントアウト

PHPでは、3種類のコメントアウト方法があります。

行コメント

// これは行コメントです
# これも行コメントです
echo "表示されるテキスト";

ブロックコメント

/*
  これはブロックコメントです。
  複数行のコメントを記述できます。
*/
echo "これも表示されるテキスト";

JSONのコメントアウト

JSON自体はコメントをサポートしていません。ただし、メタ情報としてキーや値を追加して疑似コメントを実現できます。

疑似コメントの例

{
  "_comment": "これは疑似コメントです",
  "name": "John",
  "age": 30
}

JSPのコメントアウト

JSPでは、<%-- --%>を使用します。この形式のコメントはサーバーで処理され、クライアントには送信されません。

<%-- これはJSPコメントです --%>

XMLのコメントアウト

XMLでは、HTMLと同じく<!-- -->を使用します。

<!-- これはXMLコメントです -->
<note>
  <to>Tove</to>
  <from>Jani</from>
</note>

その他の言語のコメントアウト

SQL

SQLでは、--または/* */を使用します。

-- これはSQL行コメントです
SELECT * FROM users;
/* これはSQLブロックコメントです */

YAML

YAMLでは、#を使用します。

# これはYAMLコメントです
name: John
age: 30

Markdown

Markdownではコメント機能が標準ではありませんが、HTML形式のコメントを利用できます。

<!-- これはMarkdown内のコメントです -->
# 見出し

Python（Webフレームワークで使用）

Pythonでは、#とブロックコメント（厳密には文字列リテラル）を使用します。

# これは行コメントです
"""
これはブロックコメントのように見える文字列リテラルです。
"""
print("Hello, World!")

Shellスクリプト（Bash）

Web関連のデプロイや設定スクリプトでは、#を使用します。

# これはShellスクリプトのコメントです
echo "Hello, World!"

まとめ

Web開発に関連するさまざまな言語でのコメントアウト方法を紹介しました。
それぞれの言語に適したコメントアウト方法を理解しコードの可読性やメンテナンス性を高めましょう。