AIによるVibe Coding品質チェックする仕組み｜画像生成と会話するAIの魅力と可能性
https://note.com/chat_gpt777/n/nbbcb84f0dc47
素人でも生成AIを使ってソフトウェアを開発することが出来る。生成AIとのやり取りで動くものが作れる。でもここで完成だと安心するのは少し早い。実際に動くから良いとは言えない。特に脆弱性をつかれてウィルスを仕込むなど、あってはならない。使っている言語の文法、脆弱性、不具合、バグ等のチェックをしておいた方が良い。その為にGeminiのGemという仕組みを使ってコードをチェックするものを作った。バグを発見してくれる。そして出てきた内容によってコードを修正して貰う。そんな仕組みを作った。文法チェックだけならVScodeでもかなりのことは出来るが、javascriptは難しい。
バイブ・コーディング（Vibe Coding）とは、
厳密な設計や仕様書よりも「感覚・ノリ・直感」を重視してコードを書く開発スタイルの俗称です。
もともとは開発者コミュニティのスラング的な表現で、特定の正式手法名ではありません。
生成AIで「品質・不具合・脆弱性チェック機構」のまとめ
・対象コードの明確化
HTML、CSS、JavaScriptのどの範囲を検査するかを最初に定義し、入力形式（貼り付け・ファイル読み込み等）を統一する。
・構文エラー検出
HTMLのタグ不整合、CSS文法ミス、JavaScriptの未定義変数や構文エラーを自動で検出できること。
・実行時バグの予測
null参照、未処理Promise、無限ループ、イベント多重登録など、実行時に不具合になりやすい箇所を静的に警告できること。
・セキュリティ脆弱性の検査
XSS（innerHTML等）、eval使用、document.write、外部入力の未サニタイズなど、典型的なWeb脆弱性パターンを重点検出すること。
・パフォーマンス問題の検出
不要な再描画、重いループ、過剰なDOM操作、巨大CSSセレクタなど、動作速度に影響する記述を警告できること。
・アクセシビリティ確認
imgのalt、labelとinputの関連、見出し階層、キーボード操作対応など、基本的なアクセシビリティ要件をチェックできること。
・レスポンシブ／モダン対応確認
固定幅依存、古いHTMLタグ使用、FlexboxやGrid未使用など、現代Web標準への適合度を評価できること。
・保守性・可読性評価
関数の肥大化、命名の不明瞭さ、コメント不足、!important多用、重複コードなど、長期運用リスクを指摘できること。
・結果の分かりやすい可視化
危険度（Critical／High／Medium／Low）、問題箇所、理由、修正例、総合スコアを一目で理解できる形式で出力すること。
・自動修正提案機能
検出だけで終わらず、より安全でモダンな修正コード例を生成AIが提示できること。
