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

この記事を読むのに必要な時間は約 10 分です。

はじめに

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

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

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

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

前提

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

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

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

GitHubを使う前に

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

１．ローカルリポジトリとリモートリポジトリ

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

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

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

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

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

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

２．コミットとプッシュとプルとクローン

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

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

コミット(commit)

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

プッシュ(push)

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

プル(pull)

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

クローン(clone)

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

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

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

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

先ほど、コミットとは

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

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

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

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

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

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

手順は以下です。

１．GitHub上のリモートリポジトリURL確認

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

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

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

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

３．資材の更新

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

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

import { Component } from '@angular/core';

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

４．更新内容をコミット&プッシュ

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

cd helloworld/

$ 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';//←文言を更新
 }

$ git add .

git commit -am "comment"

$ git push https://github.com/○○○/helloworld.git

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

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

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

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

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

おわりに

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

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

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

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