Issue 駆動開発
概念Issue 駆動開発とは、すべての作業を GitHub Issue から始める開発スタイルです。 「なぜこの変更をするのか」を Issue に記録してからブランチを切ることで、 変更の意図が明確になり、チーム内のコミュニケーションが円滑になります。
Issue 駆動開発の基本フロー
## 変更内容 ログインボタンの onClick に正しいハンドラを設定しました。 Closes #42 ← このキーワードで Issue #42 がマージ時に自動クローズ
よくある事例 5 選
実際の開発現場でよく立てられる Issue の種類と、対応するブランチ・コミット例を紹介します。
ログインボタンが押せない
Issue 本文
## バグの内容 トップページのログインボタンをクリックしても何も起きない。 ## 再現手順 1. トップページ（/）にアクセス 2. 「ログイン」ボタンをクリック 3. 何も起きない ## 期待する動作 /login にリダイレクトされる ## 環境 - ブラウザ: Chrome 124 - OS: macOS 14
ブランチ名
fix/login-button-not-working コミット履歴
fix: ログインボタンの onClick ハンドラを修正 test: ログインボタンのクリックテストを追加 PR タイトル例
ログインボタンが押せない (Closes #01)
ダークモードを追加してほしい
Issue 本文
## 機能の概要 システム設定に合わせて自動でダークモード／ライトモードを切り替えたい。 ## 背景・理由 夜間に使うとき画面が眩しいという声が多い。 ## 受け入れ条件 - [ ] OS のダークモード設定を自動検知する - [ ] 手動トグルボタンでも切り替えられる - [ ] 設定がブラウザに記憶される
ブランチ名
feature/dark-mode コミット履歴
feat: CSS変数でカラーテーマを定義 feat: ダークモードのスタイルを追加 feat: テーマ切り替えトグルを実装 feat: localStorage でテーマ設定を保持 PR タイトル例
ダークモードを追加してほしい (Closes #02)
セットアップ手順が古い
Issue 本文
## 問題点 README の手順通りに進めても v3 以降では動かない。 `npm install` が `pnpm install` に変わっているが記載が古いまま。 ## 修正が必要な箇所 - README.md の「インストール」セクション - CONTRIBUTING.md の「開発環境構築」セクション
ブランチ名
docs/update-setup-guide コミット履歴
docs: README のインストール手順を pnpm 対応に更新 docs: CONTRIBUTING の開発環境構築手順を修正 PR タイトル例
セットアップ手順が古い (Closes #03)
商品一覧ページの読み込みが遅い
Issue 本文
## 問題 商品一覧ページの初期表示に 5 秒以上かかる。 ## 計測結果 - API レスポンス: 200ms - 画像読み込み: 4800ms（未圧縮の画像を 80 枚一気に読み込んでいる） ## 改善案 - 画像を WebP に変換・圧縮 - 遅延読み込み（lazy loading）を適用 - ページネーション or 無限スクロール導入
ブランチ名
perf/product-list-images コミット履歴
perf: 商品画像を WebP フォーマットに変換 perf: img タグに loading="lazy" を追加 feat: 商品一覧にページネーションを追加 PR タイトル例
商品一覧ページの読み込みが遅い (Closes #04)
認証ロジックが各ページに散在している
Issue 本文
## 現状の問題 ログイン済みチェックのコードが dashboard.js・profile.js・settings.js それぞれに同じ内容でコピーされている。 ## 目標 共通の `useAuth` フックに抽出して各ページから呼び出す形に整理する。 ## 影響範囲 - src/pages/dashboard.js - src/pages/profile.js - src/pages/settings.js
ブランチ名
refactor/extract-auth-hook コミット履歴
refactor: useAuth フックを src/hooks/ に作成 refactor: dashboard から認証ロジックを useAuth に移行 refactor: profile・settings も useAuth を使うよう修正 test: useAuth フックのユニットテストを追加 PR タイトル例
認証ロジックが各ページに散在している (Closes #05)
Issue を上手に使うコツ
ブランチ名に Issue 番号を入れる
概念fix/42-login-button のように番号を含めると、ブランチと Issue の対応が一目でわかる。
ラベルで分類する
用語bug / enhancement / documentation / good first issue などのラベルで Issue を整理すると検索・優先度付けが楽になる。
Assignee を設定する
用語誰が担当するかを Assignee に設定することで、作業の重複や放置を防ぐ。
小さく分割する
概念「ユーザー管理機能を作る」より「ユーザー登録フォームを作る」のように 1 Issue = 1 タスクにする方が進捗が見えやすい。
Issue でコミュニケーションする
概念実装方針の議論や進捗報告は Issue のコメントに残すと、あとから経緯を追いやすい。
Closes キーワードを使う
用語PR 本文に Closes #番号 と書くとマージ時に Issue が自動クローズされる。Fix / Resolve でも同様。