なぜ危ないのか
HTMLコメント（`<!-- -->`）はブラウザのレンダリング画面には一切表示されませんが、ページのソースコードをCtrl+Uで表示したり、DevToolsのElementsパネルを開いたりすれば誰でも読めます。AIがコードを生成する際、プロンプトに含まれていた社内仕様・API仕様・個人名などをコメントとして出力するケースがあるため、生成後の確認が欠かせません。
「コメントは表示されないから安全」という誤解が最もよくある見落としの原因です。特にAIは生成物の説明として丁寧にコメントを書く傾向があり、`<!-- TODO: 本番ではAPIキーをXXXXに変更する -->`のような開発メモがそのまま残っていた事例も報告されています。外部レビュアーがソースを見れば即座に発見できます。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
ソースで見る場所
HTMLファイルをテキストエディタで開き、`<!--`で始まる行をすべて確認します。VS Codeのフォルダ内検索（Ctrl+Shift+F）で`<!--`を検索すると、複数ファイルにまたがるコメントを一覧で確認できます。特にパスワード、APIキー、メールアドレス、電話番号のような文字列が含まれていないか重点的に見てください。
ページが複数のHTMLファイルに分かれている場合は、`grep -rn '<!--' ./html/ | grep -i 'key\.\|token\|password\|secret\|todo'`のようなコマンドでキーワード検索すると効率的です。AIが生成したコードはコメントが多い傾向があるため、全コメントを通し読みする習慣をつけることを推奨します。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
安全に共有する設定
公開前には`sed -i 's/<!--.*-->//g' index.html`などのコマンドで一括削除する方法がありますが、複数行コメントには対応しないため、手動確認との併用が必要です。ギガサイト便でプレビューURLを発行する場合も、アップロード前にコメントを削除したファイルを準備してください。
HTML minifierツール（html-minifier-terserなど）を使うと、コメントの削除と同時にHTMLの圧縮も行えます。`html-minifier-terser --remove-comments --collapse-whitespace -o output.html input.html`のように`--remove-comments`フラグを付けて実行すると、条件付きコメント（`<!--[if IE]>`）以外のコメントをすべて除去できます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
再発防止ルール
AIへのプロンプトに「出力HTMLにHTMLコメントを含めないこと」と明示的に指示を加えます。ただしAIはこの指示を忘れることがあるため、生成後のgrepスキャンを必須ステップとして自動化することも重要です。
チームでの運用であれば、HTMLをリポジトリにコミットする前にpre-commitフックで`grep -r '<!--' ./`を実行し、コメントが検出された場合は差分を表示してコミットを一時停止するスクリプトを設置します。誤検知を避けるために、許可されたコメント（著作権表示など）のホワイトリストも合わせて整備しておくと便利です。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
よくある質問
HTMLの条件付きコメント（IE向けの`<!--[if IE]>`）は削除すべきですか？
IE向け条件付きコメントは現代のブラウザでは機能しないため、通常は削除して問題ありません。ただし社内システムがIEを使う環境で共有する場合は、削除前に動作確認が必要です。
コメントを全削除すると、後でAIに追加修正を依頼するとき文脈が失われませんか？
共有用と開発用でファイルを分けることで解決します。開発中はコメント付きのファイルをローカルに保持し、共有直前にコメントを除去したコピーを作成してアップロードしてください。
FigmaからエクスポートしたHTMLにも秘密情報が含まれることはありますか？
Figmaエクスポートには通常、レイヤー名やコンポーネント名がHTMLのclass名やコメントに含まれることがあります。社内の命名規則や未公表のデザイン仕様が漏れる可能性があるため確認が必要です。