釣りキチエンジニアのブログ 
目次
はじめに
前回までで、AngularやSpring Bootでいくつかサンプルプログラムを作成してきました。
システム開発現場では、作成したプログラムはバージョン管理システムでソースコードに対していつ、だれが、どのような変更を加えたかを管理するかと思います。
バージョン管理システムとしてはGITやSVNなどがよく利用されます。
今回はGIT入門編ということで、GITでclone、commit、pushなどの基本的な操作について練習してみたいと思います。
前提
以下が完了している前提で説明します。
- GitHubアカウント作成済み
- GitHub上にリポジトリ作成済み
まだの方は以下を参照下さい。
【Heroku入門（2）】GitHubと連携してアプリを自動デプロイしてみる
GitHubを使う前に
GitHubを使う前に以下３点について最初に説明します。
- ローカルリポジトリとリモートリポジトリ
- コミットとプッシュとプルとクローン
- ワーキングディレクトリとインデックスとローカルリポジトリとの関係
１．ローカルリポジトリとリモートリポジトリ
ローカルリポジトリとリモートリポジトリとの関係を絵にするとこんな感じです。
上の絵を見ると、２種類のリポジトリがあることが分かります。
一つはネットワーク上のリモートリポジトリです。ローカル PCで更新した内容は、
最終的にリモートリポジトリに反映(push)します。
もう一つはローカルPC上のローカルリポジトリです。ローカルPCで更新した内容は、
まずローカルリポジトリ上に反映(commit)し、その後リモートリポジトリに反映(push)します。
２．コミットとプッシュとプルとクローン
１の説明で簡単に触れましたが、
コミット(commit)とプッシュ(push)とプル(pull)とクローン(clone)についてざっくり説明します。
コミット(commit)
ローカルPCでファイルの更新や追加した内容をローカルリポジトリに保存すること
プッシュ(push)
ローカルPCでローカルリポジトリに保存した内容をリモートリポジトリに反映すること
プル(pull)
リモートリポジトリ内容をローカルリポジトリに反映すること
クローン(clone)
リモートリポジトリ内容をまるごと複製してローカルリポジトリを作成すること
GITの操作として、まずは上記４つのを覚えましょう。
３．ワーキングディレクトリとインデックスとローカルリポジトリとの関係
関係を絵にするとこんな感じです。
先ほど、コミットとは
「ローカルPCでファイルの更新や追加した内容をローカルリポジトリに保存すること」
と説明しましたが、実はコミットまでには以下の細かいステップがあります。
- ローカルPCのワーキングディレクトリ上でgit管理資材の更新
- 更新内容をインデックスにステージ(インデックスにステージされた変更のみ次コミットに含まれる)
- ローカルリポジトリへ更新内容をコミット
- (リモートリポジトリへプッシュ)
GitHubを使う前の説明は以上です。
GitHub上の資材をcloneしてpushする手順
GitHub上の資材をcloneしてupdate、pushするまでの手順について説明します。
手順は以下です。
- GitHub上のリモートリポジトリURL確認
- 資材をクローンしてローカルリポジトリ作成
- 資材の更新
- 更新内容をコミット&プッシュ
１．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で操作できるツールがオススメです。
