今回はGitを視覚的に操作できる、SourceTreeというツールをご紹介します。
初心者はターミナル（Windowsならコマンドプロンプトと呼びます）で、コマンドを使ってGitを操作するのが難しいと感じてしまうこともあると思います。
SourceTreeはそんな方にとって素晴らしい味方になるでしょう！
ぜひ試してみてください！
【想定読者】
- Git初心者
- SourceTree超初心者
【事前準備】
- Gitのインストール
- Gitで管理しているプロジェクトの作成
- GitHubアカウントの作成
- GitHubにリポジトリの作成
（上記のステップについても今後ブログにしてまとめたいと思います！しばしお待ちください！）
【目次】
以下のステップを踏んでいきます。
- SourceTreeのインストール
- SourceTreeのセットアップ
- SourceTreeを使ってみる
【1. SourceTreeのインストール】
それでは早速SourceTreeをインストールしていきましょう！
SourceTreeはこちらのサイト（https://ja.atlassian.com/software/sourcetree/overview/）でダウンロードできます。
下図のように、Mac用かWindows用を選ぶ箇所があるので、お使いの環境に合わせてダウンロードボタンを押してください。
さてダウンロードできましたでしょうか？
ダウンロードができたら、ダウンロードしたファイルを開いてください。
ここからはWindowsとMacで多少違う箇所があるので、別々に説明します。
Windowsの場合
ダウンロードしたファイルをクリックすると、「インストールウィザード」が開きます。
以下の図に沿って進んでいきましょう。
インストールが始まります。
終わるまでしばし待ちましょう。
下図のような画面が表示されれば、インストールの成功です。「Launch SourceTree」にチェックをいれて、Finishボタンをクリックしましょう。
Macの場合
次にMacでのインストールを見てみましょう。
ほとんどはWindowsのときと共通しているので、適宜「Windowsの場合」を参考にしてください。
SourceTreeのサイトからMac用をダウンロードしたら、それを開きましょう。
下図は「開く」をクリックします。
こちらは試用版で問題ありませんので、そのまま進みましょう。
【2. SourceTreeのセットアップ】
インストールが完了しSourceTreeを立ち上げたら、最初のセットアップを行います。
下図のような画面が表示されますので、全てにチェックマークをいれて続行！
すると下図のようになにやらダウンロードが始まります。
完了したら「次へ」ボタンを押します。
下は「No」を選択。
今回は下のアカウント設定は不要です。スキップしてください。
続いても迷わず「No」を選択。
ようやく、SourceTreeの画面が表示されます。
これで準備は完了です！
【3. SourceTreeを使ってみる】
それでは実際にSourceTreeを使ってみましょう。
MacとWindowsでは、SourceTreeのデザインにはそこまでデザインの違いはありません。
以下は基本的にWindowsの画面で進めていきます。
まずやることは、「SourceTreeでGitを操作したいプロジェクトを選択し、SourceTreeで表示する」という作業です。
これをSourceTreeは、ドラッグアンドドロップという非常に直感的な操作で実現してくれます。
下図の赤枠を見てみましょう。ここに「Gitで管理している開発中のプロジェクトのフォルダ」をドラッグアンドドロップします（Macの場合は、ドロップする画面が別ウィンドウになっています）。
Windowsはドラッグ & ドロップで完了です。
Macの場合は、下図を参考にしてください。
さてこれで、Gitで管理されたプロジェクトをSourceTreeで表示し、SourceTree上でGitを操作する準備ができました。
Gitには多くの機能があり、それゆえSourceTreeも豊富な機能を備えています。
しかし、まずはGitのごくごく初歩的な機能だけを見てみましょう。そのほかの機能はいまはあまり気にしなくて大丈夫です！
以下、SourceTreeの基本的な見方と、以下の3つのコマンドの操作方法を見ていきます。
・・・ファイルやフォルダをindexに追加する
・・・indexに追加されたファイルやフォルダをコミットする
・・・コミットされたファイルやフォルダをリモート（ここではGitHub）にプッシュする
それでは順に見ていきましょう！
変更内容を確認する
まず「作業コピー」で、現在のプロジェクトの状況を確認できます。
前回のコミット以降変更がなければ、下図のようにきれいさっぱりなにもありません。
そこで実際にプロジェクトの内容を少し変更してみましょう。
ここでは、index.htmlとstylesheet.cssの内容を少しいじってみます。
そしてまたSourceTreeに戻って、「作業コピー」を見てみます。
すると今度は、下図の赤枠の部分にindex.htmlとstylesheet.cssが現れました！
ここには、変更されたファイルの一覧が表示されます。
さらに下図のように、右側の部分で選択中のファイルの変更内容を見ることができます。
非常にわかりやすいですね！
ここの「作業ツリーのファイル」とはまだ「add」されていない変更のことです。
addする
それではこの変更を、addしてみましょう。
ファイル名の左横の「チェックボックスにチェック」をいれるか、「hunkをステージへ移動」をクリックするだけでaddが完了します。
addされると先ほどのファイルは下図のように「indexにステージしたファイル」に移動します。
下図のようにaddしたり、反対にaddを取り消したり、というのも自由自在です。めちゃくちゃ簡単ですね。
ちなみに、「作業ツリーのファイル」の左のチェックを入れると、変更されたファイル全てを一度にaddすることができます。
と同じことです。
commitする
addが完了したら、次はcommitをしてみましょう。
commitするにはツールバーにある「コミット」ボタンを押します。
というのがコミットするときのコマンドでしたね。
このように、commitする時は、何のための変更なのかがわかるように、コミットメッセージというメモを残します。
SourceTreeでは下図のフォームにコミットメッセージを入力します。コミットメッセージを入力したら、下部のコミットボタンをクリックします。これでコミットが完成します！
ここまで皆様大丈夫でしょうか？
最初は何やらボタンがいっぱいあったり、わけもわからない情報がいっぱいあって、戸惑ったかと思いますが、非常にシンプルではないでしょうか？
最後にpushの仕方を見ていきます。
pushする
コミットが完了したら、ツールバーのプッシュボタンを押しましょう。すると下図のように画面がポップアップで表示されます。
GitHubのリモートリポジトリと紐付けている方は下図のような画面が表示されると思います。
masterのチェックボックスにチェックをいれ、「OK」を押しましょう。
ちなみにMacだと少しデザインが異なります。下図を参考にしてください。
これでプッシュが完了です。
というコマンドと同じです（「origin」の部分は各自で決めたremoteの名前が入ります）。
ただし初回だけ下図のようなものが表示され、GitHubのユーザー名とパスワードを求められます。
以上で、SourceTree上でのadd, commit, pushの一連の操作は終了です。
最後にpushしたものがちゃんとGitHubに反映されているか確認してみましょう。
いかがでしたでしょうか？
Gitは何をやっているかよくわからなくて怖い。。という方は、ぜひSourceTreeを試してみませんか？
最後まで読んでいただきありがとうございました！