【初心者向け】Sourcetreeの使い方をわかりやすく解説！

Sourcetreeとは？

まず、Sourcetreeの概要についてご紹介します。

バージョン管理システムGitについて

パソコンで何らかのファイルを作成しているとき「上書き保存」を押した後に「しまった、前の状態に戻せなくなってしまった！」となった経験はありませんか。大抵のアプリケーションには「元に戻す」機能がついていますが「上書き保存」をしてしまうと保存した状態がスタート位置とみなされ、保存前の状態には戻せなくなります。

これを防ぐためには、重要な変更を行うごとに「バージョン1」「バージョン2」「バージョン3」…と新規ファイルを作成していけばよいのですが、これが大変な手間であることはお分かりいただけると思います。ファイルの時系列が無茶苦茶になってしまい、どれが最新バージョンか分からなくなる危険性もあります。次に、1つのファイルを複数人で編集する作業のことを考えてみましょう。複数人で作業していると、誰がどのような編集作業を行ったか分かりにくいことがあります。また、せっかくAさんが編集した部分をBさんが上書きしてしまい、台無しになる可能性もあります。

このようなトラブルを解消するのに役立つのが、バージョン管理システムGitです。Gitは、ファイルの更新状態を自分の好きなタイミングで履歴として保存できます。また、最新ファイルの状態から、履歴をたどって昔のバージョンに戻すことも可能です。Gitは、複数人で作業するときも役に立ちます。ほかの人のファイルを上書きする前に警告を出したり、どの部分が元ファイルと違うのかを表示できたりするので、とても便利なのです。

Gitの問題点とSourcetree

このように重宝するGitですが、もともとLinuxのソースコードを扱うために作られたという背景があります。そのため、操作にはコマンドという特殊な命令文を用いなくてはなりません。

コマンドによる操作は、マウスやキーボード操作に慣れているWindows・Macユーザーにとっては非常にとっつきにくいものです。下記のコマンドプロンプト画面の引用画像を見てください。

分かりやすいアイコンもなければ、オフィスソフトのようなメニュー表示もありません。プログラミング開発に日ごろから携わっているエンジニア以外には、敷居が高すぎるのが現実です。

そこで、登場するのがSourcetreeです。SourcetreeはAtlassian社から無料提供されているツールです。Sourcetreeを使うと、GitをコマンドではなくGUI※ で扱うことができます。このアプリを使えば、コマンドに慣れていない非エンジニアでもGitの恩恵を受けることができます。

※GUIとはGraphical User Interfaceの略称で、簡単に言えばWindowsやMacのアプリのようにマウスでアイコンなどをクリックして操作できる仕組みのことです。

Sourcetreeのインストール方法 

Sourcetreeのインストール方法をご説明します。

まず、Sourcetreeのホームページにアクセスし、インストーラーをダウンロードします。

※SourcetreeにはWindows版とMac版がありますが、この記事ではWindows版のインストーラーを使って解説を進めていきます。

ページ下部の「Download for Windows」ボタンをクリックします。

「Important Information」画面が出現します。ライセンスとプライバシーポリシーの文章リンクを読み（リンク先は日本語でも表示できますので安心してください）チェックボックスにチェックを入れて「Download」をクリックします。

インストーラーがダウンロードされたら、ダブルクリックで起動します。

最初に、Bitbucketへのログインを求められます。Bitbucketは、簡単に言えば各ファイルのバージョンを預かる場所を提供するサービスです。類似サービスにGithubがあります。運営元はSourcetreeと同じです。使用するユーザーの数が増えると有料になりますが、最初は無料で始められます。

アカウントがない場合は、「Create one for free」（画像赤枠）をクリックしてアカウントを作成します。GoogleアカウントやMicrosoftアカウントを使ってアカウントを作ることもできます。

