GitHubとSourceTreeを使って簡単にGitの開発手順を説明するよ!

どうも、tatsuです!

今回の記事ですが、

「Gitのことはだいたい調べたけど、実際に開発するときはどのようにやるのか」

「分散型でリモートリポジトリとローカルリポジトリがあって、、っていうのは知ってるけど・・」

という人向けです。

今回例として行う開発手順は以下のとおりです!

  1. GitHubからプロジェクトを作る(リモートリポジトリ)
  2. 自分のPCにリモートリポジトリをクローンする(ローカルリポジトリ)
  3. ローカルリポジトリ内でソース追加・コミット
  4. ローカルリポジトリの変更をプッシュ
  5. 変更内容がGitHubから作ったプロジェクトに反映されていることを確認

まずはこれらを行うためにGitHubへの登録と、GitクライアントツールであるSourceTreeをインストールしましょう。

前回の記事↓

GitHubとは?何のために使うの?使い道を紹介!

2018.07.07

GitHubの登録

まずGitHubのサイトに行きます。

アカウント情報を入力してボタンをクリック。

するとこのような画面に遷移するので画面の通りに進めてください。

step2では、Freeのプランを選択してください。
※無料で使えるので大丈夫です

登録が終わるとメールがくるので、本人確認をしてアカウント作成完了です。

SourceTreeのインストール

まずSourceTreeのサイトに行ってインストーラをダウンロードします。

ダウンロードしたexeファイルをダブルクリックで実行します。

次へ

アカウントが必要なので作成します。※今回はATLASSIANのほうにしました

画面下の「Sign up an account」をクリックします。

入力して次へ


メールが届くので、メールの中のボタンをクリックしてウェブサイトに飛び、ユーザ登録を完了させてください。

それが終わるとさっきの画面でログインができるようになります。

次へ

次へ

こんなダイアログがでますが、あとで設定できるため「いいえ」を選択してください。

SourceTreeが開きました!

開発手順

それでは簡単に開発手順を説明します!

GitHubからプロジェクトを作る(リモートリポジトリ)

それではGitHubにログインして、新しいリポジトリを作ってみましょう!

画像赤枠部分をクリックしてください。

すると次の画面に遷移します。
「Repository name」だけ入力して赤枠をクリックします。

これでリモートリポジトリのできあがりです!

画像の赤枠はリモートリポジトリのパスなので、コピーしておいてください
※次で使います

自分のPCにリモートリポジトリをクローンする(ローカルリポジトリ)

SourceTreeを開き、上部の「Clone」ボタンをクリックします。

以下のように先程コピーしたリモートリポジトリのパスをペーストして、赤枠の「クローン」ボタンをクリックしてください。

これでローカルリポジトリが作成されました!

さっそく「エクスプローラで開く」を押すと、、

以下のようにローカルリポジトリがエクスプローラで開かれます!
※「.git」フォルダがあると思います。これがリポジトリの証です。

次からはこのフォルダの中にファイルを追加したりしていきます。

ローカルリポジトリ内でソース追加・コミット

先程のフォルダに、テキストファイルを追加してみましょう。

すると、SourceTreeがそれを検知してこんな画面になると思います。

追加したファイルを選択し、赤枠をクリックします。
※この操作をステージングといい、コミットするファイルを選ぶ操作です。

ステージングが終わると、コミットボタンが押せるようになります。
コミットメッセージを入力してコミットボタンを押してください。

これでローカルリポジトリにコミットすることができました!
次はローカルでコミットした内容を、リモートリポジトリ(GitHub)に反映させます。

ローカルリポジトリの変更をプッシュ

ローカルでのコミットが済むと、ブランチにmasterというのが追加されるかと思います。
それを選択してプッシュボタンを押してください。

確認ダイアログが出るので、対象ローカルブランチにチェックをいれ、プッシュしてください。

これでリモートリポジトリにプッシュすることができました!

変更内容がGitHubから作ったプロジェクトに反映されていることを確認

それではGitHubのほうをみてみましょう。

しっかりとローカルでのコミットが反映されていますね!

まとめ

GitHubの使い方、イメージつきましたか??

イメージついた方は「GitHub flow」と調べてもらえると、もっと本格的な開発方法が学べると思います!

ただ、個人で開発する分には今回説明した手順で十分ですね。

この記事をみてGitに興味を持ってもらえたらうれしいです!
それでは!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です