GitHub Desktop・Sourcetree・VS Codeの使い方と選び方

公開 更新 書いた人 大林 諒

Gitをコマンドで打つのに抵抗があるなら、画面付きの道具があります。名前が多くて迷いますが、小さな会社で最初に選ぶのは1本で足ります。ここではGitHub Desktop、Sourcetree、VS Code、TortoiseGit、GitKrakenの違いと、サンプル料理教室の代表が料金表を直して送るまでの操作を書きます。読み終わると、どれを入れるか決められて、変更の確認からコミット、GitHubへの送信までを画面で済ませられるようになります。

この記事の内容
  1. 先に答えると
  2. 画面付きの道具は、Gitの代わりではない
  3. 5つの道具の比較
  4. GitHub Desktopの手順
  5. VS Codeのソース管理の手順
  6. Sourcetreeが向く人
  7. どれを選ぶか
  8. コマンドも少し知っておくと良い理由
  9. 道具ではできないことと、その代わり
  10. よく詰まるところ
  11. 次に読む

先に答えると

最初の1本はGitHub Desktopで十分です。すでにVS Codeで編集しているなら、新しく入れなくてもVS Codeのソース管理だけで足ります。AIにGitの操作まで任せているなら、道具は変更と履歴を見るためだけに使えば十分です。

  • 画面付きの道具はGitの代わりではなく、Gitに命令を出す手段。どれを使っても履歴は同じ
  • GitHub Desktopは無料で、MacとWindows向け
  • Sourcetreeは枝の図を見たい人、Bitbucketを使う人向け
  • VS Codeは別にGitのインストールが要る
  • GitKrakenの無料版は非公開のリモートに使えない。TortoiseGitはWindows専用

画面付きの道具は、Gitの代わりではない

Gitは変更の履歴を残す仕組みそのものです。GitHub Desktopなどの道具は、そのGitに「これをコミットして」「これを送って」と命令を出す窓口にあたります。コミットは変更を1回分の記録として残す操作で、ボタンを押してもコマンドを打っても、できあがるものは同じです。

だから途中で道具を変えられます。代表がGitHub Desktopでコミットしたものを、外注エンジニアBはコマンドで受け取って、そのまま続きを作れます。同じ website フォルダをVS Codeで開いても、同じ履歴が見えます。乗り換えのときに履歴を移す作業はありません。

どの道具を使っても、同じGitの履歴を操作している
どの道具を使っても、同じGitの履歴を操作している

5つの道具の比較

2026年11月時点で、公式で確かめられた値だけを並べました。

道具対応OS費用Gitの準備向いている人
GitHub DesktopmacOS 12.0以降、Windows 10（64ビット）以降。Linuxは未対応無料コマンドでも使うなら別に入れる初めての人。GitHubを使う人
SourcetreeMac、Windows無料組み込みのGitあり。ターミナルでも使うなら別に入れる枝の図を見たい人、Bitbucketを使う人
VS CodemacOS、Linux、Windows無料。商用も可別に入れるすでに編集に使っている人
TortoiseGitWindows 10 version 1607以降無料。商用も可Git for Windows 2.24以降が必要Windowsのエクスプローラーの右クリックで操作したい人
GitKrakenWindows、Mac、LinuxCommunityは無料。非公開のリモートはPro以上で有料公式で要否を確かめられず図を中心に操作したい、費用を払える人

GitKrakenのCommunityは、公式の料金ページに「Only local repos and public remotes」とあります。サンプル料理教室の website は非公開なので、無料版では扱えません。金額は同じページで確かめてください。TortoiseGitは日本語の言語パックが別に用意されていて、本体を入れたあとに足します。

GitHub Desktopの手順

GitHub Desktopは、GitHub自身が作っている無料でオープンソースのアプリです。公式も、GitとGitHubが初めてならコマンドより楽だろうと書いています。

入れてサインインする

  1. github.com/apps/desktop からダウンロードして入れます。
  2. Macはメニューの「GitHub Desktop」から「Settings」、Windowsは「File」から「Options」を開きます。
  3. 「Accounts」の「Sign Into GitHub.com」を押します。
  4. 「Continue With Browser」を押します。ブラウザが開きます。
  5. ブラウザで「Sign in」を押し、2段階認証のコードを入れて「Verify」を押します。
  6. 案内に従ってGitHub Desktopに戻ります。

ユーザー名とパスワードをアプリに直接入れる方法はありません。コミットに使う名前とメールは、同じ設定の画面の「Git」で「Name」と「Email」を入れて「Save」を押します。

リポジトリを手元に持ってくる

リポジトリは、ファイルと変更履歴を入れておく場所です。手元に持ってくる操作をcloneと呼びます。

  1. 「File」の「Clone Repository」を押します。
  2. リポジトリがある場所のタブを選びます。
  3. 一覧から sample-cooking/website を選びます。
  4. 「Local Path」の横の「Choose…」で、置くフォルダを選びます。
  5. 「Clone」を押します。

直して、コミットして、送る

