SourceTreeの使い方をわかりやすく解説！基本的な操作を確認しよう！ダウンロードとインストール方法をも紹介
プログラムのソースコードやWikiなど、チーム内で共有するさまざまなファイルの変更履歴を管理するために使われるGit(ギット)。
今やソースコードを共有するエンジニアだけでなく、Webデザイナーやコーダー、さらにはライターの利用にまで広まっています。
画像やExcelファイルなど、さまざまなファイルを管理できるので、Gitはチーム内のファイル共有ツールとして非常に人気です。
しかし、Gitはコマンドラインで動くツール。
黒い画面にキーボードでコマンド入力をするソフト操作に慣れていない人、もっと直感的に操作したい人もいるでしょう。
その場合は誰でも簡単に操作できる、SourceTreeというデスクトップ向けのソフトウェアを使うのがおすすめです。
SourceTreeの概要やダウンロードとインストール方法、また基本的な操作方法、GitHubとの連携手順について詳しく解説します。
SourceTreeとは
SourceTreeは、オーストラリアのAtlassian社が提供している無料のGitクライアントソフトウェアです。
Atlassian社は無料タスク管理ツールのTrelloやプロフェッショナル向けのGitクライアントBitbucketも提供している会社。
全体的に、アジャイル開発に優れたツールが好評を得ています。
SourceTreeはグラフィカルなインターフェイスを備えているので、操作は非常に簡単です。
Gitを直接操作するときのようにコマンドを入力する必要がなく、コマンドの打ち間違えによる誤操作もありません。
数クリックで行いたい操作を実行できる点で初心者に向いています。
また複雑なバージョン管理も直感的に操作できるため、上級者にも愛用されているソフトウェアです。
まずはSourceTreeをダウンロードしよう
それでは、SourceTreeのダウンロードの方法について解説しましょう。
SourceTreeのダウンロード方法は非常に簡単です。
まず、以下の公式サイトにアクセスしてください。
公式サイト:https://www.sourcetreeapp.com/
ウィンドウ右上の「Download free」ボタンか、下にある「Download for Mac OS X」をクリックします。
Windowsの場合は「Download for Windows」というボタンをクリックしてください。
クリックすると、「Important information」というタブが登場します。これはライセンス規約の合意という旨の注意書きです。
「I agree…」で始まるチェックボックスにチェックを入れ、「Download」ボタンをクリックしましょう。
Bitbucketのアカウントを取得しよう
アカウント取得の手引き
Gitでは、以下のようなファイルのバージョン管理を行います。
- それぞれの端末（ローカル）にあるファイルをサーバーに保存
- サーバー上のファイルをローカルに引き継ぐ
これらを行うためには、サーバー上に専用の保存スペースが必要になります。
BitbucketでGitの保存ベースを入手してアカウントを取得する場合
ここでは、Atlassian社が提供しているBitbucketでGitの保存スペースを入手しましょう。
無料から利用が可能で、Freeプランでは5ユーザーまで利用することができます。まずは以下のサイトにアクセスをしましょう。
Bitbucket:https://bitbucket.org/
右上にある「Get started」ボタンか、下にある「Get started for free」をクリックします。
メールアドレスの入力後、登録したメールアドレスにメールが届いているので、「Verify my email address」ボタンをクリックします。
ユーザー名を入力して「続行」ボタンを押したら完了です。
その後簡単なアンケートがありますが、任意で進めて構いません。
SourceTreeをインストールしよう
さて、アカウントを作成している間にSourceTreeをダウンロード出来たら、そのファイルをダブルクリックして開きます。
Macの場合は、ソフトを立ち上げた時に「Applicationフォルダに移動」するか聞かれることがあるでしょう。
この場合は「Move to Applications Folder」（Applicationフォルダに移動）をクリックしてください。
ファイル自体が開かない場合は、「Finder」上で「Command」キーを押したまま右クリックから「開く」を選択することで開きます。
その後自動インストーラーが起動する筈です。
Windowsの場合は、立ち上げたらそのまま自動インストーラーが起動します。
最初にBitbucketのアカウントの有無について聞かれるので、「Bitbucketクラウド」を選択してください。
アクセス許可を求められるので、「アクセスを許可する」をクリックします。
設定欄は空欄のままで大丈夫です。最後に「完了」を押しましょう。
インストール完了後、自動でSourceTreeが立ち上がります。
【SourceTreeの基本その１】リポジトリを作成する
次に、SourceTreeの基本的な操作方法について解説します。
まずは、リポジトリを作ってみましょう。
リポジトリとは
リポジトリ(repository)は英語で「保管庫」を意味し、システムを構成しているプログラムやデータを格納するフォルダのことです。
これからさまざまなファイルのバージョンを管理する集約場所になります。
リポジトリの作成は、2種類のやり方があります。
- 「新規」で作成する
- すでに作成してあるリポジトリをコピーし、「クローン」で作成する
ここでは、新規でリポジトリを作ってみましょう。
新規リポジトリの作り方
まずはデスクトップなど、ローカルの任意の場所にフォルダを作成します。
フォルダ名も任意ですが、分かりやすい名前をつけておきましょう。
ここでは例として、フォルダ名を「project」としておきます。
新しいフォルダを作成したら、SourceTreeに戻り、「ローカル」タブをクリックして作ったフォルダをドラッグ＆ドロップします。
すると、「ローカルレポジトリを作成」というウィンドウが出てきます。
特に設定を変更する必要はありません。「リモートリポジトリも作成」をチェックしておけば、サーバー上にファイルを保存できます。
これで新規でリポジトリを作成することができました。
「project」をダブルクリックすると、メインのウィンドウが開きます。
【SourceTreeの基本その２】アドを実行する
次に、もっとも基本的な操作であるアドをしてみましょう。
アド(add)とは、リポジトリに登録するファイルを追加することです。
まずは先ほど作成したフォルダ「project」に「hello.txt」というファイルを加えてみます。
SourceTreeに戻ると、左の枠に「hello.txt」が表示されていれば正常。
この枠には変更されたファイルの一覧が表示され、クリックすると右側の枠でファイルの内容を確認できるようになるのです。
右上にある三本線ボタンをクリックし、「ステージングを分割して表示」をクリックしましょう。
こうすることで、アドされているかが分かりやすくなります。
左下の枠から、アドしたいファイルの右側にある「＋」ボタンを押すことで、addが完了します。
アドされると、ファイルが左上の枠に移動する筈です。
この「どのファイルの変更点を記録するか」を選ぶ操作のことを、ステージングと呼びます。
【SourceTreeの基本その３】コミットを実行する
次に、SourceTree上でコミットをしてみましょう。
コミット(commit)とはファイルやディレクトリの追加や変更をリポジトリに記録する操作です。
コミットを実行することで、前回コミットした時の状態から現在の状態までの差分であるリビジョン(revision)が作成されます。
制作の過程や過去の変更履歴を知ることができるようになるため、次回の作業で便利です。
アドしたファイルをコミットする
まずはさきほどアドしたファイルをコミットしましょう。
「コミット」ボタンの上にはコメントの入力欄があります。ここにはどのような変更を行ったかを入力してみましょう。
ここでは、「テキストファイルをディレクトリに追加」と記入しておきます。入力が完了したら、「コミット」ボタンをクリックしてください。
コミットメッセージはチームのメンバーがコミットの変更履歴を調べる場合や、自身が履歴を参照する場合に重要になる情報です。
ファイル内容を変更する場合は「変更内容の要約」と「変更した理由」を添えるのがおすすめ。
このように、変更内容が分かりやすく伝わるような書き方にするよう心がけましょう。
変更をコミットする
続いて、変更のコミットを実行しましょう。
ここでは「project」フォルダの中にある「hello.txt」の内容を「Hello SourceTree！」と変更し、上書き保存します。
次にSourceTreeに戻り、左枠の「作業ツリーファイル」に「hello.txt」がある筈です。
先ほどと同じように「＋」ボタンを押してステージングを行いましょう。
「コミット」ボタンの上にあるテキスト入力欄に「テキストファイルの内容を変更」と入力し、「コミット」ボタンを押します。
左メニューの「履歴」タブをクリックすると、「テキストファイルの内容を変更」がコミット履歴として記録されていることが分かります。
【SourceTreeの基本その４】ブランチを分岐させる
続いて、ブランチの分岐の手順を確認しましょう。
ブランチとは
ブランチ(branch)は英語で「枝」の意味で、履歴の流れを枝のように分岐して記録を行うものです。
ソフトウェアやWebサイトの開発では、同時に複数のメンバーが機能追加を行ったり、バグを修正したりします。
こうした並行作業におけるバージョン管理を行うために、複数のブランチを作ることがあるのです。
ブランチを分岐させる
リポジトリで最初のコミットを行うと、Git側では「master」という名前のブランチが作成されています。
先に解説した内容変更も、このmasterブランチに追加されていました。
このmasterブランチから、新たに2本のブランチを分岐させてみましょう。
左メニューの「履歴」タブで先ほどコミットした「テキストファイルの内容を変更」を右クリックし、「ブランチ」を選択します。
するとウィンドウが表示されるので、「新規ブランチ」のテキストボックスに「branch1」と入力しましょう。
次に「ブランチを作成」ボタンをクリックします。同じ手順で「branch2」も作っておいてください。
左メニューの「ブランチ」をクリックすると、「branch1」と「branch2」が新たに表示されました。
「●」マークについて
最新のブランチである「branch2」の横に●マークがついているのは、現在「branch2」を選択していることを示すものです。
右隣の「branch1」をダブルクリックすれば「branch1」の横に●マークがつき、「branch1」が選択されているでしょう。
この選択しているブランチを変更する動作をチェックアウト(checkout)といいます。
分岐先でコミットさせる
「branch1」を選択したまま、「project」内の「hello.txt」の内容を「Hello Everyone！」に変更し、上書き保存してみてください。
「ファイルステーション」に戻り、コミットメッセージを「ブランチ１に変更を追加」として、ステージングさせてコミットしましょう。
次に「branch2」にチェックアウトし、「hello.txt」を開いても、変更前の「Hello SourceTree！」が表示されています。
これは、先程の変更に対するコミットが「branch1」に対して行われているからです。
同様に「branch2」を選択した状態で、「project」内の「hello.txt」の内容を「Hello Tokyo！」に変更し、上書き保存。
「ファイルステーション」に戻り、変更を「ブランチ２に変更を追加」として、ステージングさせてコミットしてみましょう。
「branch1」と「branch2」の内容が変更されていることが分かります。
なお、「master」ブランチにある「hello.txt」は「Hello SourceTree！」のままであることも確認可能です。
【SourceTreeの基本その５】マージを実行する
マージの基本的な手順についても確認しておきましょう。
マージとは
マージ(merge)とは英語で「統合する」という意味で、複数のブランチの変更点を１つのブランチに統合してまとめる操作のことです。
ブランチのマージのやり方
先ほど分岐したブランチのマージをしてみましょう。
左メニューからmasterブランチにチェックアウトし、「hello.txt」の内容を空にしてください。
次に「branch2」を右クリックして「masterをbranch2にマージ」をクリックします。
すると、「branch2」の内容がmasterブランチに適用されるのです。「hello.txt」の内容が「Hello Tokyo！」となりました。
簡単な手順でマージを行うことができましたが、そう上手くいかないこともあります。
「branch1」と「branch2」に別々の内容が書かれている時のように、内容が競合してしまう場合があるのです。
これをコンフリクト(conflict)と呼びます。
Gitがどのブランチの内容を選べばいいのかがわからない場合、コンフリクトが発生するのです。
コンフリクトが起こった時は、解消した後にコミットを行う必要があります。
コンフリクトが起こった場合の対応
左メニューから「branch1」にチェックアウトしてください。
次に「branch2」を右クリックして、「branch2をbranch1にマージ」を選びましょう。
マージしようとすると「マージで競合」というウィンドウが出てきます。
このような場合には、「hello.txt」を右クリックし、「競合を解決」の中からマージの変更を行ってください。
ここでは、「自身の変更内容で解決」を選びましょう。
すると、「hello.txt」の内容が「Hello Everyone！」に統合されていることが確認できます。
ちなみに、コンフリクトの解消を行う際に、直接ファイルを編集するのも手です。
コンフリクト解消後、コミットを行えば無事に変更が記録されます。
GitHubとの連携手順
最後に、すでにGitHubを使っている場合のGitHubとの連携の手順について解説します。
GitHubでリポジトリを作成後、右側にある緑のボタン「Clone or download」ボタンをクリックしてみてください。
「Clone with HTTPS」の欄にURLが表示されているので、コピーしておきましょう。
そしてSourceTreeに戻り、「新規」メニューから「ローカル」ではなく「リモート」を選択してください。
「新規リポジトリ」をクリックし、「URLからクローン」で先ほどコピーしておいたGitHubのURLをペーストします。
ローカル保存をするフォルダを選択することができるので、新規にフォルダを作成して指定するか、既存のフォルダを指定しましょう。
これでGitHubとのリモートリポジトリとの連携が完了です。
先ほど紹介した手順でアド・コミットを行えば、ローカル上でGitHubのファイルを編集できます。
まとめ
Gitをデスクトップ上で手軽に使うことができるSourceTreeについて解説しました。
Gitはエンジニアがソフトウェアの開発に使うだけでなく、様々な用途で色々なファイルのバージョンを管理することができます。
Gitはコマンド入力なので難しく感じますが、SourceTreeであれば直感的に操作できるのです。
「上書きして大切なデータを消してしまった…」ということのないように、SourceTreeを使ったバージョン管理を始めましょう。
SHIFTフリーランスは、SHIFTグループがプライムとして参画している独自案件をフリーランスエンジニア向けに紹介する唯一のプラットフォームサービスです。
エージェントによるサポートもありますので、ご利用を検討してみてはいかがでしょうか。
