GitLabにファイルをあげてみた



### 自己紹介
はじめまして。主にunity、C#を勉強中です。ただいま求職中の初学者です。
今年の4月にジーズアカデミーを卒業しました。経験値は０に近い初学者です。
    
### きっかけ
Unityで作っていて、１度作ってみて失敗したら最初から作り直したり、AパターンとBパターンどちらも試してみたいので二つプロジェクトを用意したり、前回作ったものを今回ので使ってみようとおもった時、どこを必要とするのか分からなくなり結局最初から作り直すというすごく時間と手間がかかるので、個人でやるにしてもチームでやるにしても、バージョン管理はこれから作る内容が複雑になっていけばいくほど必要だと思いまして、Gitの勉強を始めました。
Unityで開発していく上でプロジェクトディレクトリの大きさを考えるとGitLabの方が実用的だと実際にエンジニアとして活躍されている方々からお聞きしましたのでGitLabを選択しました。
実際に、Gitを触るとなるとジーズアカデミー在学中にVisualStudioCordとGitHubのやりとり（ブランチを切ってマージするなど）を学んですこし経験したくらいでしたので、Unityの画像や３Dデータなどのディレクトリがぎっしり詰まったプロジェクトディレクトリとコードエディターとGitLabがどうやって関連するのか、イメージすらつかない状態の時、先輩卒業生のアドバイスもあり、まずはディレクトリがどう動いていくのかUnityやコードエディタは無しで、GitLabを使って掴んでみてはという助言をいただきました。
ですので、今回はunityのプロジェクトデイレクトリは扱っていませんが、勉強の途中過程を覚書きとして記せれば良いと思います。

