【Webエンジニアへの道】Gitで遊んでみよう！

こんにちは、SHOOTです。

今回は、遊びを通してGitコマンドをある程度使いこなせるようになろうという企画です！

Gitとは、ソースコードを管理するためのツール。
まさに、
「Gitを制するものはWeb系を制する」

と言っても過言ではないでしょう。（少し言い過ぎかも）


私が業務でよく使うGitコマンドのみを取り上げたので、特に初心者の方はぜひ参考にしてください。

＜必要条件＞
・Gitをインストールしていること

まず、Gitをなんとなく説明

先ほど申し上げた通り、Gitはソースコードを管理するためのツールです。
仕事では複数人のエンジニアがプロジェクトに関わるので、

「誰がどこの部分まで実装したね。」とか、
「ここの部分メインのコードに反映しよう。」とか、
「ここのコードはこう書いた方が良いんじゃない？」

みたいなことが全てわかるようになります。


それではどうやって管理していくのでしょうか？

簡単に言うと、レポジトリというプロジェクトの箱に

「add」→「commit」→「push」

というプロセスを経てソースコードが更新されていきます。


実は、レポジトリはローカルリポジトリとリモートリポジトリが存在します。

ローカルリポジトリは自分のパソコンに存在している箱、
リモートリポジトリはサイト(Github)上に上がっている箱です。

ソースコードの大元は、「master」ですが、
branchを行うとソースコードが分岐します。


各開発者がそれぞれのブランチで開発を進め、「master」にマージって感じで進めていきます。

それでは、早速コマンドを打ち込んで遊びながら習得していきましょう。

ローカルレポジトリで遊んでみよう！

バージョン管理開始！

mkdir gitgit && cd gitgit
git init

mkdirでgitgitというディレクトリを作り、そこに移動します。
git initでgitでのソースコード管理がスタートです！
(.gitという隠しファイルが作成されます)

touch gitgit.html
vi gitgit.html

touchコマンドでファイルを作成します。

viはターミナル上で実行できるテキストエディタです。
iを押して編集モードにし、以下のように適当に書き込みます。
書き終わったらesc押して:wqと打ち込み、Enter!

viは覚えておくと便利ですよ！

gitgit.html

A

addしてcommitします。
pushはリモートリポジトリにプッシュするときに使うコマンドなので、今の所は封印。
-mのオプションはコミットするときにメッセージを残せます。

git add gitgit.html
git commit -m "first commit"

コミットのステータスを以下のコマンドで確認できます。

git status

git checkoutを使ってブランチを３つ作ります。
-bのオプションはブランチ移動と同時に新規作成するという意味です。

git checkout -b feature-a
git checkout -b feature-b
git checkout -b feature-c

作ったブランチは以下のコマンドで確認できます。

git branch

今はmasterにいます。
feature-bというブランチに移動します。

git checkout feature-b

viコマンドを使ってさっき作ったファイルを以下のように編集します。

vi gitgit.html

gitgit.html

A
B

addしてcommitしますー。

git add .
git commit -m "message"

ここで一回マスターに戻って再びadd, commitします。

git checkout master
vi gitgit.html

gitgit.html

A
C

git add gitgit.html
git commit -m "second commit"

さてここでブランチの内容をマスターに取り込んでみましょう！
git mergeコマンドの登場です。

git merge feature-b

conflictが起きているためマージできません。
同じファイルを２人で編集してしまったため、起こります。

こうなったら手作業で編集してconflictを解消するしかありません。

ビビる必要はないです！どっちかを採用するか、両方採用するかを選べばいいのです！

vi gitgit.html

========の上（HEAD）が今いるブランチ（マスター）の記述。
下が取り込もうとしているブランチの記述です。
以下のように編集してやりましょう！

gitgit.html

A
C
B

git add .
git commit -m "conflict fix"

編集したものをコミットして、もう一度マージします。

git merge feature-b

マージできました！最後にcommit logを見てみましょう。

git log --graph

一度マスターから分岐して、マージしたときに合流したのが確認できます。面白いですよね！

今回の記事では、様々なgitコマンドが登場しました。
add, commit, status, checkout, log, merge

これらのコマンドは実際の業務でも多く出てくるので、Web系目指す人はぜひ理解しておきましょう！
（SHOOTは入ってから知ったから恥ずかしかった。。。笑）

次回は、今回作成したローカルリポジトリをリモートリポジトリ（Github）にpushしたいと思います！