GitHub Desktop + VS Code によるチーム開発の始め方

はじめに

プログラミング初心者がチーム開発を始めるとき、いきなりコマンドラインで Git を使うのはハードルが高く感じるものです。

そこでおすすめなのが GitHub Desktop。GUI で直感的に Git 操作ができ、VS Code と組み合わせれば快適に開発できます。

この記事では、GitHub Desktop を中心にリポジトリを管理し、VS Code で編集する流れを解説します。

1. 前提条件

  • GitHub アカウント作成済み
  • GitHub Desktop インストール済み
  • VS Code インストール済み

GitHub Desktop の初回起動時にサインインすると、Git のユーザー情報が自動設定されるので安心です。

2. リポジトリをクローンする

  1. GitHub のリポジトリページを開く
  2. 緑の Code ボタンをクリック
  3. 「Open with GitHub Desktop」 を選択
  4. GitHub Desktop が起動 → 保存先フォルダを指定
  5. Clone ボタンをクリック

これで GitHub 上のリポジトリがローカルに複製されます。

3. VS Code で編集する

  1. GitHub Desktop 画面右側の 「Open in Visual Studio Code」 をクリック
  2. VS Code が起動し、対象プロジェクトが開く
  3. コードを編集・保存

補足：最近の VS Code について

最新バージョンの Visual Studio Code では、ソース管理ビューに 「Graph」タブが標準搭載されており、拡張機能を入れなくても コミット履歴のツリー表示（ブランチが色付き線で分岐するグラフ） を利用できます。

これにより、履歴やブランチの流れを直感的に確認できるようになりました。

※ 設定で scm.showHistoryGraph をオフにすれば非表示にもできます。

4. 変更をコミットする

  1. GitHub Desktop に戻ると Changed files に編集したファイルが表示される
  2. 下部の入力欄にコミットメッセージを記入（例：fix: ログイン画面のバグ修正）
  3. Commit to main（または作業中のブランチ）をクリック

→ ローカルリポジトリに変更が記録されます。

5. 変更をプッシュする

  1. コミットが終わると、右上に Push origin ボタンが表示される
  2. クリックすると GitHub.com 上のリポジトリに変更が反映されます

チームメンバーもリモートからプルすれば最新状態を共有できます。

6. チーム開発フロー

基本ルール

  • 作業を始める前に Pull（最新を取得）
  • 新しい機能や修正は Branch を作成して作業
    • GitHub Desktop の「Branch → New Branch」で作成
    • 名前例：feature/add-login、fix/typo-header
  • 作業が終わったら Commit → Push
  • GitHub.com 上で Pull Request (PR) を作成し、レビューを経て main に統合

7. GitHub Desktop 運用のメリット

  • 視覚的に変更を把握できる（差分表示・履歴が見やすい）
  • ブランチの切替・作成が簡単
  • コミットやプッシュをワンクリックで実行できる
  • VS Code は純粋に「編集環境」として集中できる

まとめ

  • GitHub Desktop を中心に運用すると、初心者でも直感的に Git/GitHub を扱える
  • フローは Clone → VS Code で編集 → Commit → Push → PR
  • チームでの開発に必要な機能（ブランチ、履歴、PR）が GUI で使えるので安心

訪問数 6 回, 今日の訪問数 1回

バージョン管理,便利機能

Posted by hidepon