こんにちは、mokoichi です。
Git を使った開発作業がプロジェクトを進めるうえで、大切なのはわかるけど・・・
- 何から始めればいいのかわからない
- Sourcetree の画面が複雑に見える
- ブランチやマージの仕組みがイメージできない
- 間違えて履歴を壊しそうで不安
そんな悩みを抱える方はとても多いのではないのでしょうか？。
実は、Git が難しく感じる理由のほとんどは、「履歴の流れが見えないまま操作している」ことにあります。 そこでこの記事では、Sourcetree を使って「Git ですすめる開発作業」を視覚的に理解する方法を、初心者向けにわかりやすくまとめました。ブランチの分岐やマージの流れが“線”として見えるので、コマンドが苦手な方でも安心して Git を使い始められます。
この記事を読み終えるころには、リポジトリ作成からブランチ運用、マージまで、Git の開発フローを自分で進められる状態になっているはずです。
✨1. Gitですすめる開発作業とは？（初心者がつまずくポイント）
■ Git が必要とされる理由
開発が進むほど、ファイルの変更が増えて「どれが最新？」が分かりにくくなります。 Git は 変更履歴を記録し、いつでも戻れる仕組み を提供します。
● → ● → ● → ●
↑ 以前の状態に戻れる
プロジェクトの安全性を保つために欠かせないツールです。
■ コマンドが難しいと言われる本当の理由
Git が難しく感じるのは、操作そのものよりも、
- 何が起きているのか見えない
- 履歴の流れがイメージできない
という “視覚的に理解できない状態” が原因です。
■ Sourcetree を使うメリット（視覚化・安全性・操作性）
Sourcetree は、Git の履歴を 線で見える化 してくれます。
main: ●──●──●
\
feature: ●──●
- ブランチの分岐
- コミットの積み重ね
- マージの合流
これらが一目で分かるため、初心者でも安心して操作できます。
■ ブランチ運用が開発の基本になる理由
Git の開発は、次の流れが基本です。
main（本番用）
↓ ブランチ作成
feature（作業用）
↓ 作業してコミット
↓ main にマージ
この運用により、
- main を壊さない
- 作業ごとに履歴が整理される
- チームでも安全に開発できる
というメリットがあります。
✅ 第1章まとめ
- Git は「変更履歴のタイムマシン」
- 難しく感じるのは“見えない”から
- Sourcetree なら履歴が線で見える
- ブランチ運用が安全な開発の基本
✨ 2. Sourcetree をインストールする
Sourcetree は、Git の操作を視覚的にわかりやすくしてくれる無料ツールです。 ここでは、最短で使い始めるための手順だけ に絞って解説します。
Soucetreeの公式サイト
■ 2-1. ダウンロード手順
- Sourcetree の公式サイトへアクセス
- 「Download」ボタンをクリック
- インストーラーを起動して進めるだけ
※ Atlassian アカウントの作成を求められる場合がありますが、
スキップ or ローカルアカウントで利用可能 です。
■ 2-2. 初期設定（最低限でOK）
インストール後、最初にいくつか設定画面が出ますが、
初心者は すべてデフォルトのまま進めて問題ありません。
- Git のパス → 自動で設定される
- SSH 設定 → 今は不要
- アカウント連携 → 後からでOK
👉 とにかく早く使い始めることが大事 なので、深く考えず進めて大丈夫です。
■ 2-3. 画面構成の理解（左・中央・右の役割）
Sourcetree の画面は、ざっくり3つに分かれています。
▼ 画面イメージ（文章図解）
┌──────────────┬──────────────────────┬─────────────
────────────┐
│ 左：ブランチ一覧 │ 中央：履歴（線で表示） │ 右：変更内容（差分） │ └──────────────┴──────────────────────┴─────────────────────────┘
● 左：ブランチ一覧
- 今どのブランチにいるか
- 他にどんなブランチがあるか
が一目でわかる場所。
● 中央：履歴（コミットの流れ）
Sourcetree の“心臓部”。 ブランチの分岐・合流が 線で表示 されます。
main: ●──●──●
\
feature: ●──●
● 右：変更内容（差分）
コミット前に「どこを変更したか」を確認できます。
✅ 第2章まとめ
- Sourcetree は無料で使える Git の視覚化ツール
- インストールは数クリックで完了
- 初期設定はすべてデフォルトでOK
- 画面は「左：ブランチ」「中央：履歴」「右：差分」で覚えると迷わない
✨ 3. リポジトリを作成する（Git のスタート地点）
Git を使った開発作業は、まず リポジトリ（履歴を保存する箱）を作るところから 始まります。 ここでは、Sourcetree を使って最初のリポジトリを作る手順を、できるだけシンプルにまとめます。
■ 3-1. ローカルリポジトリを作成する -「リポジトリ」は変更履歴を管理する場所
▼ ① Sourcetree を開き、「新規」または「Create」をクリック
「Create（作成）」を選ぶだけでOK
・対象のフォルダをドラック＆ドロップして、リポジトリを作成する。
▼ ② 保存先フォルダとリポジトリ名を入力
・作成をクリックすると、リポジトリが作成されます。
●リポジトリが作成されたか確認するには、対象フォルダで⌘＋Shift＋.（ドット）で隠しファイルが作成される→.git
■ 3-2. 初回コミットまでの流れ
リポジトリができたら、次は ファイルを追加してコミット（履歴に記録） します。
▼ ① プロジェクトのファイルをフォルダに入れる
- 作成したリポジトリフォルダをダブルクリックして、プロジェクトのファイルを選択してフォルダに入れる
▼ ② Sourcetree に戻ると、変更が検出される
▼ ③ 変更をステージする（履歴に入れる準備）
- 最初に、対象のファイルを選択して、コミット→メッセージ入力→下部のコミットをクリック→OK
👉 これで 最初の履歴が完成 します。
■ 3-3. コミットとは何か（初心者向けに噛み砕く）
コミットは、 「この時点の状態を写真のように保存する」 イメージです。
●（初回コミット）
↓
●（変更を保存）
↓
●（さらに保存
例）・index.htmlでMessageをメッセージに変更する。
・sourcetreeのファイルステータスで、コミット→下部にコメント（文言の変更：Message→メッセージ）を入力して、コミットをクリックする。
●サイトの方は下記のように変わる
●ファイルステータスでは、index.htmlの変更した箇所が表示される。
●履歴に詳細が表示される。
■ 3-4. Sourcetree でのコミット操作（図解）
┌──────────────┬──────────────────────┬─────────────
──────────┐
│ 左：ブランチ │ 中央：履歴（コミット） │ 右：差分表示 │ └──────────────┴──────────────────────┴───────────────────────┘
- 左：今どのブランチにいるか
- 中央：コミットが●で並ぶ
- 右：どこを変更したか確認できる
👉 初心者は 中央の履歴（●の流れ）
✅ 第3章まとめ
- リポジトリ＝履歴を保存する箱
- Sourcetree の「Createt」から簡単に作れる
- コミット＝状態を写真のように保存すること
- 初回コミットまでの流れは
ファイル追加 → ステージ → コミット
✨ 4. ブランチを作って作業を分岐する
Git の開発作業では、main（本番用）を汚さずに作業するためにブランチを切るのが基本です。 ここでは、ブランチの考え方と、Sourcetree での作成手順を簡潔にまとめます。
■ 4-1. ブランチとは何か
ブランチは 「作業用のコピー」 のようなものです。
履歴の流れを「ブランチ」と呼びます。
main（本番）（master）
└─ feature/slider（作業用）
main を直接触らず、 作業ごとにブランチを分けることで安全に開発できる ようになります。
■ 4-2. なぜ main を汚さないために必要なのか？
- main は「常に動く状態」であるべき
- 作業中のコードを main に混ぜると壊れる可能性がある
- 作業ごとにブランチを分けると、履歴が整理される
つまり、ブランチ運用は 安全性と整理整頓のための仕組み です。
■ 4-3. Sourcetree でブランチを作成する手順
▼ ① main を選択する→ブランチ→新規ブランチ名を入力する→/を作成
👉 ブランチ名は 「fix-button」 で登録されました。
■ 4-4. ブランチを切るタイミング（実務ベース）
実務では、次のようなタイミングでブランチを作ります。
- 新しい機能を作るとき
- デザインを調整するとき
- バグを修正するとき
- 大きめの変更を加えるとき
「作業が発生したらブランチを切る」
これが基本ルールです。
■ 4-5. ブランチを切ると履歴はどう見える？
Sourcetree では、ブランチを切ると履歴が分岐して表示されます。
main: ●──●──●
\
feature: ●（ここから作業）
👉 この「線の分岐」が見えるのが Sourcetree の最大のメリットです。
✅ 第4章まとめ
- ブランチ＝作業用のコピー
- main を壊さないために必須
- Sourcetree なら「Branch」ボタンで簡単に作成
- 作業が発生したらブランチを切るのが実務の基本
- 履歴が線で分岐して見えるので理解しやすい
✨ 5. ブランチで作業してコミットを積む
ブランチを作ったら、いよいよそのブランチで作業を進めていきます。 Git の開発作業は、基本的に 「作業 → コミット → 作業 → コミット」 の繰り返しです。
■ 5-1. 作業ブランチでのコミットの積み方（流れ）
まずは全体の流れを図でイメージしましょう。
feature/header-design
● → ● → ●
↑ ↑ ↑
作業 作業 作業
保存 保存 保存（コミット）
👉 コミット＝作業の区切りで“保存”すること
■ 5-2. Sourcetree でのコミット手順（図解）
▼ ① ファイルを編集する
例：header の HTML を修正
▼ ② Sourcetree に戻ると「変更あり」と表示
Unstaged files:
header.html
▼ ③ 変更をステージする（履歴に入れる準備）
[Stage All] をクリック
▼ ④ コミットメッセージを入力して「Commit」
Commit message:
“ヘッダーのHTMLを追加”
[Commit]
👉 これで 1つの作業が履歴として保存 されます。
■ 5-3. コミットメッセージの書き方（初心者向けテンプレ）
初心者は 「何を書けばいいの？」 と迷いがちなので、 まずはこのテンプレだけ覚えればOKです。
▼ 実務でも使えるテンプレ
- 何をしたか（What）
- なぜしたか（Why）※必要なら
▼ 例
- ヘッダーのHTMLを追加
- SP版のナビゲーションを調整
- ボタンのホバー色を修正（デザイン指示に合わせて）
👉 長文は不要。短く・具体的に が正解です。
■ 5-4. コミットを積むと履歴はどう見える？
Sourcetree では、コミットが増えると線が伸びていきます。
feature/header-design:
●──●──●
👉 この「線の伸び」が、作業の積み重ねそのものです。
✅ 第5章まとめ
- 作業ブランチでは「作業 → コミット」を繰り返す
- コミット＝作業の区切りで“保存”すること
- Sourcetree では「Stage → Commit」の2ステップ
- メッセージは短く・具体的に
- コミットが増えると履歴の線が伸びていく
✨ 6. マージして履歴をまとめる（分岐 → 合流）
ブランチで作業が終わったら、最後に main にマージ（合流） します。 マージは、Git の開発フローで最も重要なステップです。
■ 6-1. マージとは何か（図解で理解）
マージは、分岐していた作業ブランチを main に戻すこと です。
main: ●──●──●──────────●（合流）
\ ↑
feature: ●──●──●───●（作業完了）
- 分岐した線が
- 最後に main に戻って
- 1本の履歴としてまとまる
これがマージです。
■ 6-2. Sourcetree でのマージ手順
▼ ① main ブランチにチェックアウトする
Branches
● main（選択して Checkout）
○ feature/header-design
👉 マージは必ず main に移動してから行う のがポイント。
1️⃣mainに移動
2️⃣fix-buttonを右クロック
3️⃣OK
4️⃣
5️⃣index.htmlを見ると、変更したところすべて変わっている。
「マージ」は上書きではなく差分の結合
■ 6-3. コンフリクトが起きる理由（初心者向けに超簡単に）
コンフリクトとは、
「同じ場所を、別々のブランチで違う内容に変更した」 ときに起きる衝突です。
■ 6-3. コンフリクトが起きる理由（初心者向けに超簡単に）
コンフリクトとは、 「同じ場所を、別々のブランチで違う内容に変更した」 ときに起きる衝突です。
- main：color: blue;
- feature：color: red;
Git「どっちが正しいのかわからない…」
→ これがコンフリクト。
■ 6-4. コンフリクトの簡単な対処（Sourcetree）
Sourcetree では、コンフリクトが起きるとこう表示されます。
Conflict detected
対処の流れはシンプルです。
- どこが衝突しているか確認
- 正しい内容に書き換える
- 再度ステージしてコミット
- マージ完了
👉 初心者は 「衝突した部分を手で直す」 と覚えればOK。
■ 6-5. マージ後の履歴はどう見える？
Sourcetree では、マージすると線が main に戻ります。
main: ●──●──●──────────●
\ /
fix-button: ●──●──●──●
●mainを選択しておいて、fix-buttonを右クリックする。「fix^button をmainにマージする」をクリックしてOKをクリックする
●fix-buttonというブランチで編集したあと、mainにマージして戻して複数人で開発を進めるといった流れになる。
■ マージ後の履歴はこう見えます
上の画像のように、Sourcetree では
- ブランチの分岐
- コミットの積み重ね
- マージによる合流
が 線として視覚的に表示 されます。
✅ 第6章まとめ
- マージ＝作業ブランチを main に戻すこと
- Sourcetree では「main に移動 → Merge」で完了
- コンフリクトは「同じ場所を違う内容に変更」したときに発生
- 衝突部分を直して再コミットすれば解決
- 履歴が線で合流して見えるので理解しやすい
✨ 7. よくあるエラーと対処法（初心者が必ず通る道）
Git と Sourcetree を使っていると、初心者が必ず一度は遭遇するエラーがあります。 ここでは 「原因 → 対処」だけをシンプルに」 まとめます。
■ 7-1. コンフリクト（Conflict）
▼ どんな時に起きる？ 同じファイルの同じ場所を、別ブランチで違う内容に変更したとき。
main: color: blue; feature: color: red;
Git「どっちが正しいのかわからない…」
▼ 対処方法（最短）
- Sourcetree が「Conflict detected」と表示
- 該当ファイルを開く
- 衝突部分を手で修正
- 修正したファイルをステージ
- コミットしてマージ完了
👉 “衝突部分を手で直す” だけでOK
■ 7-2. プッシュできない（Push rejected）
▼ 原因
リモート（GitHubなど）の main が、自分のローカルより進んでいる。
リモート: ●──●──●──●
ローカル: ●──●──●
▼ 対処方法
- Pull（プル）して最新を取り込む
- コンフリクトがあれば解消
- 再度 Push
👉 ほとんどの場合、Pull → Push で解決します。
■ 7-3. プルできない（Pull failed）
▼ 原因
ローカルに未コミットの変更があると、Pull ができません。
Uncommitted changes が残っている状態
▼ 対処方法
- 変更をコミットする
- もしくは一時的に Stash（退避） する
- その後 Pull
👉 未コミットのまま Pull はできない と覚えておけばOK。
■ 7-4. どのブランチにいるかわからない
初心者が最もやりがちなミス。 ▼ 対処方法 Sourcetree の左側を見るだけでOK。
Branches ● main（今ここ） ○ feature/header
👉 黒い丸（●）が今いるブランチ
■ 7-5. 間違ったブランチで作業してしまった
▼ 対処方法（最短）
- 今の変更をコミット
- 正しいブランチに移動
- Cherry-pick（コミットを移す） で解決
初心者は難しく感じますが、Sourcetree ならボタン1つです。
✅ 第7章まとめ
- コンフリクト → 衝突部分を手で直す
- プッシュできない → Pull → Push
- プルできない → 未コミットを片付ける
- どのブランチにいる？ → 左側の●を見る
- 間違ったブランチで作業 → Cherry-pick で移せる
👉 Git のエラーは「原因がわかれば怖くない」
Sourcetree なら視覚的に状況が見えるので、初心者でも落ち着いて対処できます。
✨ 8.ローカルリポジトリとリモートリポジトリの同期
Git には2つのリポジトリがあります。
ローカル：自分のPCの中
リモート：GitHubなどオンライン上
この2つを Push（送る） と Pull（受け取る） で同期させます。
■ 1. ローカル → リモート（Push：アップロード）
あなたが PC で作業してコミットした内容を、 GitHub などのリモートに送る操作です。
あなたが PC で作業してコミットした内容を、 GitHub などのリモートに送る操作です。
ローカル（PC）
↓ Push
リモート（GitHub）
▼ いつ使う？
- 作業が一段落したとき
- バックアップしたいとき
- チームに共有したいとき
▼ Sourcetree の操作
[ Push ] ボタンを押すだけ
■ 2. リモート → ローカル（Pull：ダウンロード）
リモート側が進んでいる場合、 その変更をローカルに取り込む操作です。
リモート（GitHub）
↓ Pull
ローカル（PC）
▼ いつ使う？
- 他の人が main を更新した
- GitHub 上で修正した
- 自分のローカルが古くなっている
▼ Sourcetree の操作
[ Pull ] ボタンを押すだけ
■ 3. ローカルとリモートのズレが起きる理由
初心者がよく遭遇するのがこれ。
リモート：●──●──●──●
ローカル：●──●──●
リモートのほうが進んでいるのに Push しようとすると…
Push rejected（拒否されました）
となります。
■ 4. ズレたときの正しい対処
▼ 手順はシンプル
- Pull して最新を取り込む
- コンフリクトがあれば解消
- Push し直す
👉 これだけでほぼ100％解決します。
■ 5. 図で見る「同期の流れ」
① ローカルで作業 → コミット
② Push（ローカル → リモート）
③ 他の人が更新 → リモートが進む
④ Pull（リモート → ローカル）
⑤ 再び作業 → コミット → Push
この繰り返しで、
ローカルとリモートが常に同じ状態に保たれます。
✨ まとめると
- ローカル＝自分のPC
- リモート＝GitHubなど
- Push＝ローカル → リモート
- Pull＝リモート → ローカル
- Push できないときは Pull が必要
- Pull できないときは未コミットを片付ける
👉 同期の基本は「Pull → Push」
✨ まとめ（＋行動線）
■ Git ですすめる開発作業の全体像（おさらい）
Git を使った開発は、次の流れで進みます。
main（本番用） ↓ ブランチを切る feature（作業用） ↓ コミットを積む ↓ main にマージ
- main を壊さず
- 作業ごとに履歴が整理され
- いつでも戻れる
という 安全で効率的な開発フロー が実現できます。
■ Sourcetree を使うメリットの再確認
Sourcetree を使う最大のメリットは、
Git の複雑な動きを“線で見える化”してくれること。
- ブランチの分岐
- コミットの積み重ね
- マージの合流
- コンフリクトの発生箇所
これらがすべて視覚的に理解できます。
初心者がつまずくポイントの多くは、
「何が起きているのか見えない」ことが原因なので、
Sourcetree は 学習コストを大幅に下げてくれるツール です。
■ 次に取るべき行動（学習・実務・サポート案内）
▼ ① 今日からできる練習
- 小さな HTML/CSS の変更でコミットを積む
- ブランチを切って作業してみる
- マージして履歴の線を確認する
👉 “小さく試す” が一番の近道
▼ ② 実務で意識すべきポイント
- main では作業しない
- 作業ごとにブランチを切る
- コミットは小さく・具体的に
- マージ前に必ず差分を確認する
👉 この4つを守るだけで、実務でも安心して Git を扱えます。
▼ ③サポート案内
学んだ内容を実践しやすいように、以下のサポートも用意しています。
- Git を練習できるサンプルリポジトリ
小さな変更でコミットやブランチ操作を試せます。
- Sourcetree の基本操作を5分で学べる動画
画面を見ながら一緒に操作できるので理解が深まります。
- 質問フォーム（またはコメント欄）で相談可能
つまずいたら気軽に質問できます。匿名でもOKです。
Git と Sourcetree は、慣れるほど開発がスムーズになります。 今回学んだことを、小さな一歩から試してみてください。 自分のペースで、着実にステップアップして行けると思います。