menu.html の金額を5,000円から5,500円に直す例です。

  1. 「Repository」の「Open in default editor」で編集用のアプリを開き、金額を直して保存します。
  2. GitHub Desktopに戻ると、左の「Changes」に menu.html が出ます。
  3. 右に差分（変わった行だけの表示）が出るので、金額の行だけが変わっているか見ます。
  4. 左下の「Summary」に「料金表を修正」と書きます。
  5. 「Commit to main」を押します。ここではまだ手元に記録しただけです。
  6. 上の「Push origin」を押します。ここでGitHubに届きます。
  7. 「View on GitHub」でブラウザを開き、履歴に出ているか確かめます。

ファイルの左のチェックを外すと、そのファイルはコミットに入りません。一覧の色は、赤が削除、黄色が変更、緑が追加です。.env のようにパスワードが入るファイルが一覧に出たら、チェックを外して止めます。入れてはいけないものの扱いは「.gitignoreの書き方と、リポジトリに入れてはいけないファイル」に書きました。

別の人が先に変更を送っていると、「Fetch origin」で確かめて「Pull origin」で取り込む順になります。過去のコミットは左の「History」で見られます。コミットを選ぶと、誰が、いつ、どのファイルをどう変えたかが出ます。

GitHub DesktopのChangesの画面
GitHub DesktopのChangesの画面

ブランチを分けるとき

ブランチは、本番の中身とは別に作業するための枝です。左上の「Current Branch」から新しい枝を作れます。add-summer-class のように分けて作業し、「Push origin」のあと「Preview Pull Request」から、変更の確認を頼むプルリクエスト（Pull Request、PR）を作る流れに入れます。枝の考え方は「git branchとmergeの使い方：枝を分けて合流する、GitHub Flowまで」で続きを書きました。

VS Codeのソース管理の手順

VS Codeは編集用のアプリですが、Gitの操作もできる画面が入っています。公式の説明のとおり、Git自体は別に入っている必要があり、VS Codeはそれを呼び出して動きます。入っていなければ「Gitのインストールと初期設定：MacとWindows、名前とメールと認証」を先に済ませます。

  1. 左の「Source Control」を開きます。Macは ⌃⇧G、Windowsは Ctrl+Shift+G でも開きます。
  2. 手元に無いリポジトリは「Clone Repository」を押して「Clone from GitHub」を選び、サインインして一覧から選びます。
  3. ファイルを直して保存すると、「Changes」の一覧に出ます。
  4. 一覧のファイルを押すと、差分の画面が開きます。
  5. ファイルの横の「+」（「Stage Changes」）を押します。「Staged Changes」に移ります。
  6. 上のメッセージの欄に「料金表を修正」と書きます。
  7. 「Commit」を押します。公式の説明のとおり、ここではサーバーには送られません。
  8. 「Sync Changes」を押します。GitHubの変更を先に取り込んでから、自分のコミットを送ります。

手順5のステージは、次のコミットに入れるものを選ぶ操作です。GitHub Desktopのチェックと同じ役割です。何もステージせずに「Commit」を押した場合の動きは設定によって変わり、VS Codeが確認してくることがあります。

送るだけにしたいときは、「Commit」の横の「More Actions」から「Push」を選びます。画面の下のステータスバーには、↑ が送っていないコミット、↓ が受け取っていないコミットの数として出ます。コミットの一覧は「Source Control Graph」で見られます。

VS CodeのSource Controlの画面
VS CodeのSource Controlの画面

Sourcetreeが向く人

Sourcetreeは、Atlassianが無料で出しているMacとWindowsのアプリです。Atlassianは Bitbucket の運営元で、Bitbucketは GitHub と同じくGitのリポジトリを置くサービスです。向いているのは、枝がどう分かれて合流したかを図で見たい人と、Bitbucketを使っている人です。GitHubのアカウントもつなげます。

手順は短く書きます。公式の案内は古いページが混ざっていて、メニューの位置は版によって違うことがあります。

  1. 「•••」から「Accounts」を開き、「Add」を押します。
  2. 「Host」でGitHubかBitbucketを選び、「Auth Type」は既定のまま「Connect Account」を押します。
  3. 「Remote」のタブからリポジトリの「Clone」を押します。
  4. 開いた「Clone a repository」の画面で、もう一度「Clone」を押します。終わると「Local」の一覧に出ます。
  5. ツールバーの「Commit」を押し、ファイルの横のメニューから「Stage file」を選んで、コミットに入れます。
  6. メッセージを書いて、下の「Commit」を押します。
  7. ツールバーの「Push」を押し、送る枝を選んで「OK」を押します。

枝の図の見え方は、コマンドで出す次の表示と同じ考え方です。

$ git log --oneline --graph --all
*   93e9690 夏の教室を合流
|\  
| * 6bcf800 夏の教室を追加
* | 6aad697 問い合わせの電話番号を修正
|/  
* c94e6ff 料金表を修正
* f8a162c 料金表を追加

下が古く、上が新しい順です。料金表を修正 のあとで線が2本に分かれ、夏の教室を追加 は枝のほう、問い合わせの電話番号を修正 は本線のほうでコミットされて、一番上で合流しています。Sourcetreeはこれを色の付いた線で見せてくれます。

