目次

SourceTree基本操作 快適な環境で作業しましょう。

SourceTreeとは？

Gitは元々、コマンドを駆使して操作するものでした。

コマンド操作はとっつきにくく、今何が起こっているのか可視化できません。

これをWindowsやMacのアプリのように、マウスでアイコンなどをクリックして操作できるようにしたものが、 SourceTreeです。

いわゆるコマンド操作しなくても、便利に、簡単に操作できるようにしたものです！

SourceTreeは主にローカル側の管理、Githubはリモート側の管理を担当します。

ローカルフォルダを編集する

2-1

SourceTreeに紐づけた、ローカルフォルダを開く。

エディターを使用し、ローカルに配置したフォルダを開きます。（※SourceTreeの保存先に指定したフォルダです。）

2-2

ローカルフォルダを最新の状態にする- プル（Pull）。

まず、左のサイドバーで「 main」をダブルクリック （main左側に〇がついた状態）にしてからSourceTreeの上あたりの「プル」ボタンを選択します。

※必ずmainに対してプルしてください。

補足

プルとは簡単に言うと、リモート環境にある最新の変更履歴をダウンロードしてきて、自分のローカルフォルダに反映させることです。

毎日、色んな人が同じファイルを編集する可能性があるので、エディターで編集する前に必ずプルし、ローカルファイルを最新の状態に保ちましょう。

次に、ポップアップが出現するので「プルするリモートブランチ」が「main」になっていることを確認して、「プル」を押下します。

これで、ローカルに作成したフォルダが最新の状態になります。

古い状態のファイルを編集すると、後々 コンフリクトと呼ばれる競合が発生してしまうので、最新にすることは重要です。

2-3

ブランチを切る-作業環境を作成する。

SourceTree上部の、「ブランチ」をクリックします。

補足

ブランチとは、作業をする環境のことです。

mainブランチは元のフォルダーとして、作業をする際にはmainから枝分かれさせたブランチで作業をします。
※作業開始前には必ずブランチを切ることを忘れないでください。

新規ブランチ ⇒ 任意の名前（作業内容が分かりやすい名前）

コミット ⇒ 基本は「作業コピーの親」を選択

新規ブランチを作成してチェックアウト ⇒ チェックを入れる

ブランチ命名規則

（名前）-（backlogNo）-（01） 例：yamada-NAVI-001-01

※backlogNoがない場合は日付（230309）yamada-230309-01
※01は作成番号になります。同じタスク番号、同日で複数作業をする際に適当な数字を付けてください。

入力を確認して、「ブランチを作成」をクリック

この後の作業は新しく作成したブランチで行いますので、 ブランチの左横に〇がついた状態を必ず確認してください。

※ファイルを編集する前に、ブランチの切り替えを必ず確認するようにしてください。

2-4

ファイルの編集をする-ファイルの追加。

例として、「test2_style.css」を追加してみました。

補足

ファイルを追加するときは、エディターからでもエクスプローラーからでも構いません。

次に、ローカルフォルダにファイルを追加した履歴をSourceTree上に残していきます。

ファイルを追加すると、SourceTree上で自動的に変更を検知し「コミットされていない変更があります」の表示と、「コミット」部分に数字が付きます。

補足

コミットに数字が付くと、コミットすることができます。コミットはいわゆるセーブのようなものなので、コミットする粒度は小さくしましょう。 何かしらの変更を加えたら、都度コミットすることをお勧めします。

SourceTreeの「コミット」を選択します。

「作業ツリーのファイル」部分に「?」アイコンで先ほど追加したファイル名が配置されているのが分かると思います。

ファイル横の+ボタンを押して、 「Indexにステージしたファイル」に上げてあげます。

あとは下の方にインプットで入力できる欄があると思いますが、こちらに「コミットメッセージ」と呼ばれるものを入力して完了です。

コミットメッセージについては1つ下で詳しく説明します。

コミットメッセージにはルールを設けましたので、確認しながら入力してください。

このマニュアルの 「用語集」で接頭辞の種類を紹介しています。

コミットメッセージルール
  • 1行目： 接頭辞：内容要約/backlogのNo
  • 2行目：空白
  • 3行目： 説明、補足
実際の記入例
  • 変更：h1の変更/backlogのNo

  • インデックスHTMLファイルのh1を変更しました。

※backlogのNoはある場合のみ

先ほどの変更にコミットメッセージを加えます。

コミットメッセージを記入後、左下の 「変更をすぐにプッシュする」のチェックを外し、右下の 「コミット」をクリックします。

元の画面にコミットが追加されました。

左下には、日時やコミットした人、コミットメッセージも追加されているので成功です。

2-5

変更したコミットを、リモートに反映させる- プッシュ。

コミットしたことで、ローカルの変更をSourceTreeに記録することができました。

次に、ローカルの変更をリモートに反映させるという手順を行います。リモートというのはGithub上の元のフォルダです。

この手順を プッシュといいます。最初にプルを説明しましたが、それの逆になります。

補足

プル ＝ リモート⇒ ローカル
※変更を持ってくる。

プッシュ = ローカル⇒ リモート
※変更を反映させる。

※プッシュする際は、mainではなく、必ず作成したブランチをダブルクリックして左横に〇が付いた状態にしてください。

SourceTree上で「プッシュ」をクリックします。

「対象」を作成したブランチにチェックを入れてください。 ※mainには入れないでください。

補足

[test-sample]というブランチは、元々ローカルで作成したものですが、プッシュする際には同名でリモートにもブランチが必要です。

上画像①では「リモートブランチ」欄に[test-sample]というブランチはありませんが、「対象」にチェックを入れると自動的に作成してくれます。

