エンジニア3日目の貴方へ～Git、GitHub編①超初心者向け講座～

## はじめに🍣

この記事は超初心者向けの内容となっているので説明もざっくりと。
まずはGitHubの事を知り、最低限使えるようになる事を重視したシリーズです。

Gitのインストール、GitHubの登録、VScodeのインストールは各自お願いします🍣

VSCodeのGUI操作をベースで説明していきますが、コマンドの例も出します。

VSCode
- メリット
とっつきやすい
- デメリット
別のエディタ等を使うときにGUI操作を覚え直す必要がある

コマンド
- メリット
エディタやIDEに依存しない
- デメリット
コマンドが難しくとっつきにくい

というわけで両方で説明します。


## ところで

Git or GitHub と皆さんは聞いたことがあるでしょうか？
聞いたことが無い、聞いた事しか無いよって人に向けて説明していきたいと思います。

ちなみに読み方はギット、ギットハブです

Gitを使わない開発では、新機能を実装したい時にファイルを丸ごとバックアップしたり、そもそもしなかったりで非効率でした。
それを改善するのが、GIt・GitHubです。

### バージョン管理システム

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

これの何がいいかっていうのは、チーム制作をしたことが無い人は分かりにくいかも知れません。

なので例として、私の初チーム制作の悲惨なフォルダを見せましょう。

#### ばばん
![スクリーンショット 2025-06-03 115408.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3958925/9854d926-89d2-4ac1-90be-9d01a8872406.png)
赤い枠線で囲った所を確認してほしいのですが、似たようなファイルがあると思います。

これでも少ないほうで、もっと似たファイル名のものがあったり、ファイル名が最新版、更新版など分かりにくいもので管理してしまっている場合もあります。

こんな管理方法じゃ、一人でもチームでも分かりにくくて仕方ないですよね(>_<)

それを解決するのが、バージョン管理システムであるGitというわけです。

## GitとGitHub

ここまでGitGitと言ってたりしてましたが、GitとGitHubで何が違うのか知らないと思います。

バージョン管理システム自体がGit、それを利用したオンラインプラットフォームがGithubです。

Gitはローカル、つまり自分のPCで作業するときに使うツールで、
GitHubはオンライン上でコードを共有する場所です。


## GitHubの流れのイメージ図
![スクリーンショット 2025-06-06 114230.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3958925/2c829c66-e0d5-4b2c-b027-eb1b60eb0db9.png)


図に表すとこんな感じです。
順番に説明していきましょう。

## 図の用語解説+α

### ディレクトリ
制作物や作品などのプロジェクトを保存しているディレクトリ。
作品、制作物等のプロジェクトを進めると、自分のPC(ローカル環境)に保存しますよね。この図のディレクトリはその場所を表します。

### リポジトリ
作業ディレクトリを記録する場所です。
保存された状態は、変更履歴として格納されます。

### リモートリポジトリ

リモートにあるリポジトリの事。
オンライン上の制作物記録場所です。
GitHubはリモートリポジトリを置くためのサービスです。

### ローカルリポジトリ

ローカルにあるリポジトリの事。
自分のPCに置くリポジトリです。

### クローン

リモートリポジトリをローカルに複製する事です。
リモートリポジトリから先に作成した場合や、他ユーザのリポジトリを使いたい場合、最初にクローンします。

### フェッチ
リモートの変更情報を取得する（取り込む）事です。
これはあくまで情報取得で、これをするだけで作業が更新されるわけではありません。
リモートの変更がローカルで反映されてない時などに使います。

### プル
フェッチで取り込んだ情報をローカルに反映させる。
これをするとリモートの変更を作業に反映させる事ができます。

### アド
コミットの前にする操作。
コミットするファイルを決定する。

専門用語でステージングいいます。

### コミット
ファイルやディレクトリの追加・変更履歴をリポジトリに記録・登録する。

### プッシュ
コミットをローカルリポジトリからリモートリポジトリに反映させる。
プッシュをすると後戻りが困難になるので、慎重に作業しましょう


## 作業する時
![スクリーンショット 2025-06-07 231717.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3958925/1aca0162-cb1c-4863-8468-8e27c11e5497.png)