Sourcetreeの履歴の画面
Sourcetreeの履歴の画面

どれを選ぶか

迷ったら、次の順に当てはめてください。

状況選ぶもの理由
初めてで、GitHubを使うGitHub Desktop必要な操作だけが見えていて、サインインもブラウザで済む
すでにVS Codeで編集しているVS Code編集と同じ画面で済む。道具を増やさなくていい
Claude CodeなどのAIにGit操作まで任せている何か1本（履歴を見るだけ）コミットはAIがやる。人の仕事は差分と履歴を読むこと
枝がよく分かれて、図で追いたいSourcetree枝の図が見やすい
Bitbucketを使っているSourcetreeBitbucketの運営元の道具
Windowsで、フォルダの右クリックから操作したいTortoiseGitエクスプローラーの中で動く
受付Aのようにファイルをほとんど触らない入れないブラウザで見れば足りる

実際に運用していると、途中で道具に悩むよりも「差分を見てからコミットする」習慣がつくほうが効きます。どの道具にも差分の画面があるので、そこを見る癖だけつけば十分です。

コマンドも少し知っておくと良い理由

画面だけで済ませるつもりでも、コマンドの言葉は避けて通れません。外注エンジニアBの説明も、AIの出す作業報告もコマンドで来るからです。「git push しました」と言われて、それがボタンのどれにあたるかが分かれば話についていけます。対応は次のとおりです。

コマンドGitHub DesktopVS Code何をしているか
git clone「Clone Repository」「Clone Repository」の「Clone from GitHub」GitHubから手元に持ってくる
git add左のチェック「+」（「Stage Changes」）次のコミットに入れるものを選ぶ
git commit「Commit to main」「Commit」手元に履歴を残す
git push「Push origin」「Sync Changes」の後半GitHubへ送る
git fetch「Fetch origin」「More Actions」の「Fetch」GitHubの状況を確かめる
git pull「Pull origin」「Sync Changes」の前半GitHubの変更を取り込む

コマンドの表示も、読むところは同じです。同じ料金表の修正をコマンドでやると、次のように出ます。

$ git status --short
 M menu.html
$ git diff
diff --git a/menu.html b/menu.html
index bc13bb1..9ec1ca5 100644
--- a/menu.html
+++ b/menu.html
@@ -1,2 +1,2 @@
 <h1>料金表</h1>
-<p>基本コース 5,000円</p>
+<p>基本コース 5,500円</p>
$ git add menu.html
$ git commit -m "料金表を修正"
[main c94e6ff] 料金表を修正
 1 file changed, 1 insertion(+), 1 deletion(-)
$ git push origin main
To .../origin/website.git
   f8a162c..c94e6ff  main -> main

M は変更あり、- の行が前の内容、+ の行が後の内容です。GitHub Desktopの赤と緑と同じものを文字で見ています。最後の行の f8a162c..c94e6ff は、GitHub側の履歴がこの番号からこの番号へ進んだという意味です。詳しくは「git add・commit・pushの違い：保存して送るまでの流れ」に書きました。

道具ではできないことと、その代わり

できないことその代わり
人が間違えて入れた秘密を画面が止める道具は一覧に出すだけ。差分を人が見る。.gitignore で最初から除く
履歴の書き換えなど、込み入った操作を全部ボタンでやるコマンドで行う。外注エンジニアBに頼む
プルリクエストの操作を全部アプリで済ませる多くはブラウザか GitHub CLI（gh）で。「GitHub CLIの使い方：ghでできることと、gitとの違い」へ
GitHub Desktopで全部の環境を扱うLinuxならVS CodeかGitKraken。GitHub以外の置き場なら、URLでcloneできるVS Code
公開中のホームページを変えるGitHubに送っただけでは変わらない場合がある。反映の仕組みを外注エンジニアBに聞く

よく詰まるところ

症状原因直し方
GitHub Desktopの「Commit to main」が押せない「Summary」が空、または全部のチェックが外れているメッセージを書き、入れるファイルにチェックを付ける
コミットしたのにGitHubで見えない手元に記録しただけで、送っていない「Push origin」または「Sync Changes」を押す
「New Commits on Remote」と出る別の人が先に送っている「Fetch」を押してから「Pull origin」で取り込み、そのあと送る
コミットのときに保護された枝の警告が出るmain が直接の変更を禁じる設定になっている枝を切り替えて、そちらへコミットする。保護された枝へそのままコミットするほうは選ばない
cloneの一覧に website が出ない別のアカウントでサインインしている、または招待を承諾していないアカウントを確かめ、招待のメールを承諾する
VS CodeのSource Controlが動かないGitが入っていないGitを入れて、VS Codeを開き直す
VS Codeで「Commit」を押すと確認が出る何もステージしていない「+」でステージしてから押す
GitKrakenで非公開のリポジトリが開けないCommunity版の範囲外Pro以上にするか、GitHub Desktopにする
.env が変更の一覧に出ている.gitignore に入っていないコミットに入れない。.gitignore に足す

次に読む

あわせて読む

画面に出てくる言葉の意味はGit用語集で引けます。