コードコメントの除去 — JS、CSS、HTMLからコメントを削除
JavaScript、CSS、HTMLにおけるコメント除去の仕組みを解説。安全に除去できるコメント、ライセンスコメントの保持方法、ファイルサイズへの影響を理解します。
Techniques
詳細な説明
コードからのコメント除去
コメント除去は、最もシンプルかつ効果的な圧縮ステップの1つです。コメントは開発者の可読性のためだけに存在し、実行時への影響はゼロなので、プロダクションビルドから安全に削除できます。
JavaScriptのコメント
JavaScriptには2つのコメント構文があります：
// 単一行コメント
/*
* 複数行
* コメントブロック
*/
/** JSDocドキュメンテーションコメント */
3つすべてが圧縮時に除去されます。難しい部分は、似た構文との区別です：
- 正規表現：
/pattern/gは/で始まりますがコメントではありません。 - 文字列内のURL：
"https://example.com"は//を含みますがコメントではありません。 - テンプレートリテラル： バッククォート文字列は保持すべき
//や/*を含む場合があります。
適切なコメント除去ツールはこれらのケースを正しく処理するためにパーサーを使用します（正規表現ではなく）。
CSSのコメント
CSSは複数行コメントのみ使用します：
/* これはCSSのコメントです */
/*!
* これはライセンスコメントです — 感嘆符に注目。
* 多くの圧縮ツールはデフォルトでこれを保持します。
*/
/*! */の規約は、圧縮後もコメントを残すべきことを示します。これはオープンソースのライセンスコンプライアンス（例：MITライセンスヘッダー）に重要です。
HTMLのコメント
<!-- 標準のHTMLコメント -->
<!--[if IE 9]>
<link rel="stylesheet" href="ie9.css">
<![endif]-->
標準コメントは除去されますが、条件付きコメント（レガシーIEサポート用）はブラウザサポートの要件に応じて保持する必要がある場合があります。
ライセンスコメントの保持
ほとんどのビルドツールはライセンスコメントを保持するオプションを提供しています：
- Terser：
comments: /^!/またはcomments: "some"は@licenseや!を含むコメントを保持。 - cssnano：
discardComments: { except: /^!/ }は/*! */コメントを保持。 - webpack：
LicenseWebpackPluginはライセンスを別ファイルに抽出。
サイズへの影響
コメントはソースファイルサイズの**10-30%**を占めることがよくあります。特にドキュメントが充実したコードベースで顕著です。JSDocが多用されたライブラリでは、実際のコードよりコメント文字の方が多い場合もあります。
ユースケース
コメントの除去はプロダクションデプロイに不可欠です。ファイルサイズの削減に加えて、コメントの削除はTODOノート、開発者名、内部APIリファレンス、デバッグヒントなど、公開すべきでない潜在的に機密性の高い情報も除去します。