【GitHub入門(1)】GitHub上のソースをclone、pushしてみる

はじめに

前回までで、AngularやSpring Bootでいくつかサンプルプログラムを作成してきました。

システム開発現場では、作成したプログラムはバージョン管理システムでソースコードに対していつ、だれが、どのような変更を加えたかを管理するかと思います。

バージョン管理システムとしてはGITやSVNなどがよく利用されます。

今回はGIT入門編ということで、GITでclone、commit、pushなどの基本的な操作について練習してみたいと思います。

 

前提

以下が完了している前提で説明します。

  • GitHubアカウント作成済み
  • GitHub上にリポジトリ作成済み

 

まだの方は以下を参照下さい。

【Heroku入門(2)】GitHubと連携してアプリを自動デプロイしてみる

 

 

GitHubを使う前に

GitHubを使う前に以下3点について最初に説明します。

  1. ローカルリポジトリとリモートリポジトリ
  2. コミットとプッシュとプルとクローン
  3. ワーキングディレクトリとインデックスとローカルリポジトリとの関係

1.ローカルリポジトリとリモートリポジトリ

ローカルリポジトリとリモートリポジトリとの関係を絵にするとこんな感じです。

上の絵を見ると、2種類のリポジトリがあることが分かります。

一つはネットワーク上のリモートリポジトリです。ローカル PCで更新した内容は、

最終的にリモートリポジトリに反映(push)します。

 

もう一つはローカルPC上のローカルリポジトリです。ローカルPCで更新した内容は、

まずローカルリポジトリ上に反映(commit)し、その後リモートリポジトリに反映(push)します。

 

2.コミットとプッシュとプルとクローン

1の説明で簡単に触れましたが、

コミット(commit)とプッシュ(push)とプル(pull)とクローン(clone)についてざっくり説明します。

コミット(commit)

ローカルPCでファイルの更新や追加した内容をローカルリポジトリに保存すること

 

プッシュ(push)

ローカルPCでローカルリポジトリに保存した内容をリモートリポジトリに反映すること

 

プル(pull)

リモートリポジトリ内容をローカルリポジトリに反映すること

 

クローン(clone)

リモートリポジトリ内容をまるごと複製してローカルリポジトリを作成すること

 

GITの操作として、まずは上記4つのを覚えましょう。

 

3.ワーキングディレクトリとインデックスとローカルリポジトリとの関係

関係を絵にするとこんな感じです。

先ほど、コミットとは

「ローカルPCでファイルの更新や追加した内容をローカルリポジトリに保存すること」

と説明しましたが、実はコミットまでには以下の細かいステップがあります。

  1. ローカルPCのワーキングディレクトリ上でgit管理資材の更新
  2. 更新内容をインデックスにステージ(インデックスにステージされた変更のみ次コミットに含まれる)
  3. ローカルリポジトリへ更新内容をコミット
  4. (リモートリポジトリへプッシュ)

GitHubを使う前の説明は以上です。

 

 

GitHub上の資材をcloneしてpushする手順

GitHub上の資材をcloneしてupdate、pushするまでの手順について説明します。

手順は以下です。

  1. GitHub上のリモートリポジトリURL確認
  2. 資材をクローンしてローカルリポジトリ作成
  3. 資材の更新
  4. 更新内容をコミット&プッシュ

 

1.GitHub上のリモートリポジトリURL確認

GitHubにログインしてURLをリポジトリのURLを確認します。

 

2.資材をクローンしてローカルリポジトリ作成

ターミナルを開き、任意のディレクトリ内でリモートリポジトリをクローンします。

command
$ git clone https://github.com/○○○/helloworld.git

3.資材の更新

任意のファイルを更新します。

本記事では以下ファイルを更新します。

src/app/app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app update';//←文言を更新
}

4.更新内容をコミット&プッシュ

ターミナルを開き、クローンしたプロジェクト内にカレントディレクトリを移します。

command
cd helloworld/
更新内容を確認します。
command
$ git diff
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 7b0f672..31a396c 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -6,5 +6,5 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  title = 'app';
+  title = 'app update';//←文言を更新
 }
問題なければ更新内容をindexにstageします。
command
$ git add .
ローカルリポジトリに更新内容をコミットします。
command
git commit -am "comment"
更新内容をリモートリポジトリにプッシュします。
command
$ git push https://github.com/○○○/helloworld.git
GitHubにを開いてpushが正常に行えたことを確認します。

上のように更新内容がGitHub上で確認できたら完了です。

 

ちなみに、この状態で他の人がリモートリポジトリを更新した場合、

ターミナル上で以下コマンドを実行してpullすることによって、

ローカルリポジトリに更新内容を反映できます。

command
$ git pull https://github.com/○○○/helloworld.git

おわりに

本記事では、GitHub上で管理されているソースコードに対して、

clone⇒update⇒pushまでを行う手順(コマンド操作)について説明しました。

 

今回は入門編ということで、コマンド操作について解説しましたが、コマンドで操作するのが面倒な方は、

TortoisGit、EGitなどのGUIで操作できるツールがオススメです。

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください