Git, GitHub　開発の流れと最低限のコマンド集　〜初めてチーム開発に参加する君へ〜

初めて Git, GitHub を使ってチーム開発に参加する人におすすめしたい記事が意外と見つからず、開発の流れと必要最低限のコマンドだけをまとめようと思い筆を取りました。

vscode 等のエディタやターミナルを最低限使うことができ、コードを多少は書いたことがある程度の人が、GitHub でチームメンバーが作ったリポジトリに参加する時のための内容です。

役に立ったと思っていただけたら、いいねやストック、コメントなどをいただけると嬉しいです！！



## Git, GitHubとは
ソースコードなどの「バージョン管理ツール」です。
現在の状態を丸ごと保存でき、望みのバージョンに簡単に復元することができます。

Gitは自分のPC（**ローカル**）でソースコードのバージョンを管理するツールで、GitHubはそれをwebサービス上（**リモート**）で管理するための [github.com](https://github.com) というサービスです。

GitHubにコードを置けば複数人での開発の時に便利で、バックアップにもなりますし、もっと色々な機能もあります。


## Gitのインストール
Gitのインストールについてはあえて説明しません。 

情報がどんどん古くなる事と、インストールの方法も多様で様々な主義主張があるためです。チームメンバーに聞くか、`git インストール windows` や `git インストール mac` などと検索して、なるべく新しい記事を参照してください。

ChatGPTに聞くのも良いでしょう。

## GitHub の登録
[https://github.com](https://github.com) にアクセスして、「Sign Up」からアカウントを作ってください。基本的に「Free」プランで良く、途中で色々聞かれますが適当に答えても大丈夫です！

## Git の初期設定
以下の二つのコマンドをターミナルやコマンドプロンプトで打つのは最初にやっておきましょう。
gitで誰が操作したか明確にするための設定で、後で説明する「コミット」に必要です。おすすめはGitHubで登録したものをそのまま使う事です。
```shell
git config --global user.name "ここに名前"
git config --global user.email "ここにメールアドレス"
```

## 流れを理解する
Git GitHubでは以下の流れで進みます。これを理解すれば最低限使うことができます。この記事を読んだらここに戻ってきて確認してください。

1. `git clone` プロジェクトのソースコードをクローンする
2. `git switch -c feature/xxx` ブランチを分ける
3. コードを編集する
4. `git add .` 編集をコミットするファイルを選ぶ（`.`だと全部のファイルを指定）
5. `git commit -m "コミットメッセージ"` ローカルで変更をコミットする
6. `git push origin feature/xxx` ローカルの変更をリモートに反映する
7. GitHub上でプルリクエスト（自分の変更をメインブランチに反映したいよと要求する）
8. （チームメンバーに レビュー & マージ してもらう）
9. `git switch main` でメインブランチに戻り、`git pull` で最新のメインブランチの情報を取得する

ここまでが一連の流れで、この後再び2に戻ります。


## チームのプロジェクトに初めて参加するために
まず、プロジェクトのリポジトリに招待してもらい、メールから承諾しましょう。

### 1. クローン（`git clone`）
**GitHubのリポジトリを自分のPCにコピーする**作業です。

GitHubのリポジトリトップで緑の「Code」ボタンを押してURLをコピーします。

![スクリーンショット 2024-12-16 21.33.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2601515/a8096be5-5c99-9c1f-055b-d0affd0d10e4.png)


これを用いて、以下のコマンドを実行します。

:::note
実行する前に、「ドキュメント」フォルダの中の適当なフォルダなど、ターミナル上で適当なディレクトリに移動しましょう。コマンドを実行したディレクトリの直下にプロジェクトのディレクトリが作られます。
:::
```shell
git clone リポジトリURL
```

```shell:例
git clone https://github.com/microsoft/vscode.git
```

**これで、自分のPCにプロジェクトのコードがダウンロードされます。**
エディタでこのディレクトリを開きましょう。

---

### 2. ブランチを分ける（`git switch -c ブランチ名`）
「ブランチ」というのは誤解を恐れずにいうと、
**「他の人に影響が出ないように作業スペースを分ける仕組み」**
です。

同じコードを同時に複数人が編集していると同じ箇所に異なる変更をして衝突が起こってしまうかもしれません。そうでなくとも、1人が編集したコードを他の人による確認を経ずに本番環境に使うのは怖いですよね。

なので、他の人のコードや大元のコードと切り分けて編集し、確認してから大元のコードに**マージ**するという流れで行います。

```shell
git switch -c ブランチ名
```

```shell:例
git switch -c feature/add-button
```

`-c` オプションは（おそらく）`create`の略で、「新しく作る」という意味です。切り替えるだけなら`-c`なしで `git switch ブランチ名`のようにします。

ブランチ名は、チームでルールがあったりするので、それに従ってください。

良くあるのは、以下のような命名規則です。
- `feature/機能名` 機能を追加する時に使う
- `fix/修正点` 修正をする時に使う




### 3. コードを編集する
ここでようやく自由にコードを編集します。

### 4. 変更内容をステージングする（`git add .`）
ステージングとは、変更内容を反映させたいファイルを選ぶ工程です。
編集したファイルでも大元のソースコードに入れたくないものがあります。（例えばテスト用の画像や自分の環境だけの設定など。）

なので、ここで変更させたいものだけを `add` というコマンドを使って選択するわけです。


```shell:例
git add .
```

本当は `git add ./path/to/file.txt` のようにファイルを指定したりするのですが、載せたくないファイルを `.gitignore` というファイルに記述して、それ以外は全て選択するというのが主流になっています。

その全て選択するコマンドが、　`git add .` です。この `.` は相対パスで現在いるディレクトリ（カレントディレクトリ）を指し、その配下のすべてのファイルを選択するという意味になります。


### 5. ローカルで変更をコミットする（`git commit -m "コミットメッセージ"`）
「コミット」というのは変更の記録を取ることです。
1つのバージョンを作るイメージが近いです。

gitでは、コミット単位でバージョンを管理し、「1つ前のコミットの状態に戻す」というような操作もよく行います。

「ローカル」ということなので、これは自分のPC内だけで記録を取ります。

```shell
git commit -m "変更内容を説明するメッセージ"
```

```shell:例
git commit -m "ユーザーの画面に送信ボタンを追加"
```

`commit` の時は、 `-m` というオプションの後ろにコミットメッセージをつけます。コミットメッセージとは変更の内容をわかりやすく一言で説明するテキストのことです。これでどんな変更をしたかわかりやすくなります。

### 6. ローカルの変更をリモートに反映する（`git push origin ブランチ名`）
ここまでの操作は全てローカル（自分のPC）のみで行ってきました。ここからいよいよリモート（今回はGitHub上）に反映します。そのためのコマンドが `push` です。

リモートに反映すると言っても、まだ大元のコードは変更しません。

```shell
git push origin ブランチ名
```

```shell:例
git push origin feature/add-button
```

このように、ブランチを指定して `push` をすることで、GitHub上にもブランチを作ってそこに反映します。

ここで、 `origin` とはリモートリポジトリ、つまりGitHub上のプロジェクトのことを指します。

`feature/add-button` というローカルのブランチで作業し変更をコミットしたものを、 `origin` の `feature/add-button` に反映するというコマンドになります。

:::note
GitHub上のブランチ（リモートブランチ）はローカルと同じ名前を指定しますが、ローカルのそれとは異なります。ローカルでの変更は `push` することで初めてリモートに反映されます。
:::




### 7. プルリクエスト（自分の変更をメインブランチに反映したいよと要求する）
`push` した内容が自分の中で問題ない場合、メインブランチ（大元のソースコード）にそれをマージ（統合）することで初めて自分の成果が反映されます。

この時、GitHubではマージする前に「プルリクエスト」を出して、他の人にチェックをしてもらいます。

GitHubの画面上で `Pull requests` というタブから緑色の `New pull requests` を選択し、そこで `compare` に自分のブランチを選び、 `base` にメインブランチを選びます。（プルリクエストができる状態ならば、おそらく強調表示された画面にて自動で選択されるはずです）
![スクリーンショット 2024-12-17 0.50.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2601515/95d729e6-03fe-2cbf-a726-b489210bb022.png)

ここで、どんな変更をしたのかを記述し、緑色の `Create pull request` ボタンを押します。

これで、他のチームメンバーに通知され、変更内容を見てもらうことができます。

---

### 8. コードレビュー & マージ
プルリクエストを受けて、チームメンバーが中身をチェックし、問題なければマージ（統合）されます。おめでとうございます。これであなたの編集が大元のコードに反映されました！

もし問題があれば、3に戻ってレビューメッセージを元に編集し、再び4〜7を行いましょう。


### 9. 最新のコードに更新して再び開発開始（`git switch main` `git pull`）
マージされたら、今度はあなたの変更が反映された最新のコードを元に次の変更に進みます。

```shell
git switch main
```
`-c` なしの `switch` コマンドで単純にメインブランチに移動し、

```shell
git pull
```
で今の `main` ブランチのリモートの最新の状態をローカルに取り込みます。

こうして再び作業の準備が整ったので、2のブランチを分けるところから再び開発をスタートしましょう！

## おまけ（たまに使うコマンド集）
```shell
git log
```
commit などの履歴を確認できるコマンド

---

```shell
git status
```
現在ステージングしているファイルやコミットしているファイルなどの状態を確認できるコマンド

---

```shell
git branch
```
現在のブランチや、ローカルに存在するブランチの一覧を表示するコマンド

---

```shell
git stash
```
現在の作業状態を一時的に保存し、1つ前のコミットの状態（厳密ではないかも）に戻すコマンド

---

```shell
git stash apply
```
`stash` しておいた状態を適用するコマンド



# 最後に
ここまでで Git, GitHub の大まかな流れを理解できたと思います。

2. `git switch -c feature/xxx`
3. コードを編集
4. `git add .`
5. `git commit -m "コミットメッセージ"`
6. `git push origin feature/xxx`
7. GitHub上でプルリクエスト

慣れてくればこの流れを繰り返すだけです。
分からなくなったらこの記事に戻ってきてください。

ぜひ、いいねやストックで応援してもらえると嬉しいです！

# ちょっと宣伝
Hi!story【ハイスト】チーム（株式会社Highsto）ではメンバーを募集しています。

`git` `github` なども活用しながら学生チームでweb開発やモバイルアプリ開発を行っています！

https://highsto.net/join-us/

もし興味があったら覗いてみてください！


Xのフォローもよろしくです！

https://x.com/zuisho_tech