🐵

Web開発者ロードマップを学習する第１章 Git〜バージョン管理〜

2021/01/30に公開

Git

tech

はじめに

WEB DEVELOPER Roadmap 2021 に
webエンジニアが身につけておくべきスキルの順序が示されています。
このロードマップに沿って、各スキルの要点を抑えた記事を書きます。

WEB DEVELOPER Roadmap 2021 Introduction

今回はGitについて学習します。
まとめた記事は今後リンク更新していきます！

Gitとは?

Gitの公式サイト

Gitは分散型バージョン管理システムの一つです。

ファイルのバージョン管理ができる
一度編集したファイルを編集する前に戻せる
ファイルの編集履歴を複数人で共有できる
複数人で編集した箇所を一つにまとめることができる

といった特徴があります。
ファイルの変更履歴を保存、共有できるので開発などの作業効率がグンっと上がります。

分散型バージョン管理システムについてはこちらの記事がわかりやすいです。
→マンガでわかるGit 第6話「集中型と分散型、何がどう違うの？

Gitの操作

GitはCUIとGUI両方で操作が可能です。
今回の記事はCUIメインです。

CUIのメリット
• 操作方法がシンプル
• 細かい操作が可能
• 操作履歴が確認できる
• 操作にかかる時間が短い

CUIのデメリット
• コマンドが多い
• 直感的にわかりにくい
• 慣れるまで時間がいる

GUIメリット
• 直感的に操作ができる
• 初心者が利用しやすい

GUIのデメリット
• 複雑な操作ができない
• 容量を使う
• バージョンが変わるたび、アイコンなどの配置が変わる可能性大

※CUI（キャラクターユーザーインターフェイス） または
　CLI（コマンドラインインターフェイス）:　キーボードのみで操作すること。

※GUI（グラフィカルユーザーインターフェイス）:　画面上で操作すること。画面クリックなど

Gitの公式サイト：GUIの一覧

CUIとGUIのイメージがつきやすくなると思うので読んでみてください。
→マンガでわかるGit～コマンド編～リポジトリをつくってコミットをしてみよう

Gitの歴史

LniuxというOSを作ったリーナス・トーバルズという方がGitの生みの親
Linuxカーネルを効率よく管理するためにつくられた
Gitが生まれる前はBitKeeperという商用のバージョン管理システムが使われていた
BitKeeperの開発元の協力により無償で使われていた
ライセンスによる問題が起きて別のバージョン管理システムを
使わなければいけなくなってしまった
ないならつくってしまおうということで2005年に誕生

※OSというのは簡単にいうとコンピューターを制御して動かすものです。
例:　Windows, macOS, iOS, Unix

※LinuxカーネルというのはOSであるLinuxの中核部分で、
　アプリケーションとハードウェアの仲介役をしています。

Gitをインストールする方法

GitをHomebrewの配下にダウンロードします。
Homebrewとはパッケージ管理ソフトのことです。
Homebrewをインストールした後、
Homebrewの配下にパッケージをダウンロードできます。

メリット

パッケージのダウンロードが簡単
パッケージのアップロードも簡単
パッケージのアンインストールも簡単

※Macの方は初期設定でGitがすでにダウンロードされている可能性があります。
下のコマンドで確認してみてください。　バージョンが表示されればOKです。
しかし、古いバージョン（1系）であればアップデートすることをおすすめします。
大丈夫であればGitの初期設定へ進んでください。

$ git --version
git version 2.24.3 (Apple Git-128)

https://brew.sh/index_ja
Homebrew公式サイト

Homebrewをダウンロードできたら

下の記事を参考にしてGitをダウンロードしてみましょう。

Gitの初期設定

Gitのダウンロードが完了したら初期設定が必要なので初期設定をしましょう。

Gitの基本的な用語

リポジトリ

リポジトリとは、ファイルやディレクトリを保存しておく場所です。

リポジトリには２種類あり、

リモートリポジトリ：複数人で共有するためのリポジトリ
ローカルリポジトリ：ユーザーが手元のマシンで利用するためのリポジトリ

普段の作業はユーザーが手元のローカルリポジトリで行い、
作業内容を共有するときにリモートリポジトリにアップします。

clone（クローン）

クローンとは、リモートリポジトリをローカルリポジトリにコピーすることです。

コマンドの例

$ git clone　クローンしたいリポジトリのURL

