【自主学習の記録 part1】GitLabの基本的な使い方その2

#概要
前回に引き続きGitLabのプロジェクトの使い方について学習した内容を掲載します。
今回は以下の内容を実施していきます。
・作成したプロジェクトにテキストファイルを作成
・プロジェクトをローカルへクローン
・ローカルブランチ上でテキストファイルを修正し、テキストファイルをリモートブランチへプッシュ
・マスターブランチへマージ

##作成したプロジェクトにテキストファイルを作成
まずは、前回作成したプロジェクトを開きます。
現時点ではプロジェクト上には何も入っていない空の状態となっていますので、適当なテキストファイルを追加したいと思います。
![GitLab01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/858317/59877eb6-93c4-e638-bf69-ed2d50224c5b.png)

プロジェクトの「新規ファイル」を選択します。
![GitLab02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/858317/4a8cbfe4-bfc9-c935-ef13-852dc080ba2c.png)

すると以下の通りファイルの新規作成画面に移動します。
設定した項目は以下3点です。
・「File name」に任意のファイル名を入力
・黒い画面になにか入力
・コミットメッセージの「Add new file」の部分を分かりやすい文に修正
コミットメッセージ欄はデフォルトのままでも特に問題は無いですが、そのファイルに対してどういった変更を加えたか等を残しておきます。

![GitLab03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/858317/bbc3aac5-6c01-5989-de96-7787c459fdd6.png)

今回は以下の通り入力しました。
入力が完了しましたら、「Commit changes」をクリックします。
![GitLab04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/858317/f60e5db7-c0d7-838d-8adf-294e1c45574f.png)
「Commit changes」完了後、以下の画面に移動します。
これでプロジェクトにテキストファイルが作成されました。
![GitLab05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/858317/cb0541ae-ff59-bc42-65fe-71ffe9a5fe00.png)

