目次
概要
プログラムの中に、実行処理には影響を与えないメモを残す機能を「コメント」と呼びます。 処理内容の補足説明や、コードの一部分を一時的に無効化（コメントアウト）してデバッグを行う際に必須となる機能です。 本記事では、1行コメント // と複数行コメント /* ... */ の使い分け、および実務で推奨されるコメントの書き方を解説します。
仕様（入出力）
- 入力: JavaScriptソースコード内に記述されたコメント記法
- 出力:
- コメント部分はブラウザの解釈から除外される（実行されない）
- 有効なコード部分のみが実行され、結果がコンソールに出力される
基本の使い方
JavaScriptには大きく分けて2種類のコメント記述方法があります。
- シングルライン（1行）コメント:
//から行末までをコメントとして扱います。 - マルチライン（複数行）コメント:
/*から*/で囲まれた範囲すべてをコメントとして扱います。行の途中や、複数行にまたがる記述が可能です。
コード全文（HTML / JavaScript）
HTML (index.html)
検証用のコンソール表示用HTMLです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>コメントアウトのデモ</title>
<script src="comment-demo.js" defer></script>
</head>
<body>
<div class="container">
<h1>コンソールログを確認してください</h1>
<p>コメントアウトされたコードは実行されず、無視されます。</p>
</div>
</body>
</html>
JavaScript (comment-demo.js)
ゲームのダメージ計算を想定したコードです。変数の意味を説明したり、テスト的に特定の計算式を無効化したりする例を示します。
/**
* プレイヤーの攻撃力を計算するデモ
* 複数行コメントは、ファイル冒頭の説明や
* 関数仕様の記述によく使われます。
*/
const calculateDamage = () => {
// 1行コメント: 基礎パラメーターの設定
const baseAttack = 250; // 剣の攻撃力
const strengthBonus = 1.5; // 腕力補正倍率
// 通常の計算処理
const rawDamage = baseAttack * strengthBonus;
/* 複数行コメントの例：
ここは一時的なメモ書きです。
将来的に「属性ボーナス」を追加する予定ですが
現在は未実装のためコメントにしています。
*/
// 行内の一部だけをコメントアウト（無効化）するテクニック
// + 500 のボーナスダメージを一時的にオフにしています
const totalDamage = 1000 + 2000 /* + 500 */ + 300;
console.log(`基礎ダメージ: ${rawDamage}`);
console.log(`最終ダメージ（調整中）: ${totalDamage}`);
};
// 実行
calculateDamage();
カスタムポイント
- TODOコメント: 開発中のメモとして、
// TODO: 次回ここを修正するや// FIXME: バグありといったプレフィックスを付けると、エディタのアドオン機能などでタスク管理がしやすくなります。 - JSDoc形式:
/** ... */（アスタリスクが2つ）で書き始めると、ドキュメント生成ツールやエディタの補完機能に対応したリッチなコメント（JSDoc）になります。関数やクラスの説明にはこの形式が標準です。
注意点
- コードの冗長化:
const a = 1; // 1を代入のように、コードを見れば明らかな内容をコメントにするのは避けましょう。コード自体で意図が伝わらない複雑なロジックや「なぜそう書いたか」という理由を書くのが適切です。 - コメントのメンテナンス忘れ: コードを修正したのにコメントが古いまま残っていると、後で読んだ人が混乱します。コードを変更する際は、必ず関連するコメントも更新してください。
- 機密情報: HTMLやJS内のコメントは、ブラウザの「ページのソースを表示」機能で誰でも閲覧可能です。パスワードやAPIキー、社内事情などをコメントに残さないでください。
応用
コードの一時無効化（デバッグ）
バグの原因を探る際、怪しい行を削除するのではなくコメントアウトして一時的に止める手法は頻繁に使われます。
const user = {
name: "Alice",
age: 24,
// isAdmin: true, // 管理者権限を一時的にオフにして動作確認
};
まとめ
コメントは「未来の自分」や「チームメンバー」へのメッセージです。// は行末の説明や簡易的な無効化に、/* ... */ は長文の解説や文中の一時除外にと、目的に応じて使い分けることで、保守性の高いコードを書くことができます。