### ブランチ
Gitで作業する時、欠かせない要素があります。
それがブランチです。

リポジトリを作成したとき、初めはmainブランチにいます。
mainは安定版を置いておき、developやfutureブランチは新機能の実装などの作業を進めます。

ブランチのメリット
- ブランチを分けて置くことで、もし機能の実装に失敗したとしてもブランチを削除して無かったことにできる

- 機能ごとでブランチを分ける事で、作業を分担して作業しやすい

などがあります。
チームで開発する時は必須級です。

### マージ
ブランチの作業を別のブランチへ結合すること。

図では、README作成のところで2つのブランチに分岐しています。
developとFunction-Bブランチには、README作成でブランチが分岐しているのでREADMEファイルがある状態で分岐します。

developではそこから機能Aを作り、Function-Bでは機能Bを作成します。
マージするまでは互いに干渉しないので、同じタイミングで機能A、B、README修正を行ったとしても互いに影響しません。

mainのREADME修正の段階では、機能Aは追加されていません。
マージのタイミングで、機能AとREADME修正の両方の変更が反映されます。

複数のブランチで全く同じ部分を書き換えてしまうと、コンフリクト（衝突）が発生して自動マージができなくなるので注意。

## 複数人でもOK！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3958925/4c2b5486-c423-46b4-8843-1e497d90029a.png)

GitHubを使うことで、図のように複数人で同じプロジェクトを並行して作業することができます。
GitHubの真骨頂はここです！

流れは個人のときと似ています。

リモートで作成した場合や、他メンバーが作成したリポジトリを使う場合はまずクローンします。

クローンしたら、チームメンバーで作業しましょう。


## やってみよう

### リモートリポジトリの作成
<details
><summary>GitHubHomeから
</summary>

![スクリーンショット 2025-06-09 145542.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3958925/afbfa3fb-690f-4ff5-98a6-bd8f2dc2abe0.png)

</details>

<details
><summary>アイコンから
</summary>

![スクリーンショット 2025-06-09 194453.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3958925/22ffddfe-0849-434d-8259-6256def097f1.png)
赤丸部分を選択、
![スクリーンショット 2025-06-09 194735.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3958925/d3e8e701-7db1-4524-bdbe-05cbbee90938.png)
更に選択、
![スクリーンショット 2025-06-09 194855.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3958925/9578886f-c558-41c4-a54e-6e7a832c19cd.png)

Newを選択

</details>

Newを選択すると、こんな画面が出てきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3958925/b7b74cf9-22d3-4807-87a3-adc7b9c6c362.png)

#### Repository name
リポジトリ名
英語で自由に付けてOkです
プロジェクト名にしたり、分かりやすい名前にしましょう

#### Description 
リポジトリの説明です。
任意なので入力しなくてもOkです

#### 可視性
- Public
インターネット上に公開します。誰からでも見ることができる状態になります。
- Private
非公開設定で作成します。
自分かコラボレーターからしかリポジトリにアクセスできなくなります。

#### Add a README file
READMEとは、リポジトリの説明書のようなものです。
後からでも追加できます。

#### Add .gitignore
このファイルに記述したファイルなどを追跡対象外にできます。
後からでも設定できます。
基本的にはデフォルトでOk

#### Choose a license
リポジトリのライセンスを決定します。
デフォルトではライセンスなしです。この場合、他の人は自由にコードを取得することができます。

プログラムに価値があり再配布などを規制したい場合はライセンスを選択しましょう。

<details
><summary>私の例
</summary>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3958925/b1785c2d-5715-4026-978b-cce51beeaa2c.png)

</details>



### クローン

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3958925/99a0516c-1dd9-499a-b066-6d0984341b51.png)

赤丸を押してリポジトリのパスをコピーします。

<details open>
<summary>VSCodeの場合</summary>

Crrl + Shift + P を同時押しします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3958925/912c4c70-0a98-4095-9e65-c8f5e4b734be.png)

コマンド入力が出るので、ここに

```
Git clone
```
と入力します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3958925/206c4dc4-ede5-4774-aa0b-7041e9244562.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3958925/15b39283-3432-4124-91b2-f19b31b23008.png)

