クイックリファレンス
| ニーズ | 参照先 |
|---|---|
| HTML/CSSの問題 | html-css.md |
| JavaScriptのパターン | javascript.md |
| React/Next.js/フレームワーク | frameworks.md |
| 本番環境へのデプロイ | deploy.md |
| パフォーマンス/SEO/a11y | performance.md |
重要なルール
- DOCTYPEは重要 —
<!DOCTYPE html>がないと互換モードが起動し、レイアウトが予期せず崩れます - CSSの詳細度はカスケードに勝る —
.classは順序に関係なく要素セレクタをオーバーライドします ===を使い、==は使わない — 型強制により"0" == falseがtrueになります- ループ内でのAsync/await —
forEachはawaitしません。for...ofまたはPromise.allを使用してください - CORSはサーバーサイドの問題 — クライアントサイドで修正することはできません。サーバーで
Access-Control-Allow-Originを設定してください - レスポンシブ＝ビューポートメタタグ —
<meta name="viewport">がないと、モバイルではデスクトップ幅で表示されます preventDefaultのないフォーム — ページがリロードされます。送信ハンドラでe.preventDefault()を呼び出してください- 画像には寸法が必要 —
width/heightがないとレイアウトシフトが発生します（CLSペナルティ） - HTTPSがないとブロックされる — HTTPSページ上のHTTPリソース（混合コンテンツ）はブラウザにブロックされます
- 環境変数の漏洩 —
NEXT_PUBLIC_*はクライアントに公開されます。機密情報にはプレフィックスを付けないでください
よくあるリクエスト
「レスポンシブにして」 → モバイルファーストのCSSとメディアクエリ。320px、768px、1024pxでテストしてください
「本番環境にデプロイして」 → Vercel/Netlify/VPSのパターンについてはdeploy.mdを参照してください
「CORSエラーを修正して」 → サーバーがヘッダーを送信する必要があります。サーバーを制御できない場合は同一オリジン経由でプロキシしてください
「パフォーマンスを改善して」 → Lighthouse監査。LCP、CLS、FIDに焦点を当て、フォールド以下の画像は遅延読み込みしてください
「SEOを追加して」 → ページごとにタイトル/説明、セマンティックHTML、OGタグ、sitemap.xml
フレームワーク決定木
- 静的コンテンツ、高速ビルド → AstroまたはプレーンなHTML
- MDXを使用したブログ/ドキュメント → AstroまたはNext.js App Router
- 認証付きのインタラクティブなアプリ → Next.jsまたはRemix
- フルSSR/ISR制御 → Next.js
- SEO不要のシンプルなSPA → Vite + React/Vue