初めてのGit利用ハンズオン（ペア実習版）

GitHub

Posted at 2025-09-08

概要

対象者: GitHubアカウントは持っているが、実際の利用は初めての人
所要時間: 2.5時間
目標: GitHubを使ったチーム開発の基本ワークフローを習得する

事前準備

必要なツール

GitHubアカウント（既存）✅
Git（最新版）※ 要インストール
GitHub Desktop（推奨）※ 要インストール
VSCode（エディタ）※ 要インストール

GitHubの基本画面に慣れる（10分）

Step1: GitHubにログインして画面確認

https://github.com にアクセス
既存アカウントでログイン
画面構成の確認:
- 上部ナビゲーション：検索バー、+ボタン、プロフィール
- 左サイドバー：Recent Repositories、Teams
- 中央：Discover repositories、Recent activity

Step2: プロフィールページの確認

右上のプロフィール画像をクリック → 「Your profile」
現在の状態を確認:
- プロフィール写真（デフォルトのままでもOK）
- Bio（自己紹介）は空欄
- Repositories：0個または少数
- Contribution graph：ほぼ空白

Step3: GitHubの主要機能を知る

Repository（リポジトリ）: プロジェクトのコード保管場所
Issue: バグ報告や機能要望の管理
Pull Request: コード変更の提案・レビュー
Fork: 他人のプロジェクトをコピー
Star: お気に入り登録

役割分担

PersonA: リポジトリオーナー（プロジェクトリーダー役）
PersonB: コラボレーター（チームメンバー役）

事前確認事項

両者のGitHubユーザー名を互いに確認・メモ
お互いのプロフィールページを見る
「Follow」し合う（任意）

Phase1: 初回環境構築（25分）

全員共通: 必要ツールのインストール

Git本体のインストール（5分）

https://git-scm.com/ にアクセス
「Download for Windows/Mac」をクリック
ダウンロード後、インストール実行
設定は全てデフォルトでOK（「Next」を連打）

GitHub Desktopのインストール（5分）

https://desktop.github.com/ にアクセス
「Download for Windows/Mac」をクリック
インストール後、起動
「Sign in to GitHub.com」でログイン
名前・メールアドレスを設定（GitHubアカウントと同じに）

VSCodeのインストール（5分）※未導入の場合

https://code.visualstudio.com/ にアクセス
ダウンロード・インストール
起動後、拡張機能「Git Graph」をインストール（推奨）

PersonA の作業: 初回リポジトリ作成（10分）

Step1: GitHubで初めてのリポジトリ作成

GitHubにログイン
左上の「Create repository」または右上の「+」→「New repository」

詳細設定:

Repository name: my-first-team-project
Description: GitHub初回利用のチーム開発練習プロジェクト
Public ☑️（学習用なので公開）
Add a README file ☑️
Add .gitignore: Java を選択
Choose a license: MIT License

「Create repository」をクリック

Step2: リポジトリの基本設定

作成直後の画面で「Settings」タブをクリック
左メニューで各項目を確認:
- 「General」: リポジトリの基本情報
- 「Collaborators and teams」: メンバー管理
- 「Branches」: ブランチ保護設定
今は設定変更せず、場所だけ確認

Step3: コラボレーターの招待

「Settings」→「Collaborators and teams」
「Add people」ボタンをクリック
PersonBのGitHubユーザー名を入力
権限レベル: 「Write」を選択（コード変更権限）
「Add [username] to this repository」

PersonB の作業: 招待承認とリポジトリ確認（5分）

Step1: 招待の確認・承認

GitHubの**右上ベルアイコン（通知）**をクリック
PersonAからの招待通知を確認
「Accept invitation」をクリック
権限確認: リポジトリページで「Settings」タブが見えることを確認

Step2: リポジトリの確認

リポジトリページを開く
ファイル構成を確認:
- README.md（プロジェクト説明）
- .gitignore（Javaの除外ファイル設定）
- LICENSE（MITライセンス）
「Code」ボタンの横の**緑色の数字（コミット数）**をクリック
コミット履歴を確認（現在は1つだけ「Initial commit」）

Phase2: ローカル環境でのGit操作開始（20分）

両者共通: リポジトリをローカルにクローン

GitHub Desktopを使ったクローン（10分）

GitHub Desktopを開く
「File」→「Clone repository」
「GitHub.com」タブで my-first-team-project を選択
Local pathを確認・変更:
- Windows: C:\Users\[ユーザー名]\Documents\GitHub\
- Mac: /Users/[ユーザー名]/Documents/GitHub/
「Clone」をクリック
成功確認: フォルダが作成され、ファイルが存在することを確認