GitのクローンはHTTP通信とSSH接続、両方で可能です。
リモートリポジトリにアクセスする時、
HTTP通信だと毎回GitHubアカウントの認証を要求されることがあります。
GitHubアカウントをお持ちの方は下記の記事でSSH接続設定することをおすすめします。
→Mac GitHub SSH接続設定

commit(コミット)

コミットとは、ファイルやディレクトリの追加・変更を、リポジトリに記録することです。

ファイルを変更した日時を記録
ファイルの変更差分を記録
履歴を辿ることで過去の変更内容を確認できる
コミットする際はメッセージをつける

コマンドの例

$ git commit -m "コミットメッセージ"

ワークツリーとステージングエリア

ユーザーが実際に作業をしているディレクトリのことをワークツリーと言います。
リポジトリとワークツリーの間にステージングエリアというものが存在しています。

ワークツリーからステージングエリアにファイルを登録（add）
ステージングエリアからローカルリポジトリにコミット

ステージングエリアを挟む理由

必要ないファイルを含めず（ファイルの一部だけを）コミットできる
コミットするときのミスを減らせる

add（アド）

ワークツリーで編集したファイルなどをステージングエリアに登録することです。

. で編集ファイルを全て選択
ファイルを直接指定するのも可能

コマンドの例

$ git add　. 
$ git add sample.txt

push（プッシュ）

プッシュとは、ローカルリポジトリにコミットされたファイルを
リモートリポジトリに共有するためにアップすることです。

pull(プル)

プルとは、リモートリポジトリから最新の状態のファイルを
ローカルリポジトリにダウンロードすることです。

他のユーザーがファイルを変更、リモートリポジトリにアップ(push）
リモートリポジトリのファイルが更新
更新（変更）されたファイルをダウンロード（pull）

SourceTreeを使っていますがイメージの参考にしてみてください。
→マンガでわかるGit　GitHubを使ってみよう push・pull編

branch(ブランチ)

ブランチとは、ファイルの変更履歴を分岐して記録するためのものです。

メインのブランチから各作業するメンバーごとにブランチを作成
作業後メインブランチに変更を取り込む

メリット

他のブランチから（他のメンバーの作業の）影響を受けない
複数のメンバーが並行して、機能追加、バグ修正ができる

より詳しいブランチの説明はこちらを参考にしてみてください。
→マンガでわかるGit ～コマンド編～ブランチとは？

merge(マージ)

マージとは、各ユーザーの作業によって分岐した履歴（ブランチ)を一つに取り込むことです。

マンガでわかるGit ～コマンド編～　マージの仕組みを見てみよう

init(イニット)

新しいローカルリポジトリを作ることです。

コマンドの例

$ git init

stutas（ステータス）

現在のファイルの状態を確認できます。

コマンドの例

$ git status

ステージングエリアにaddしてない時の表示
コマンドラインでみてみるとmodified: sample.txtが赤色になっているはずです。
赤色で表示されるファイルはステージングエリアに登録されていないということです。
Zennの仕様のせいなのか、記事では赤色になっていませんが、、、

コマンドの例

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
	modified:   sample.txt

no changes added to commit (use "git add" and/or "git commit -a")

ステージングエリアにaddした後の表示
今度はnew file: sample.txtが緑色になっているはずです。
緑色で表示されるファイルはステージングエリアに登録されているということです。
記事ではなってないけど、、、

コマンドの例

On branch master

No commits yet

Changes to be committed:
  (use "git rm --cached <file>..." to unstage)
	new file:   sample.txt

コミット後、変更差分がなくなった時の表示

コマンドの例

On branch master
nothing to commit, working tree clean

イニットからコミットまでの流れを説明ているので参考にしてみてください
→マンガでわかるGit ～コマンド編～リポジトリをつくってコミットをしてみよう

log(ログ)

コミット履歴を確認することができます。
下記が記録されています。

コミットID　コミット履歴を識別するもの
コミットした人
時間
メッセージ履歴

コマンドの例

$ git log
commit d384465e9b78bb21b1c645342d150215d768ecb7 (HEAD -> master)
Author: name <.....@mail.com>
Date:   Tue Jan 19 14:57:19 2021 +0900

    最初のコミット

rebase（リベース）

コミット履歴を直線上にまとめて履歴をみやすくします。

マージとリベースの違いはこちらを参考にしてみてください。
→サル先生のGit入門　ブランチの統合

