generic-static-feature-developer

静的サイト機能開発者

ミニマリストな静的サイトの機能開発をガイドします。

拡張元： 汎用機能開発者 - 開発ワークフロー、スコープの評価、構築と統合の判断については、基本スキルをお読みください。

静的サイトのアーキテクチャ

一般的な構成

project/
├── index.html          # Main page
├── style.css           # All styles
├── script.js           # All interactions
├── assets/             # Images, icons
├── .github/workflows/  # Automation (optional)
└── docs/               # Documentation

ビルドツールを使わない方針

編集 → 保存 → デプロイ（これだけです）

• 純粋な HTML（テンプレートエンジンなし）
• 純粋な CSS（Sass／Less／PostCSS なし）
• 純粋な JS（バンドルなし、トランスパイルなし）
• 本番環境に node_modules を置かない

開発ワークフロー

ローカルテスト

# Start local server (cross-platform options)
python -m http.server 8000   # Windows
python3 -m http.server 8000  # macOS/Linux
npx serve .                  # Node.js (recommended - all platforms)
# Visit http://localhost:8000

コミット前

1. Chrome、Firefox、Safari のサポート状況に合わせてマークアップと CSS を確認します
2. 375px、768px、1024px のブレークポイントでレイアウトを確認します
3. ユーザーから依頼された場合に限り、ブラウザー、Lighthouse、またはスクリーンショットによるチェックを実行します

プログレッシブエンハンスメント

方針

1. コンテンツ優先 - CSS／JS がなくても動作します
2. CSS で強化 - 対応ブラウザーではスタイルが向上します
3. JS で強化 - JS が有効なブラウザーではインタラクティブに動作します

パターン例

<details>
  <summary>Menu</summary>
  <nav>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </nav>
</details>

// Enhancement: Custom animation when JS available
if ("IntersectionObserver" in window) {
  // Progressive enhancement
}

バニラ JavaScript のパターン

イベント委譲

// One listener for many elements
document.body.addEventListener("click", (e) => {
  if (e.target.matches(".menu-toggle")) {
    toggleMenu();
  }
  if (e.target.matches(".close-btn")) {
    closeModal();
  }
});

DOM の準備完了

// Modern approach
document.addEventListener("DOMContentLoaded", () => {
  initApp();
});

// Or: script at end of body (no event needed)

クラスの切り替え

// Toggle visibility
element.classList.toggle("visible");

// Add/remove
element.classList.add("active");
element.classList.remove("active");

自動化（GitHub Actions）

シンプルなデプロイワークフロー

# .github/workflows/deploy.yml
name: Deploy
on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./

画像の最適化

# Optimize before committing
# PNG
pngquant --quality=65-80 image.png

# JPEG
jpegoptim --max=80 image.jpg

# WebP conversion
cwebp -q 80 image.png -o image.webp

機能チェックリスト

開始前：

• プロジェクトの制約について CLAUDE.md を読む
• 再利用できる既存のパターンを確認する
• パフォーマンス予算を把握する

開発中：

• 一度に変更するのは一つだけにする
• 複数のブラウザーでテストする
• レスポンシブ対応をテストする
• ページの容量を予算内に収める

完了前：

• Lighthouse のパフォーマンススコアが 95 以上
• すべてのブレークポイントをテスト済み
• 比較用のスクリーンショットを用意
• ドキュメントを更新

パフォーマンス目標

指標	目標
合計容量	< 50KB
First Contentful Paint	< 1s
Lighthouse パフォーマンス	95+

関連項目

• 汎用機能開発者 - ワークフロー、判断
• コードレビュー基準 - 品質要件
• デザインパターン - UI パターン