下画像②では、「リモートブランチ」にも[test-sample]ブランチが作成されていることが確認できます。

右下の「プッシュ」をクリックします。

SourceTree上でエラーが出なければプッシュまで完了です。

プッシュしたということは、リモート側に反映されたということなので次はGithub(リモート側)で作業が必要です。

「Github使用方法」に移動して、[03.プッシュされた変更から、マージまでの流れ]から続きを確認してください。

ファイルを戻す、やり直す

3-1

ファイル編集の戻し方（コミット前）。

ファイル編集をした後、コミットする前に変更を破棄する方法です。

作業ツリーのファイルにコミット前の作業があることを確認してください。

作業の上で右クリックをし、「破棄」を選択します。 ※破棄と削除を間違えないように注意してください。

ポップアップは「 OK」を押してください。

※破棄した変更は元に戻せません。

作業内容が破棄され、ファイルが編集前のものに戻ります。

別の編集を加える場合は、再度編集しコミットを行ってください。

3-2

パターン1：メインブランチのままファイルを変更したが、コミット前に気付いた場合

メインブランチからプッシュすることはできません。

そのため、変更内容をメインから作業用ブランチに移す必要があります。

手順1：以下画像のように、コミットに数字が付いている状態で、左側のブランチがメインにフォーカスされているのを確認します。

手順2：この状態で通常通りブランチを作成します。

手順3：すると、ブランチが切り替わった状態でコミットも移っていることが確認できます。
ここからは通常通り、コミット・プッシュの手順を踏んでください。

3-3

誤ってメインでコミットをしてしまった場合

メインでコミットしてしまった場合、メインブランチに矢印（↑）と数字が付いているはずです。※反映が遅れ、付いていない場合もあります。


メインブランチではプッシュできないので、コミットした変更をメインブランチから、作業用ブランチに移す必要があります。


この変更は簡単に行うことができます。以下に手順を記載しています。


手順.1
「ブランチ」から新たにブランチを作成してください。 ※コミットをしてしまったメインブランチからブランチを切るため、メインと同じコミットされた状態のブランチが作成できます！


手順.2
手順.1で作成したブランチに合わせた状態で、「プッシュ」ボタンを押下します。
この時、「main」「作成したブランチ」の2つともに✓がはいった状態になっています。
必ず「main」の✓を外し、「作成したブランチ」でプッシュを行ってください。


手順.3
通常の手順で、githubからプルリクエストを作成し、マージまで実施してください。


手順.4
SourceTreeに戻ると、「main」には数字が付いたままのはずです。
「main」に合わせた後、「プル」をすることでmainブランチの変更と、マージした同じ変更が相殺され数字も消えます。
これで完了です。

3-4

リモートリポジトリのファイルの特定の変更を戻す(プッシュ、マージ後)。

ファイルを一気に戻す方法はありません。SourceTreeに保存されたコミットから、変更を確認し現在のファイルに上書きすることでファイルを戻すことができます。

ここからは、変更を抽出し、現在のファイルに上書きする方法を記載しています。


手順1：作業用ブランチを作成します。

手順2：作業用ブランチに切り替わっていることを確認し、戻りたい特定の位置でダブルクリックします。

手順3：下記画像のような、警告が出ますが「OK」を押してください。
※左下のチェック「クリーン」にはチェックを入れないでください。

手順4：すると、樹形図が「HEAD」から始まる過去の変更部分にフォーカスされます。

手順5：画面右下に変更したファイル名と、変更箇所（行数）が表示されています。ローカルファイルを開き一致しているか確認します。

手順6：手順5で確認した変更箇所を、コピーして退避するなどローカルで保存します。

手順7：樹形図の先頭で再度ダブルクリックします。「ブランチを選択」＞「作成したブランチ」＞「OK」＞警告「はい」でファイルを最新に戻します。

手順8：過去の変更を持ってきた状態で、ローカルファイルが最新になっています。あとは、エディターで手順5で開いたファイルの変更箇所に対し過去のファイルで上書き・比較・一部削除をするなど 修正を行った上で、コミット・プッシュ・マージまで行ってください。

mainではなく、手順1で作成したブランチからコミットを行ってください。


ローカルブランチを削除する

4-1

Githubでリモートブランチを削除した後、同名のローカルブランチを削除しましょう。

「コンフリクトテスト」を削除します。

「コンフリクトテスト」が選択された状態（左横に〇）では削除することができません。

mainブランチを選択してください。

※削除したいブランチ以外であればどのブランチでも構いません。

「コンフリクトテスト」上で右クリックします。

「コンフリクトテストを削除」を選択してください。

ポップアップが出現します。 「OK」を押してください。

ブランチから削除されました。

※削除時にエラーが発生する場合は、下タブの 「エラー・コンフリクト解消方法」を参照してください。

スタッシュの利用

スタッシュとは？

あるブランチで作業し、コミットしなければならない時コミットせずに一時的に作業を保存しておくことです。

スタッシュを行うことで、コミットせずに違うブランチで作業することも可能です。

5-1

スタッシュの実施。

[test-branch]にて作業を行い、コミットがたまりました。

コミットせずに作業を保存するため、 「スタッシュ」をクリックします。

スタッシュに名前を付けるためのポップアップが出現します。

入力して 「OK」を押します。

左メニューの 「スタッシュ」に保存されます。

また、コミットの数字が消えます。

スタッシュを再びコミットに戻すためには、左メニューのスタッシュを右クリックします。

「スタッシュ'スタッシュ名'を適用」をクリックします。

スタッシュからコミットすべき変更に移動しました。

スタッシュを削除する場合は、右クリック⇒ 「スタッシュ'スタッシュ名'を削除」をクリックします。