目次
はじめに
前回までで、AngularやSpring Bootでいくつかサンプルプログラムを作成してきました。
システム開発現場では、作成したプログラムはバージョン管理システムでソースコードに対していつ、だれが、どのような変更を加えたかを管理するかと思います。
バージョン管理システムとしてはGITやSVNなどがよく利用されます。
今回はGIT入門編ということで、GITでclone、commit、pushなどの基本的な操作について練習してみたいと思います。
前提
以下が完了している前提で説明します。
- GitHubアカウント作成済み
- GitHub上にリポジトリ作成済み
まだの方は以下を参照下さい。

GitHubを使う前に
GitHubを使う前に以下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でファイルの更新や追加した内容をローカルリポジトリに保存すること」
と説明しましたが、実はコミットまでには以下の細かいステップがあります。
- ローカルPCのワーキングディレクトリ上でgit管理資材の更新
- 更新内容をインデックスにステージ(インデックスにステージされた変更のみ次コミットに含まれる)
- ローカルリポジトリへ更新内容をコミット
- (リモートリポジトリへプッシュ)
GitHubを使う前の説明は以上です。
GitHub上の資材をcloneしてpushする手順
GitHub上の資材をcloneしてupdate、pushするまでの手順について説明します。
手順は以下です。
- GitHub上のリモートリポジトリURL確認
- 資材をクローンしてローカルリポジトリ作成
- 資材の更新
- 更新内容をコミット&プッシュ
1.GitHub上のリモートリポジトリURL確認
GitHubにログインしてURLをリポジトリのURLを確認します。
2.資材をクローンしてローカルリポジトリ作成
ターミナルを開き、任意のディレクトリ内でリモートリポジトリをクローンします。
$ git clone https://github.com/○○○/helloworld.git
3.資材の更新
任意のファイルを更新します。
本記事では以下ファイルを更新します。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app update';//←文言を更新
}
4.更新内容をコミット&プッシュ
ターミナルを開き、クローンしたプロジェクト内にカレントディレクトリを移します。
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で操作できるツールがオススメです。