GitHub & Pull Request

コードのSNS。レビュー文化とCI/CDの基盤。

コードのSNS (Social Media for Code)

GitHubは「コードのSNS」です。 **プルリクエスト（PR）** = 投稿（これをmainに入れてください！） **レビュー** = いいね、コメント、リプライ **マージ** = 採用（フォロワーが増える ← チームからの信頼） **Actions** = 自動バックアップ・自動投稿（CI/CD）

用語集

Pull Request

マージ提案。レビュー依頼。

レビュー

コードの確認とフィードバック。

継続的インテグレーション。自動テスト。

Actions

GitHub上で動くワークフロー自動化。

PRワークフロー

プルリクエストを使った開発フローの基本。

1
# 1. Create feature branch and make changes
2
git switch -c feature/user-profile
3
# ... edit files ...
4
git add .
5
git commit -m "feat: Add user profile page"
6

7
# 2. Push to GitHub
8
git push origin feature/user-profile
9

10
# 3. Open Pull Request on GitHub
11
# (via browser or gh CLI)
12

13
# 4. After review approval, merge on GitHub
14
# 5. Pull the merged changes locally
15
git switch main
16
git pull origin main

実行結果

remote: Create a pull request for 'feature/user-profile' on GitHub by visiting:
remote:   https://github.com/user/repo/pull/new/feature/user-profile

良いPRの書き方

レビュアーが理解しやすいPRを書くことで、マージまでの時間が短縮されます。

Bad

1
## Bug fix
2

3
Fixed stuff

Good

1
## Summary
2
Add user profile page with avatar upload
3

4
## Changes
5
- Add ProfileForm component
6
- Add avatar upload with size validation
7
- Add unit tests for image resizing
8

9
## How to Test
10
1. Run `npm run dev`
11
2. Navigate to /settings/profile
12
3. Upload an image (max 5MB)
13

14
## Screenshots
15
(Attach before/after screenshots)

Tip: .github/PULL_REQUEST_TEMPLATE.md を作成すると、PRテンプレートが自動適用される。

GitHub Actions (CI/CD)

pushやPR作成時に自動でテストやビルドを実行する。

1
# .github/workflows/ci.yml
2
name: CI
3

4
on:
5
  push:
6
    branches: [main]
7
  pull_request:
8
    branches: [main]
9

10
jobs:
11
  test:
12
    runs-on: ubuntu-latest
13
    steps:
14
      - uses: actions/checkout@v4
15

16
      - name: Setup Node.js
17
        uses: actions/setup-node@v4
18
        with:
19
          node-version: '20'
20
          cache: 'npm'
21

22
      - name: Install dependencies
23
        run: npm ci
24

25
      - name: Run tests
26
        run: npm test
27

28
      - name: Build
29
        run: npm run build

GitHub上での表示

✓ CI / test (pull_request)
  ✓ Setup Node.js (2s)
  ✓ Install dependencies (15s)
  ✓ Run tests (8s)
  ✓ Build (25s)

合格ライン

☐ PRを作成してマージできる

☐ 良いPRテンプレートを書ける

☐ GitHub Actionsのワークフローを読める

☐ レビューコメントを適切に書ける

参考リンク

GitHub Docs - Pull Requests

GitHub Actions Documentation

GitHub Skills — インタラクティブ学習

演習課題

課題1: 初めてのPR

自分のリポジトリでブランチを作成し、プルリクエストを開いてみてください。

課題2: PR Description

Summary, Changes, How to Test を含む詳細な PR 説明文を書いてみてください。