このようになるので、ここで先ほどコピーしたURLを貼り付けます。

どこに複製するかの確認ウィンドウが出ます。
プロジェクトを置くディレクトリを選択したらクローン完了です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3958925/8fa4f5db-1e9e-48d1-9b96-b02e61efc7b5.png)

開くを選択して作業できるようにしましょう。

</details>

<details>
<summary>コマンドの場合</summary>

プロジェクトを起きたいディレクトリで右クリック、ターミナルで開くを選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3958925/593168ae-c846-4053-be27-00d72a3dee3f.png)

```git
git clone リモートリポジトリのパス
```

こんなコマンドで実行。
フォルダが追加されたらクローン完了です。

</details>

これでローカルリポジトリの作成ができました。

### ブランチ

初期はmainにいますが、作業は別のブランチでする方が安全です。

<details open>
<summary>VSCodeの場合</summary>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3958925/e91c5f0b-ba09-4da5-920b-416666aeebcc.png)

左下で今のブランチがmainである事が分かります。
赤丸を押すと、以下のような選択肢が出ます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3958925/8263ddbd-de17-4401-8198-69465575d331.png)


一番上の、新しいブランチの作成を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3958925/65c618ff-34df-4b24-ab3f-c53b86f337ae.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3958925/3563bd0b-c402-4a9e-97cf-080c9055e945.png)

仮にdevelopにしておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3958925/005831ad-d542-440b-b52f-508eefcbfe9b.png)

エンターを押すと、ブランチ移動しdevelopに居る事が分かります。

</details>


<details>
<summary>コマンドの場合</summary>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3958925/40404305-9eeb-4131-b3d8-516fdfae3397.png)

画面右上部の赤丸のボタンを押すと、ターミナルを開けます。