VSCodeでプロジェクトを開く（5分）

VSCodeを開く
「File」→「Open Folder」
クローンした my-first-team-project フォルダを選択

左のファイルエクスプローラーで確認:

my-first-team-project/
├── README.md
├── .gitignore
└── LICENSE

VSCodeでGit状態を確認（5分）

Ctrl+Shift+G（Macは Cmd+Shift+G）でソース管理を開く
現在の状態を確認:
- ブランチ: main
- 変更: なし
- 同期状態: 最新
下部ステータスバーでブランチ名「main」を確認

Phase3: 初回のファイル作成とコミット（30分）

PersonA の作業: プロジェクト構造作成

Step1: README.mdの更新（10分）

VSCodeで README.md を開く
内容を以下に書き換え:

# My First Team Project 🚀

GitHubを使ったチーム開発の練習プロジェクトです。

## チームメンバー
- **PersonA**: [@PersonAのユーザー名](https://github.com/PersonAのユーザー名) - プロジェクトリーダー
- **PersonB**: [@PersonBのユーザー名](https://github.com/PersonBのユーザー名) - 開発メンバー

## プロジェクト目標
- [x] GitHubリポジトリの作成
- [x] チームメンバーの招待
- [ ] Java電卓アプリの開発
- [ ] ブランチを使った協働開発
- [ ] プルリクエストでのコードレビュー

## 開発予定機能
- [ ] 足し算（PersonA担当）
- [ ] 引き算（PersonB担当）
- [ ] 掛け算（PersonA担当）
- [ ] 割り算（PersonB担当）

## 学習する技術
- Git & GitHub
- Java
- チーム開発ワークフロー
- コードレビュー

## 実行方法
```bash
# 後で追加予定

開発ルール

新機能は必ずブランチを作成
プルリクエストで変更を提案
レビュー承認後にマージ
こまめなコミットを心がける

最終更新: [今日の日付]


#### Step2: Javaプロジェクト構造の作成（10分）
**フォルダ構造を作成:**

my-first-team-project/
├── README.md
├── .gitignore
├── LICENSE
├── src/
│ └── main/
│ └── java/
│ └── Calculator.java
└── docs/
└── development-log.md


**VSCodeで実行:**
1. 左のエクスプローラーで右クリック→「New Folder」
2. `src` フォルダ作成
3. `src` 内に `main` フォルダ作成
4. `main` 内に `java` フォルダ作成
5. `docs` フォルダを作成

#### Step3: 初回Javaファイル作成（10分）
**Calculator.java** を作成:

```java
/**
 * チーム開発で作る電卓アプリ
 * GitHub初回利用者向けハンズオン用
 * 
 * @author PersonA, PersonB
 * @version 1.0
 */
public class Calculator {
    
    /**
     * アプリケーションのメインメソッド
     * @param args コマンドライン引数
     */
    public static void main(String[] args) {
        System.out.println("=== GitHub チーム開発 電卓アプリ ===");
        System.out.println("開発開始！");
        
        // TODO: PersonAが足し算機能を実装予定
        // TODO: PersonBが引き算機能を実装予定
        
        System.out.println("=== 開発完了まで頑張ろう！ ===");
    }
    
    // 今後、計算メソッドをここに追加していく予定
}

development-log.md を作成:

# 開発ログ

## 2025年9月8日
- プロジェクト開始
- PersonA: プロジェクト構造作成
- PersonB: （次回作業予定）

## 学習メモ
- GitHubでのリポジトリ作成方法を学習
- README.mdの書き方を習得
- Javaプロジェクトの基本構造を理解

## 次回の予定
- PersonA: 足し算機能の実装
- PersonB: 引き算機能の実装

PersonA: 初回コミット・プッシュ（GitHub Desktop使用）

Step1: GitHub Desktopで変更確認（5分）

GitHub Desktopを開く
左側「Changes」タブで変更ファイルを確認:
- ✅ README.md（modified）
- ✅ src/main/java/Calculator.java（new file）
- ✅ docs/development-log.md（new file）
各ファイルをクリックして変更内容を確認
緑色の「+」が新規追加、黄色の「M」が修正を示す

Step2: 初回コミット（5分）

左下のコミット欄に入力:

Summary: feat: プロジェクト初期構造を作成

Description:

- README.mdを詳細に更新
- Javaプロジェクト構造を作成
- Calculator.javaの基本フレームワークを実装
- 開発ログファイルを追加

次回: 足し算機能の実装を予定

「Commit to main」ボタンをクリック

Step3: GitHubへプッシュ（5分）

「Push origin」ボタンをクリック
処理完了まで待機
GitHub上で確認:
- ブラウザでリポジトリページを更新
- ファイルが追加されていることを確認
- README.mdの更新内容が表示されることを確認

Phase4: ブランチを使った並行開発（40分）

PersonB の作業: 初回プル（同期）とブランチ作成

Step1: 最新状態への同期（5分）

GitHub Desktopを開く
「Fetch origin」をクリック（リモートの変更をチェック）
「Pull origin」をクリック（変更をローカルに反映）
VSCodeで確認: PersonAが作成したファイルが表示されることを確認

Step2: 初回ブランチ作成体験（10分）

GitHub Desktopで「Current branch」（現在は main）をクリック
「New branch」を選択
ブランチ名を入力: PersonB-subtract-feature
- 命名規則: 担当者名-機能名-feature
「Create branch」をクリック
重要: 画面左上で現在のブランチが変わったことを確認

Step3: ブランチの概念理解（5分）

ブランチとは？

main: メインの開発ライン（リリース用）
feature branch: 新機能開発用の枝分かれ
並行作業: PersonAとPersonBが異なるブランチで同時開発可能

VSCodeでの確認:

下部ステータスバーでブランチ名を確認
Git Graph拡張機能でブランチの分岐を視覚化

Step4: 引き算機能の実装（20分）

Calculator.javaを編集:

/**
 * チーム開発で作る電卓アプリ
 * GitHub初回利用者向けハンズオン用
 * 
 * @author PersonA, PersonB
 * @version 1.0
 */
public class Calculator {
    
    /**
     * 足し算を行う
     * @param a 数値1
     * @param b 数値2
     * @return 計算結果
     */
    public static double add(double a, double b) {
        return a + b;
    }
    
    /**
     * 引き算を行う
     * PersonB が実装
     * @param a 数値1（被減数）
     * @param b 数値2（減数）
     * @return 計算結果
     */
    public static double subtract(double a, double b) {
        return a - b;
    }
    
    /**
     * アプリケーションのメインメソッド
     * @param args コマンドライン引数
     */
    public static void main(String[] args) {
        System.out.println("=== GitHub チーム開発 電卓アプリ ===");
        System.out.println("開発開始！");
        
        // PersonA: 足し算機能（予定）
        System.out.println("5 + 3 = " + add(5, 3));
        
        // PersonB: 引き算機能（実装完了）
        System.out.println("10 - 4 = " + subtract(10, 4));
        
        System.out.println("=== PersonBの引き算機能完了！ ===");
    }
}

development-log.mdに追記:

# 開発ログ

## 2025年9月8日
- プロジェクト開始
- PersonA: プロジェクト構造作成
- PersonB: 引き算機能実装

### PersonBの作業詳細
- ブランチ `PersonB-subtract-feature` を作成
- subtract メソッドを実装
- mainメソッドに引き算のテストコードを追加
- JavaDocコメントを記述

## 学習メモ
- GitHubでのリポジトリ作成方法を学習
- README.mdの書き方を習得
- Javaプロジェクトの基本構造を理解
- **ブランチの作成・切り替え方法を習得**
- **並行開発の概念を理解**

## 次回の予定
- PersonA: 足し算機能の実装
- PersonB: プルリクエスト作成

PersonA の作業: 同時並行開発（別ブランチ）

Step1: PersonAも別ブランチで作業（10分）

GitHub Desktopで最新の main ブランチに戻る
最新状態に更新（Fetch & Pull）
新しいブランチ作成: PersonA-add-feature
足し算機能を強化

Calculator.javaを編集（PersonAバージョン）:

// PersonAが追加: より詳細な足し算機能

/**
 * 足し算を行う（拡張版）
 * PersonA が実装
 * @param a 数値1
 * @param b 数値2
 * @return 計算結果
 */
public static double add(double a, double b) {
    // 入力値検証を追加
    if (Double.isInfinite(a) || Double.isInfinite(b)) {
        throw new IllegalArgumentException("無限大は計算できません");
    }
    return a + b;
}

/**
 * 複数の数値の足し算
 * PersonA が追加実装
 * @param numbers 可変長引数の数値
 * @return 合計値
 */
public static double addMultiple(double... numbers) {
    double sum = 0;
    for (double num : numbers) {
        sum += num;
    }
    return sum;
}

これで2つのブランチで同時に異なる開発が進行中の状態

Phase5: プルリクエスト（PR）の作成とレビュー（35分）

PersonB: 初回プルリクエスト作成

Step1: コミット・プッシュ（10分）

GitHub Desktopで変更を確認

コミットメッセージ入力:

Summary: feat: 引き算機能を実装