※マージとリベースは、チームの運用方針に応じて使い分けます。

diff（ディフ）

編集差分を確認することができます。

直前のコミットと今編集中のワークツリーとの差分がわかる
ーは変更前、＋は変更後を示している

コマンドの例

$ git diff
diff --git a/sample.txt b/sample.txt
index e93d1b0..7c89aff 100644
--- a/sample.txt
+++ b/sample.txt
@@ -1 +1 @@
-“Hello Git”
+Git

その他にもGitで使われる用語はあるので下にリンク貼っておきます

https://zukulog098r.com/git/

コマンド実行例

// sampleディレクトリを作る
$ mkdir sample 

// sampleディレクトリに移動
$ cd sample 

// リポジトリを作る
$ git init 

// Hollo Gitと書かれたテキストファイルを作る
$ echo "Hello Git" > sample.txt

// ディレクトリの中身を確認する
$ ls
sample.txt

// ファイルの状態を確認(ステージングエリアにはことを確認)
$ git status
On branch master

No commits yet

Untracked files:
  (use "git add <file>..." to include in what will be committed)
	sample.txt

nothing added to commit but untracked files present (use "git add" to track)

// . か　ファイルを直接指定する
$ git add . / sample.txt

// ファイルの状態を確認（ステージングエリアにあるのを確認）
$ git status
On branch master

No commits yet

Changes to be committed:
  (use "git rm --cached <file>..." to unstage)
	new file:   sample.txt

// メッセージをつけてコミット
$ git commit -m "最初のコミット"

// コミット履歴確認（コミットされていれば以下のようになる）
$ git log  
commit d384465e9b78bb21b1c645342d150215d768ecb7 (HEAD -> master)
Author: name <.....@mail.com>
Date:   Tue Jan 19 14:57:19 2021 +0900

    最初のコミット

// ディレクトリ内のsampleテキストを"Hollow Git"から"Git"に変更
$ echo "Git" > sample.txt   

// 差分を確認してみる
$ git diff
diff --git a/sample.txt b/sample.txt
index e93d1b0..7c89aff 100644
--- a/sample.txt
+++ b/sample.txt
@@ -1 +1 @@
-“Hello Git”
+Git

// 各自自分で変更内容をaddしたりコミットしてみてください

一例ですが流れはこんな感じです

マンガでわかるGit

1度全話読んでみることをおすすめします。
Gitを使う際の流れをマンガで説明してくれています。

上に続き、今度は実際にGitのコマンドを使っていく流れ、
コマンドの意味ををマンガで説明してくれています。
これを読み終わった頃には、もうあなたは脱Git初心者。

もっとGitのコマンドを知りたいという方はこちら

下の記事はより詳しいGitの知識とコマンド操作の仕方がまとめられています。
読んでおくとよりGitへの理解が深まると思います。
Gitでやりたい操作の仕方がわからない時や問題が起きた時などの逆引き辞書としても利用できるでしょう。

サル先生のGit入門 https://backlog.com/ja/git-tutorial/intro/01/
マンガでわかるGit　https://next.rikunabi.com/journal/tag/webdesign-manga/
マンガでわかるGit ～コマンド編～　https://www.rstaffing.co.jp/engineer/entry/20190621_1

あとがき

今回の記事は自分が最初の頃に知っておきたかった内容をまとめています。　私自身gitは何となく使っていましたが、ここまで多くのコマンド操作が可能なことに感動しました笑　この記事がgitについて学びたいけど、どう学んだらいいかわからない方や復習したい方のお役に立てれば幸いです。

はじめに

WEB DEVELOPER Roadmap 2021 Introduction

Gitとは?

Gitの操作

Gitの歴史

Gitをインストールする方法

Homebrewをダウンロードできたら

Gitの初期設定

Gitの基本的な用語

リポジトリ

clone（クローン）

commit(コミット)

ワークツリーとステージングエリア

ステージングエリアを挟む理由

add（アド）

push（プッシュ）

pull(プル)

branch(ブランチ)

merge(マージ)

init(イニット)

stutas（ステータス）

log(ログ)

rebase（リベース）

diff（ディフ）

その他にもGitで使われる用語はあるので下にリンク貼っておきます

コマンド実行例

マンガでわかるGit

もっとGitのコマンドを知りたいという方はこちら

あとがき

Discussion