generic-static-code-reviewer

静的サイトコードレビューアー

HTML/CSS/JS コードを、本番品質基準に照らしてレビューします。

拡張元： 汎用コードレビューアー - コードレビューの方法論、P0/P1/P2 の優先度体系、判断基準の全容については、ベースとなるスキルをお読みください。

コミット前チェックリスト

# Local testing (cross-platform options)
python -m http.server 8000   # Windows
python3 -m http.server 8000  # macOS/Linux
npx serve .                  # Node.js (recommended - all platforms)

# Visual inspection
# - Test in Chrome, Firefox, Safari
# - Test at 375px, 768px, 1024px
# - Lighthouse audit

• 視覚的な確認に合格している
• 主要なすべてのブラウザーで動作する
• すべてのブレークポイントでレスポンシブに表示される
• Lighthouse のパフォーマンススコアが 95 以上

静的サイト固有のチェック

ビルドツール不要の確認

ファイルはそのまま配信できる必要があります。

• 純粋な .html ファイル（テンプレートなし）
• 純粋な .css ファイル（Sass/Less なし）
• 純粋な .js ファイル（バンドル／トランスパイルなし）
• 本番環境で node_modules が不要

ページサイズの目標（P1）

目標	最大サイズ
HTML	< 5KB
CSS	< 10KB
JavaScript	< 5KB
合計（画像を除く）	< 50KB
画像（各ファイル）	< 500KB

HTML の品質

<header>
  <nav><a href="#">Link</a></nav>
</header>
<main>
  <article>
    <h1>Title</h1>
    <p>Content</p>
  </article>
</main>
<footer></footer>


<img src="image.jpg" alt="Description" />
<br />
<input type="text" />

CSS の品質

/* CSS custom properties for theming */
:root {
  --bg-primary: #000000;
  --text-primary: #ffffff;
  --accent: #00ff00;
}

/* Mobile-first responsive */
.container {
  padding: 1rem;
}

@media (min-width: 768px) {
  .container {
    padding: 2rem;
  }
}

/* Avoid !important - signals specificity problems */

JavaScript の品質

// ES6+ syntax (modern browsers support it)
const items = document.querySelectorAll(".item");
const handler = (e) => console.log(e.target);

// Event delegation (preferred)
document.body.addEventListener("click", (e) => {
  if (e.target.matches(".button")) {
    handleClick(e.target);
  }
});

// No jQuery dependencies
// No framework overhead

Lighthouse の要件（P1）

指標	目標
パフォーマンス	95 以上
アクセシビリティ	90 以上
ベストプラクティス	100
SEO	100
最初のコンテンツ描画	< 1s

関連項目

• 汎用コードレビューアー - ベースとなる方法論
• コードレビュー基準 - 要件の全容
• デザインパターン - UI の一貫性