アカウントをすでに持っている場合は、「Bitbucket」（画面青枠）をクリックします。ちなみにアカウント連携はあとから行うこともできます。すぐにSourcetreeをインストールしたい人は「スキップ」（黄色枠）をクリックしてください。

「登録が完了しました！」とでたら、「次へ」をクリックします。

インストールするツールを選ぶ画面ですが、そのまま「次へ」を押して進みます。

Sourcetreeの初期設定をしよう 

ここから、Souretreeを使う際のユーザー情報を登録する画面に移行します。

バージョンの変更を記録するときなどにアップロード元として使う名前とメールアドレスを登録します。画像内青枠に名前、赤枠にメールアドレスを入れた後「次へ」をクリックします。

最後に、SSHキーの読み込みについて聞かれます。SSHキーというのは、情報を送受信するときの暗号技術の一種です。SSHキーを設定するにはキー設定用のファイルが必要です。SSHキーはあとから読み込むこともできます。

SSHキーを持っていない初心者の場合は「いいえ」をクリックします。「ローカルリポジトリ」の画面が開いたら、インストール&初期設定完了です。

先ほど初期設定で登録した名前とメールアドレスは、上部メニューの「ツール」→「オプション」→「全般」タブから確認できます。

Sourcetreeの基本的な使い方    

ここからは、Sourcetreeの基本的な使い方についてご説明します。

新規リポジトリの作成

まず、Sourcetreeに新規リポジトリを作成することから始めましょう。リポジトリとは、簡単に言えば各種ファイルの更新情報を保存しておく倉庫のようなものです。Gitではよく使う言葉なので、覚えておきましょう。

「ファイル」→「新規/クローンを作成する」をクリックし、新規リポジトリ作成画面を開きます。ここでは、ローカル環境に新規リポジトリを作成します。まず、ローカル環境上にバージョン管理をしたいファイルの置き場所となる新規フォルダを作成します。中身は空にしておいてください。

次に上部のメニューから「Create」をクリックして、任意のファイルを指定します。「参照」をクリックして、パソコン内のファイルを選んでください。ここでは、ディスクトップ上に作った「first」というフォルダを指定しています。「作成」をクリックすると、新規リポジトリを作成できます。

なお、既に作成済みのフォルダなので「出力先のエラー」という表示が出ることがありますが「はい」をクリックしてください。

インデックスへのadd

Gitでは、最初から保存場所であるリポジトリに変更履歴が保存されるわけではありません。まずインデックスと呼ばれるところにファイルを追加することで、初めてリポジトリへの登録対象となります。変更履歴をインデックスに追加する操作を「add」、変更履歴をインデックスからリポジトリに登録することを「コミット」と言います。これらの操作もSoursetreeを使えばマウスで実行できます。

まず、先ほど追加した新規リポジトリ「first」の中に何らかのファイルを作成します。今回は「hello world」と書いたテキストファイルを用意し、「hello.txt」という名前で「first」フォルダに保存します。すると、firstタブウィンドウの「作業ツリーのファイル」欄に「hello.txt」というファイル名が現れました。

ただし、このファイルはまだインデックスに追加されていないため、変更履歴保存の対象にはなっていません。

続いて「first」内に、もう1つのテキストファイル「good by.txt」を作成しました。これも「作業ツリーのファイル」欄に表示されます。

作業ツリーのファイルに表示されたすべてのファイルをインデックスに追加するには「すべてインデックスに追加」のボタンを押します。すると、作業ツリーのファイル欄に表示されていたファイルがすべて「Indexにステージしたファイル」一覧に表示されました。

これが、Sourcetreeを使ったadd操作です。クリック1つでできるので、とても簡単です。

なお、1つずつファイルを選択してaddする方法もあります。作業ツリーのファイルに表示されたファイル名横の「＋」アイコンをクリックすると、そのファイルだけがインデックスにaddされます。

インデックスへのadd取り消し