```git
git branch
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3958925/285392c3-c1c7-4e93-8d40-b1a667c17f73.png)

*(アスタリスク)がついている緑のものが今いるブランチになります。

今回は仮にdevelopブランチを作成し移動します。
```git
git checkout -b develop
```

意味はこうです。
- checkoutはブランチ移動の意味
- -bは新しくブランチを作るというオプション
- developはブランチ名 英語ならok

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3958925/2470f67b-a04f-4d7d-a3f5-67942455a6fa.png)

移動したことを確認できました。

</details>


### アド

まずは実験用のファイルを準備します。

ファイルを作成して、変更してみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3958925/f365467a-10ce-4e64-b51c-6c9aa72a0235.png)

Sample.txtとSample2.txtを作成し、書きこんでみます。
Sample.txtにはサンプル１、Sample2.txtにはサンプル２と書いておきます。

![スクリーンショット 2025-06-10 103528.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3958925/4f9eafa0-1807-49ca-941e-a5ead920affa.png)



書きこんだ後は必ず、Ctrl + S などで上書き保存しましょう。

この変更（追加も変更という扱い）を、アドしていきましょう。

今回は例としてSample.txt**のみ**アド、コミット、プッシュしてみます。

<details open>
<summary>VSCodeの場合</summary>

![スクリーンショット 2025-06-10 104201.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3958925/e619de0c-35f9-43fb-be23-c79ca118e7ed.png)


赤丸を押すと、変更をステージング（アド）できます。


![スクリーンショット 2025-06-10 104528.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3958925/d2346c75-bdb8-4f76-ba5f-37a404330e5e.png)


ステージされた変更に、Sample.txtだけ追加されました。

</details>


<details>
<summary>コマンドの場合</summary>


```git
git add Sample.txt
```

実行するとレスポンスはありません。

```git
git status
```

このコマンドを実行すると、ステージングされたファイルを確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3958925/0d6bfbd8-4a9a-4f7f-bd4b-d661de181947.png)

緑のファイルがステージングされたファイルになります。

ちなみに、
```git
git add .
```
とすると、全ファイルをステージングします。

</details>


### コミット

ステージングされた変更を履歴として残す作業です。

<details open>
<summary>VSCodeの場合</summary>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3958925/5d120c0f-f7e3-42ea-84cd-90dc7bd75651.png)

コミットメッセージを入力し、緑のコミットのボタンを押すと完了です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3958925/10305a70-9b4b-45a4-957b-a4548b5881ea.png)

グラフに、先ほどのコミットメッセージのコミットが追加されていたら成功です。

</details>


<details>
<summary>コマンドの場合</summary>

ターミナル
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3958925/78e02a9c-3929-40c4-b398-c6c4f051d74f.png)


```git
git commit -m "サンプル１変更"
```

説明
- commit コミット
- -m コミットメッセージのオプション

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3958925/deece425-6676-4bc4-8d08-ddbb6fe37a92.png)

日本語のため一部文字化けしていますが問題はありません。
これでコミットを出来たか確認できました。

</details>


### プッシュ

<details open>
<summary>VSCodeの場合</summary>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3958925/5eed0198-5b10-4e83-88cd-e725e11c7b54.png)


</details>


<details>
<summary>コマンドの場合</summary>


```git
git push origin HEAD
```
意味
- push プッシュ
- origin リモートを表す
- HEAD 今いるブランチを表す

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3958925/803062f4-86b3-4359-baab-2517a33c6612.png)

こんなメッセージが出たら成功です。


</details>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3958925/bd6d7c3c-8036-481b-85a4-a67913cee2c6.png)

GitHubのリモートリポジトリを確認すると、developがプッシュされたことが表示されます。
これは時間を空けてから見ると表示されていないこともありますが、問題はありません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3958925/50404ef4-cfa2-4000-9e7f-7dfe46db6c40.png)

ブランチを確認すると、先ほどのブランチが追加されています。
developを押してプッシュされてるか確認しましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3958925/8736014a-19ce-42f8-8135-228eead98721.png)

Sample.txtと、コミットメッセージが確認できますね。
これでプッシュされてることを確認できました。

ちなみにSample.txtを押すと、ファイルの中身を確認できます。
編集もできますが、Git初心者はリモートから編集しないことを**強く**おすすめします。


### mainへのマージ

マージは結合する向きに注意しましょう。
（例）develop ➡ main

#### VSCodeから

##### まずチェックアウト

<details open>
<summary>GUI</summary>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3958925/2c3715a4-c3e8-4a47-b3bb-af007a6e7497.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3958925/39197f24-c55f-47a2-a4aa-27176c3ee191.png)


</details>

<details>
<summary>コマンド</summary>

```git
git checkout main
```

</details>

##### マージ

<details open>
<summary>GUI</summary>

ボタンにはないので、
Ctrl + Shift + P でコマンドパレットを出します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3958925/3713d7fd-0844-48a0-a020-79dcad55a909.png)

マージを選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3958925/72420641-3bb8-4d9f-be60-097c1d0d384f.png)

上がローカルのdevelopブランチ、したがリモートのdevelopブランチです。

今回はどちらでもokです。
ローカルで変更したものを取り込みたいのか、プッシュしたところまでのブランチを取り込みたいのか、適宜判断して選択してください。

</details>

<details>
<summary>コマンド</summary>

```git
git merge develop
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3958925/d293c898-d21c-4f08-95f8-eaac6ada1124.png)

結合したい場所に移動してから作業しましょう。

</details>



#### GitHubから

meargeで何がされるのか理解できるまではおすすめしません。
自分でコンフリクトの解消ができるようになるまでは控えておいた方が得策です

<details>
<summary>プルリクエストを作成</summary>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3958925/db75e3a9-969b-480a-9cbc-cb69c9153ad5.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3958925/41c3ad39-2f09-489f-a31c-c303d8ac78e9.png)

![スクリーンショット 2025-06-10 131833.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3958925/d2753f39-6754-4d28-b618-c8e631699e74.png)


コンフリクトが発生しない場合、自動マージができます。

</details>


これで終了。
これでdevelopで変更したものをmainに結合できました。

プッシュすると、mainにもSample.txtが追加されます。

## 参考文献
https://zenn.dev/getgotgoto/articles/506bcfbcd55149
https://backlog.com/ja/git-tutorial/
https://www.kagoya.jp/howto/it-glossary/develop/git/
https://qiita.com/emioiso/items/d7f75d1a0263d69fba6c