ここでは、GITを見える化してくれて、コマンドを打たずに使えるツールであるSourceTreeのダウンロードからインストール、GITHUBとつなぐまで初期設定までを図入りで初心者でも完全にできるように解説していきます。
まず、SourceTreeをインストールする前に先に用意が必要なものがあります。
- GITをPCにインストール
- GITHUBアカウント
この2つが必要です。
→Git for windowsのインストール方法2020最新版。画像付きで初心者向けに解説
→GITHUB無料アカウントの作り方2020最新版。初心者向けに図入りでやさしく解説
→GITとGITHUBとは？全く分からない初心者向けに図入りでやさしく解説！
この2つが用意できたら、SourceTreeのインストールを始めます。
SourceTreeのインストール方法、手順。
まずは、SourceTreeの公式サイトに行き、SourceTree本体をダウンロードします。
Download freeを押すと、
こういうのが出るので、チェックを入れて、Downloadを押します。
ダウンロードしたexeファイルを起動します。
(ちなみに、SourceTreeは、今後起動する時に毎回このexeをクリックして起動します。なので、捨てちゃダメです。まぁ、まんがいち捨てちゃっても、新しいのをインストールすれば、設定なしで起動できますけどね・・)
起動すると、この画面が出ます。ここでBitbucketをクリックしてください。
Bitbucketをクリックする事で、Bitbucketアカウントを作ります。注意書きに書かれている通り、SourceTreeはBitbucketアカウントを作らないと使えません。なので、Skipせず、アカウントをここで作ります。
SourceTreeを使うために、Bitbucketのアカウントを作成
ブラウザが自動的に開いて、Bitbucketのサイトに飛ぶので、アカウントを作ります。
どれを使ってもいいです。とりあえずこの例ではGoogleで続行します。
確認画面が出るので、アカウントを作成をクリックします。
Bitbucket用のユーザー名を自分で考えて入力し、続行を押します。
ちょっとしたアンケートが出るので、答えてもいいし、スキップしても良いです。
確認画面が出たら、アクセスを許可するを押します。
これで、アカウントに自動でログインします。
画面内左上にある戻るボタンを数回押して、画面を戻っていくと、上の確認画面が出ます。もしくは、ブラウザをリフレッシュするのも効果があります。
ここまで済んだら、SourceTreeのインストーラー画面に戻ってください。
無事ログインが完了した場合、次に進めるようになります。なぜか進めない場合は、ブラウザに戻って更新ボタンを押して、ちゃんとログインできてる事を確認してください。
無事Bitbucketのアカウント作成が完了しました。Nextを押します。
SourceTreeのインストール手順の続き
この画面では特に何もチェックせずにNextでOKです。
次にAuthor NameとAuthor Email Addressというのが出てきます。
これに関しては、実際にGITHUBにアップロードした際、アップロード主として表示される名前になります。(メールアドレスは表示はされませんが)。
なので、Githubアカウント名と同じでもいいですし、違う名前を考えてもOKです。
メールアドレスに関しても、GithubやBitbucketと同じものでも違うものどちらでも大丈夫です。
次のこれは「No」を選びます。
というわけで、SourceTreeのインストールは完了です。
引き続きこの画面からGITHUBとSourceTreeをつなぎます。
GITHUBにSourceTreeを接続する
さて、なんでSourceTreeをインストールしたかというと、PCにインストールしてあるGITを使って、GITHUBとやり取りするためですよね。
図のように、ファイルをやり取りするためにも、
まずはGitHubとSourceTreeを接続します。
Remoteタブから、Add an accoutをクリックします。
Hosting ServiceでGitHubを選び、下図のように入力します。
AuthenticationはBasicにしてください。
Username欄には、GitHubアカウントのユーザーネームを入れます。
これでひとまず、GithubアカウントをSourceTreeに加える事が出来ました・・が、まだGitHub側のリモートリポジトリとつながってるわけじゃありませんので、やり取りする流れを説明しますね。
SourceTreeでGITHUBにファイルをアップロードするまでの、リポジトリの設定方法
今度は、Localというタブを開きます。
そしてPC上にあるローカルリポジトリに設定してあるフォルダをドラッグします。
ローカルリポジトリ設定のやり方。
ローカルリポジトリというのは、GITHUBとファイルをやり取りするためのフォルダです。
まず、フォルダを1つどこでもいいので作成してください。
そして、コマンドプロンプトを立ち上げます。
もし、あなたがDドライブにフォルダを作った場合は、D: と入力してEnterをまずします。
次に cdという移動コマンドを使って、フォルダ内に移動します。
実際にそのフォルダを開いて、パスをクリックしてコピーするのが簡単です。
私の場合だったら、cd D:\website と入力してEnterです。
無事移動したら、git init と入力してEnterすれば完了です。
View、Hidden items にチェックを入れると、.gitというフォルダが出てきます。この.gitフォルダが入ってるフォルダがローカルリポジトリって事です。
じゃあ、SourceTreeの操作に戻りましょう。
SourceTreeでローカルリポジトリを設定する続き
今設定したローカルリポジトリファイルをドラッグします。
すると、メイン画面が開きました。
フォルダに何かファイルが入ってれば、Unstaged filesというところに表示されます。
SourceTreeのリモートリポジトリ(Github)との接続設定
さて、今度は、リモートリポジトリを設定します。
Remoteというボタンを押すと、まだ設定してないよという警告が出るので、Settingsを押します。
Addを押します。
この画面が出てきたら、Remote name に origin と入力します。
URL/Pathのところなんですが、gitのリモートリポジトリのアドレスを入れます・・って言ってもあなたはまだリモートリポジトリを作ってないかもしれません。
ない場合は、作りましょう。
GitHubでリモートリポジトリを作る
GitHubにログインしてください。
そしてニャンコみたいなマークを押すと、マイページに飛ぶので、そこでRepositoriesのNewボタンを押します。
出てきた画面で、適当にRepository nameを付けます(サイト名とかアプリ名が良いです)。
他の人に公開したくない場合は、Privateを選んで、Creat repositoryを押せば完了です。
出てきた画面のアドレスをコピーしてください。
SourceTreeのリモートリポジトリ作成の続き
さっきの画面のURL部分に今コピーしたアドレスをペーストします。
Remote AccountはGitHubのアカウントを選んで、OKを押します。
以上で設定は完了です。
これで、後は、Add, commit Push などの操作をSourceTree上でポチポチとボタンを押すだけでできるようになりました。
実際、このSourceTreeを使ってGITにバックアップを取る方法を下の記事で解説してるんで、
さっそく実戦してみてくださいね↓
GitのCommitとは？AddやPushとの違いは？初心者向けに図解でやさしく解説！