インデックスへのadd操作を取り消したいときは「Indexにステージしたファイル」一覧からファイルを選んで、横の「－」アイコンをクリックするだけです。すべてのファイルのaddを取り消したいときは「すべてインデックスから除く」をクリックします。

リポジトリへのコミット

ここまでインデックスへのadd操作を見てきました。続いて、いよいよリポジトリへのコミットを行っていきましょう。

コミットを行うときには、作業変更のメモを残すのが推奨されています。下部の入力ウィンドウに、変更に関わるメモを入力してください。画像では「最初のファイルです」と書き込みました。その後「コミット」を押します。

ファイルが本当にコミットされたのか見てみましょう。

左メニュー欄の中から「History」もしくは「master」をクリックしてください。コミットされたgood by.txtとhello.txtファイルが現れました。

ファイルの変更をコミットしていく

ファイルを変更して上書き保存すると、コミットを促すメッセージが表示されます。具体的には、上部メニューの「コミット」アイコンにコミットされていない変更の数が、ウィンドウ内には「コミットされていない変更があります」と表示されます。

作業ツリーのファイル欄に表示されている変更されたファイル（画像青枠）をクリックすると、変更前と変更後の差分（どこが違うか）が表示されます（画像黄色枠）。

前の説明と同様、「＋」アイコンや「全てインデックスに追加」をクリックしてファイルをaddしていきましょう。その後、画面左上の「コミット」アイコンをクリックすると、コミットすることができます。

GitHub上のファイルを複製する

ここからは、Webに公開されているファイルをパソコンに複製し、その内容を修正していく方法をご紹介します。今回は、GitHub上にあるファイルのクローンをSourcetreeで作成します。

まず、任意の場所に複製ファイルを入れておくための空のフォルダを作成します。ここでは、デスクトップ上に「test」というフォルダを作成しました。次に、GitHubにアクセスし「Code」ボタンからプロジェクトのURLを表示→コピーします。

SourceTreeを起動し「Clone」ボタンをクリックします。1番目の入力ボックスに今コピーしたGitHubのURLをペーストし、2番目の入力ボックスにクローンを置いておきたいPC上のパスを入れます（「参照」ボタンからエクスプローラーを起動して場所を選択することもできます）。最後に「クローン」を押すと、GitHubのプロジェクトファイルがPC上に保存されます。

このようにして、GitHubのプロジェクトを自身のパソコンに複製し、作業を行っていくことができます。

ブランチを作成する

ブランチとは、簡単に言えば作業の流れのことです。先ほど、GitHubのプロジェクトをパソコンに保存しました。

しかし、このプロジェクトのファイルをそのまま編集していくと、ほかのメンバーの修正作業に割り込んでしまったり、元のファイルの重要な部分を上書きしてしまったりする恐れがあります。このような事態を避けるには、元の作業の流れとは別の自分だけの作業工程、つまり別のブランチを作っておけばよいのです。

なお、オリジナルの作業の流れをmasterブランチと呼びます。作業を始める前に、masterブランチとは切り離されたブランチを作っておくことが重要なのです。

Sourcetreeでブランチを作成する方法は簡単です。まず、上部メニューより「ブランチ」をクリックします。

あとは、新しいブランチの名前を入力して「ブランチを作成」をクリックするだけです。

まとめ

Gitはバージョン管理ができる便利な仕組みですが、コマンドという特別な命令文で操作しなければなりません。

しかし、Sourcetreeを使うと、コマンドを使わなくてもGitの操作をマウスとアイコンで直感的に行うことができます。Gitには、コミットやブランチなどたくさんの専門用語も登場します。本格的なGitの操作を学ぶ前に、まずはSourcetreeを使ってGitの概念に慣れてみることをおすすめします。

Sourcetreeは、ここで紹介した以外にもさまざまな使い方ができます。基本操作に慣れてきたら、応用的な機能についてもぜひ調べてみてください。

WEBでのお問い合わせはこちら