## 今回やること
在学中に「[Jackasson](https://twitter.com/jackasson_1223)」というLTイベントに出場した時に出した[プロジェクト](https://youtu.be/SSgpTLwCn3U)のファイル群（Unityではなく```.html``` ```.js``` ```.png```）をGitLabに上げてバージョン管理が出来る状態にしてみます。

## 環境・用意するもの
#### GitLabにあげたいファイル群
今回は```.html``` ```.js``` ```.png```のファイル群

#### Git Bash
パソコン内でGitの基本的なことをするコマンドツール。ターミナルやコマンドプロンプトと同じようなものです。
これを使用して、まずは自分のパソコンの中のファイルのバージョン、変更履歴をローカルリポジトリで管理してみることから始めました。
ダウンロード・インストールから```git config``` コマンドでユーザー名、メールアドレスを登録してある状態です。

以下の書籍は初学者にはわかりやすく参考にしました。
↓↓↓↓↓↓
「いちばんやさしいGit&GitHubの教本（インプレス）」
https://amzn.asia/d/fXTJyYf

	

#### GitLab.com
GitHubと並んで使われているリモートリポジトリを管理する場所です。
どこから手をつけていいか分からず、まずは[公式の日本語サイト](https://www.gitlab.jp/)を見ながら、アカウント作成,
2要素認証を有効化、パーソナルアクセストークンを生成、SSH 鍵の登録をしました。
SSH 鍵の登録は SSH 鍵の生成方法が初めてだったので、「わーどうしよう…」とググって進めました。
特にこちらの記事は参考にさせていただきました。
↓↓↓↓↓↓
https://engineer-ninaritai.com/gitlab-ssh/
	
#### VisualStudioCode
GitBashで```$ git config --global core.editor "code --wait"```と入力して連携させます。
追加ファイルを作成したり、GitBashとGitLabの中間で使用しました。橋渡し的な役割です。

# 内容
### 1. 新規プロジェクト作成（GidLab）
まずは、GidLab内にリモートリポジトリとなるプロジェクトを作成します。

・プロジェクト画面右上の新規プロジェクトボタンを押します。
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935244/95ba18b3-6228-9120-7e3e-164ae94384bd.png">

・空のプロジェクト作成を選択します。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935244/1ae0f781-86c6-fcf4-7085-d4e17d2b1837.png">

・プロジェクト名を決めます。ここでは「oppai_js」にしました。プロジェクト名を決めるとプロジェクトslugも自動的に決まります。表示レベルは、パブリックにしてみました。別に個人で使う場合はプライベートでいいと思います。
![sozai3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935244/f8ed35bd-1f17-c923-12c1-878a3fe234d5.png)

・プロジェクトが作成されました。ファイルは初期設定の「README.md」しか入っていません。
![sozai4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935244/785a547c-0194-0091-b401-473e99254d20.png)

### 2. ローカルリポジトリー作成

次にローカルリポジトリーを作っていきます。

・GitLabのプロジェクト’画面内でクローンを押し、「SSHでクローン」をコピーしておきます。
<img width="250" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935244/42da7a70-61e2-4ada-3785-85c30603e276.png">


・ここからはGitBushで進めて行きます。 ```cd``` コマンドで、ローカルリポジトリを作成（保存）する場所に移動します。ここではDocuments内にしています。

![sozai10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935244/36f161ce-3ea6-c245-724c-3e3528aecf78.png)

・```git clone```コマンドの後ろに「SSHでクローン」でコピーしたURLを貼り付けます
![sozai11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935244/22836b87-5ac8-fa8f-4aba-2dc91fe9c518.png)

・Documents内にローカルリポジトリが作成されました。このディレクトリが自分のパソコン内のローカルリポジトリになります。
![sozai12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935244/4137d1f3-bd24-41c0-7da9-392c17616588.png)
・ディレクトリ内に```.git```が隠しフォルダで確認できます。これが無いとgit管理されません。
![sozai14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935244/e3f2dcf3-ab92-f424-deab-eacb1abc3107.png)





### 3. 作成したローカルリポジトリのあるディレクトリに管理したいファイルを追加していく

・管理したいファイル群をローカルリポジトリとなるディレクトリ内にコピペしました。

![sozai18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935244/b30e70b1-bb97-fab6-39a6-da0fc355605b.png)
・```cd```コマンドでGitBashの場所をディレクトリ内に移動します。中の様子です。


![sozai19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935244/841bed49-b3ec-ea29-c340-6bed6f3d4d1d.png)
・ディレクトリ内は常に```.git```で監視されています。```git status```コマンドで現在の監視状況がわかります。デイレクトリ内に変化があったことを赤い文字で示しています。
これからこのファイルをローカルリポジトリにコミットしていきます。
![sozai20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935244/6230aa95-447f-ed95-9689-9534922bfff2.png)

### 4.ファイル群をローカルリポジトリにコミットしていく 
・ここまでで、GidLabで、リモートリポジトリを立ち上げ、それをクローンすることで自分のパソコン内にリモートリポジトリと同じものを生成することができました。
それは、両方ともgitで管理されていてgitの規則のもとで作業を進めていかないといけません。
先程、追加したファイル群は一見、ディレクトリスペースにちゃんとおさまって見えますが、gitの監視者から見ると作業ツリーをうろついている奴らです。

ディレクトリー内の作業ツリーで異変を報告する場所が「ステージングエリア」です。
```git add```コマンドで「こんな奴らがいるんですが、認めちゃいますか？」みたいな感じで報告です。

次に「あ〜そいつらなら知ってるよ！大丈夫！報告書をつけて認めまーす！」と、いうのが「ローカルリポジトリ」にコミットすることです。
その時から晴れてファイル群は仲間入りです。

<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935244/c04608e2-2072-01ec-34ec-f4e6f5534fd4.png">

#### add
・それでは、ファイル群が加わった事をステージングエリアに報告します。
```git add```コマンドの後ろにファイル名を付けて一つづつやっていくのは大変なので、```-A```コマンドでまとめてaddします。

![sozai21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935244/c5eae5b9-d88a-5196-b03d-3281c0854cfb.png)
・エンターキーを押すと処理が走ります。
![sozai22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935244/c1c29e89-a40e-0a53-049d-d37ac9768a7b.png)
・```git status```コマンドで、gitの監視状況をみてみます。赤い文字が緑に変色しました。ステージングエリアで報告が上がったことで監視の目に入っていることがわかります。

![sozai23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935244/fd813cb3-1581-5b8c-7a77-f5b56b4bf9d8.png)

#### .gitignoreファイル
作業を進めていく中で、自動生成されたり、一時的に、バックアップするためにコピーしたファイルを.gitの監視から無視してもらうリストファイルです。顔パスリストみたいなものでしょうか・・・
今回は、実験的に作りました。
記述方法は以下のとおりです。
・　ファイル名を直接指定する　```README.mg```
・　ディレクトリ名を指定する（ディレクトリ全体が対象） ```Hoge/```
・　*（アスタリスク）をつかえば拡張子で指定できる　```*.png```

![sozai26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935244/061a45b1-0f19-3c17-2849-4cdb81c75f00.png)
・.gitignoreファイルを加えたことで作業ツリー内に変化が起こったことを赤い文字で知らせています。
![sozai27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935244/7f8dd88b-62de-6d8f-c745-37199a059bc3.png)

・```git add```コマンドでステージングエリアに加わりました。
![sozai28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935244/f71c31d2-72df-3a69-7a21-5f5fde31fd3a.png)
![sozai29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935244/a89a46c6-d2bb-5b29-b4a1-9bc62cd3e749.png)
#### commit
・```git commit```コマンドでステージングエリアに報告が上がったものを報告書をつけて認可させるような作業です。
コミットメッセージは短い一文であれば、```git commit```の後に```-m```をつけてダブルクォーテーションで一文をつけることができます。
チームで開発する場合は変更内容がわかりやすいように、```git commit```の後にVisualStudioCodeでコミットメッセージを書いた方が良いです。
![sozai30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935244/e0b17fb0-9809-2d48-eab4-40a74cd4e233.png)
・コミットの処理が終わった後gitの監視状況をみてみると、ローカルリポジトリにコミットしたことにより、リモートリポジトリとの差分が起こっとことと、ステージングエリアも作業ツリーにも何もないことが、メッセージが記されています。
![sozai31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935244/b1c991d6-0088-908e-8c94-b6d812ab181d.png)
・VisualStudioCodeでは拡張機能の「Git History」がインストールされていれば、左上の時計マークを押すとコミット履歴を見ることができます。又、```git log```コマンドでも確認できます。
![sozai32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935244/43add879-25ca-452a-04fb-7124b34640ff.png)
![sozai33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935244/ec476d6f-2d59-5783-43d9-b9fe6c25a238.png)

#### push
ここまででローカルリポジトリに管理したいファイルの追加はできました。
あとは、ローカルリポジトリとリモートリポジトリの差分を、お互いを同期させることで差分を無くし、リモートリポジトリでも追加したファイルを確認できるようになります。
・ ```git push -uf origin main```とコマンドで入力します。
![sozai34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935244/a63755d2-23e2-6d92-5b7c-b359ae59da9d.png)

・GitLabのプロジェクトを確認してみると、ちゃんとファイルが追加されていることが確認できました。
![sozai35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935244/fea75680-989e-68c1-1002-2b258efd7407.png)

## まとめ
以上で、GitLabにファイルをあげるまでを書いてみました。まだ自分の中の最終目標はUnity開発をバージョン管理していくことなので、今回の事はその入り口に立てたくらいにすぎないと思います。
別に書かなくてもいい記事をわざわざ書くことで、これはこれでgitと同じように自分のバージョン管理になるのかなと思います。また進捗がありましたら書き記します。ありがとうございました。

今回こちらの記事も大変、参考にさせていただきました。
↓↓↓↓↓↓
https://itcweb.cc.affrc.go.jp/affrit/documents/guide/gitlab/start