##プロジェクトをローカルへクローン
プロジェクト上のファイルは通常GitLab上で直接修正するのではなく、GitLabのプロジェクトをローカルにクローンし、ローカル上のファイルを修正します。
なので先程作成したテキストファイルをローカルPCにクローンします。
なお、通常Windowsの場合はそのままではGitLabのプロジェクトをクローンする事が出来ませんので、Gitに関連したツールをインストールする必要があります。
私はGit for Windowsをインストールして使用しています。
Git for Windowsのダウンロードは[こちら](https://gitforwindows.org/)から。
以下はGit for Windowsをインストールすると使用できるGitBashです。
※ユーザー名等は伏せています
![GitLab06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/858317/a2510687-3c26-853c-4d69-50895ae08b9f.png)
GitLabのプロジェクトページに戻ります。
プロジェクトページの「クローン」をクリックしますと、「SSHでクローン」と「HTTPでクローン」の2種類があります。
両者の違いはクローン実施時の認証方法の違いです。HTTPの場合はクローン時にGitLabのユーザー名とパスワードを入力して認証しますので、ユーザー名とパスワードを知っていれば誰でもクローン出来てしまいます。
SSHの場合はGitLabのプロジェクトに登録した端末の公開鍵を元に認証しますので、登録されていない端末からのクローンは拒否されます。
前回SSHの公開鍵を登録していますので、今回はSSHでクローンを実施してみたいと思います。
「SSHでクローン」の右側にボードのようなアイコンがあります(青い四角の枠)ので、そちらをクリックします。
![GitLab07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/858317/7a22b89b-fb01-930a-e04c-848fc73c8a2f.png)
次にGit Bashに戻り、以下のコマンドを入力します。
コマンドの後ろに、GitLabでコピーしたコマンドを貼り付けて実行します。

```
git clone 
```

![GitLab08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/858317/a353bd1d-d335-6a02-a611-0592f8517b4a.png)
以下画像の様な結果となれば、無事クローン完了です。
```ls -l```等のコマンドでカレントディレクトリ内を確認してみると、クローンしたプロジェクト名のディレクトリが追加されていると思います。
分かりづらいかもしれませんが、水色の四角で囲ったディレクトリがクローンしたプロジェクトのディレクトリです。
![GitLab09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/858317/666d31df-52ec-0d76-d1de-0ae8529593c5.png)
上記のプロジェクト名のディレクトリへ、```cd ```コマンドで移動します。
再び```ls -l```を実行しますと、先程GitLab上で作成したテキストファイルが存在しています。
※ちなみに```ll```コマンドを実行すると```ls -l```コマンド実行時と同様の結果が返ってきます
![GitLab10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/858317/ebb56643-89c9-d4be-5526-5a3ee823ebaa.png)
以上でプロジェクトのクローンは完了です。
なお、プロジェクトをクローンして、プロジェクト名のディレクトリに移動した際に、パス名の右側に青い文字で(master)と表示されていました(具体的には以下画像の黄色の枠内)が、これは何かといいますと現在作業しているブランチです。
![GitLab13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/858317/e98a22dc-695f-7b71-f631-59be3571dcd1.png)

ブランチとは、枝の事を言います。一つのプロジェクトに対して複数のブランチを分ける事で複数メンバーの開発・管理がしやすくなります。
例えば現行バージョンのマスターブランチに対し、新たに機能を追加する場合にマスターブランチをクローンして開発用のブランチを切り、そこで更に細かい機能ごとのブランチを切って開発作業を行う、といった事などが可能です。(開発に携わった事が無いので詳しくはわかりませんが…)
話を戻しますと、この青文字の(master)と表示されているのは、名前通りマスターブランチ(原本)になります。
マスターブランチのまま作業をする事はあまり一般的ではないと思いますので、事前にブランチを切り替えたいと思います。
まずは以下のコマンドを入力し、現在のブランチを確認します。

```
git branch -a
```

-aオプションを追加する事でリモートブランチとローカルブランチの両方を一覧表示する事ができます。
緑文字がローカルブランチで、赤文字がリモートブランチとなっています。
ブランチ名の左に*がついているブランチが、現在のブランチです。
そしてリモートブランチに「HEAD」というブランチがありますが、これはローカルにクローンした際に参照したブランチの事を指すようです。
右側に「origin\master」とありますので、クローンした際には、masterブランチを参照したという意味合いになるようですね。
![GitLab14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/858317/bc12f9d4-6a51-d1d1-b035-c5ef992cff60.png)

では、masterブランチから別のブランチに切り替えたいと思います。
以下のコマンドを実行し、ブランチを切り替えます。
現時点ではブランチはmasterしかないので、-bオプションを追加してブランチの作成と切り替えを同時に行います。
```<ブランチ名>```は今は任意の名前を入力します。今回はdevelopと入力しました。

```
git checkout -b <ブランチ名>
```

以下の通りブランチの切り替えを行うと、青枠の箇所が(master)から(develop)に変わっています。
また、```git branch -a```を実行すると、作成したdevelopブランチに*マークが付き、文字が緑色で表示されています。
![GitLab15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/858317/07dae358-3d57-f024-b01e-9192bc2322b2.png)
以上でブランチの切り替えも完了しましたので、ローカル上でテキストファイルの編集を行います。

##ローカルブランチ上でテキストファイルを修正し、テキストファイルをリモートブランチへプッシュ
GitLabのプロジェクトからテキストファイルをクローン出来ましたので、次はこのテキストファイルを編集し、GitLab上のリモートブランチへプッシュします。
まずはテキストファイルの編集ですが、ごく普通のテキストファイルなので、編集する手段は何でも良いと思います。
私はGitBash上からviエディタを使用し、直接編集しました。
下記画像の一回目の```cat test.txt```の実行結果は、編集前のtest.txtファイルの中身で、二回目の```cat test.txt```の実行結果はviエディタで編集した後のtest.txtファイルの中身です。
青枠内を追記しています。
![GitLab11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/858317/162cdcdc-de43-6b1b-500c-3a0469611e76.png)

テキストファイルの修正が完了したので、早速GitLab上のリモートブランチへプッシュしたいと思います。
プッシュを実施する前に以下のコマンドを入力し、変更対象のファイルを追加します。

```
git add <変更対象ファイル名>
```

<変更対象ファイル名>のところは、カレントディレクトリ内にあればファイル名を直接入力します。
ディレクトリ内にある場合は相対パスを入力します。
変更対象ファイルは```git add A.txt B.txt```の様に複数入力できますし、```git add .```と入力すればカレントディレクトリ配下の全てのファイルを対象とする事もできます。(コンフリクトや修正発生時等、色々大変になるかもしれませんが・・・)
先程編集しました「test.txt」を追加しますので以下画像の通りaddしてみたところ、なにやらwarningが表示されてしまいました。
![GitLab16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/858317/b63b2158-1c33-0ec3-2dcf-810ff8a16ba2.png)
どうやら改行コードの問題らしく、GitLabが改行コードLFをWindowsのCRLFに自動で変換しようとしている事が原因だそうです。
以下のコマンドを実行すると自動変換を無効化できるそうなので、実行しました。

```
git config --global core.autoCRLF false
```

参考サイト様:https://normalblog.net/system/lf_replaced_crlf/


その後、再度addを実施してみましたところ、無事解消されました。
![GitLab17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/858317/28f3fc2a-9917-e92b-d71d-cf54776581c2.png)

変更対象のファイル追加が完了しましたので、コミットしていきます。
コミットを実施するコマンドは以下です。

```
git commit -m "<コミットメッセージ>"
```

<コミットメッセージ>には、先程テキストファイルを作成した際に入力したコミットメッセージと同様、コミット時に残すメッセージを入力します。
全角でも問題ないと思います。
ちなみに複数コミット対象のファイルが存在する場合は、-aオプションを追加します。
今回は1ファイルしかないので以下の通りコミットしてみました。
![GitLab18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/858317/cd4269c5-3d2f-56ac-421d-07f401565b87.png)

コミット完了後、以下のコマンドを実行し、コミットした内容をリモートへプッシュします。
このoriginとははリモートブランチ、すなわちGitLab上のブランチの事を言います。

```
git push origin <ローカルブランチ名>
```

プッシュが正常に完了すると以下画像の様な表示になります。
特に「push success」みたいなメッセージが出るわけではないようです。
![GitLab19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/858317/41095c70-39ab-0fd8-e6f9-6b8848e7e7e9.png)
以上で修正したテキストファイルをリモートリポジトリへプッシュが完了です。

##マスターブランチへマージ
修正した内容をマスターブランチへ反映させるためにマージを行います。
マージはWeb上で簡単に行うことが出来ます。
まずはGitLabのプロジェクトのページへ移動します。
すると画面右上に「マージリクエストを作成」というボタンが表示されていますので、クリックします。
![GitLab20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/858317/420ca6d3-6707-8bc7-2f58-8a6e07e12da4.png)

「マージリクエストを作成」をクリックすると以下の画面に移ります。
ここでは主に「タイトル」と「Description」の項目を修正します。
タイトルはコミット時に入力したコミットメッセージが入力された状態となっています。そのままで良ければ編集不要です。
Descriptionには具体的な修正内容等を入力する為の項目となっています。
入力は強制ではありませんが、例えばmasterリポジトリへのマージ権限をもつユーザーにマージ依頼する際のレビュー等に活用できそうです。
その他の項目については余力があれば調べてみたいと思います。
入力が完了したら、「Submit マージリクエスト」ボタンを押下します。
![GitLab21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/858317/8781fd2f-d527-3a08-08bf-03c3630d029a.png)

マージリクエストを実施しましたが、まだ完了ではありません。
マージリクエスト実施後に以下の画面に移りますので、ここで「マージ」ボタンをクリックすることでマスターブランチへのマージが行われます。
なお、この画面はマージ対象をチームリーダー等のレビューを想定して作られているようで、コメントの投稿機能やマージ対象ファイルの差分確認機能等が備わっているようです。
このあたりは流石ソースコードの管理に特化しているだけありますね。
![GitLab22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/858317/193bcfa0-a03c-4128-27ef-79464a7fa9dd.png)
ちなみに上記画面内の「Web IDEで開く」をクリックすると、以下の画面に移動し、差分がひと目で分かるようになっています。
![GitLab23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/858317/0e39746a-a0de-c350-27f8-ccb7545e2fc9.png)
先程のマージリクエスト画面にて「マージ」ボタンを入力しますと、masterブランチにマージされたというコメントが追加されます。
これでマスターブランチへのマージまで完了しました。
![GitLab24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/858317/66702a29-2da5-c466-1834-ef4a7dcb2da1.png)

プロジェクトのトップ画面へ戻りますと、コミットした時のメッセージが表示されています。
![GitLab25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/858317/e9f455c4-47f3-bc4e-c9f0-30afb1fa236f.png)
対象のtest.txtファイルをクリックすると、修正した内容が反映されている事がわかります。
![GitLab26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/858317/fadd7f4c-bb72-5503-1796-de4ade87cc3d.png)

以上でプロジェクトへテキストファイルの作成からローカルブランチ内で編集し、マスターブランチへの反映まで完了です。
次回はまだ決めていませんが、競合(コンフリクト)を発生させて、解消まで実施してみようかと思います。