RaspberryPi内のバージョン管理をVSCodeで美しく実現

#RaspberryPiとバージョン管理
安価でハイスペックなRaspberryPi！
しかし、ハイスペックゆえにコードの規模や台数が増えると、
**「どのコードが最新か分からん」問題！！**
が発生します。そんなとき役立つのがバージョン管理です。

試行錯誤の結果、特にこだわりがなければ
**大抵のバージョン管理機能はMicrosoft製コードエディタ「VSCode」内で実現できる**
と分かったので、本記事で紹介したいと思います
![gitgraph_mini.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/79205a4c-118e-aa8b-b706-050765b1714a.png)
RaspberryPiでこんなに**美しいツリー表示**ができる感動を、ぜひ皆さんも味わってください！

#システム構成
下図のような構成でバージョン管理をします。
![vscode_raspi_github.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/dd390b4f-203c-2a52-4236-9c97705b5a5d.png)
上記構成で、
　・CommitやPush、Pull等のGitコマンド操作
　・Cloneによる複数のローカルリポジトリの同期
　・GUIによるブランチの可視化（冒頭のキレイな図）

を、PC内のVSCodeからSSH遠隔接続のみで実現可能です。
**ラズパイに画面接続不要なので、とてもフレキシブルな管理ができます！**

※「バージョン管理ってなんやねん！」「Gitわからん！」という方は、[こちら](https://qiita.com/nnahito/items/e546b27f73e7be131d4e)の記事が分かりやすいです。
プログラミングに関わるのであれば絶対役立つツールなので、これを機に学習されても良いかと思います。

#必要なもの
・RaspberryPi (本例ではRaspberryPi4 ModelB)
・上記と同じネットワークにつながったPC (本例ではWindows10)
・Visual Studio Code 1.39.2以降（上記PCにインストール、本例では1.44.2使用）

#手順
**①VSCodeによるSSH接続のセットアップ**
**②Githubでリモートリポジトリ作成**
**③Gitでローカルリポジトリ作成**
**④Git Graphによる可視化**
**⑤ローカルリポジトリとリモートリポジトリの連携**
**⑥リモートからローカルへのリポジトリクローン**

#詳細
##①VSCodeによるSSH接続のセットアップ
[こちら](https://qiita.com/c60evaporator/items/26ab9cfb9cd36facc8fd)を参考に、PC上のVSCodeからRaspberryPiにSSH接続できる環境を構築してください

##②Githubでリモートリポジトリ作成
バージョン管理のマスターとなるリモートリポジトリをGithubで作成します。
RaspberryPi内にGitサーバを立てる事もできるようですが、今回はWEB上で手軽に管理できるGithubを使用します。

###Githubアカウント作成
[こちら](https://qiita.com/okumurakengo/items/848f7177765cf25fcde0)を参考にGithubのアカウントを作成してください

###リモートリポジトリ作成
GithubトップからNewをクリックします
![create_remote1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/69d6ba03-c186-ce2d-ad4c-75b7998dfb23.png)
リポジトリ名、公開の有無を入力し、Create repositoryします
![create_remote2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/d9486426-8b5c-5c8a-88ed-c354b757932b.png)
以上でリモートリポジトリが作成されました。この時点で中身は空ですが、気にしないでください。
ここで出てくるアドレスは後で使うので、控えてください
![create_remote3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/61942d5f-75a4-bb78-dd7b-92cb4b606e92.png)

##③Gitでローカルリポジトリ作成
Gitにより、ローカルでバージョン管理できる環境を構築します
###ユーザ名とメールアドレスの登録
※最初の1回のみの操作です
[（参考にさせて頂いた記事）](https://git-scm.com/book/ja/v2/%E4%BD%BF%E3%81%84%E5%A7%8B%E3%82%81%E3%82%8B-%E6%9C%80%E5%88%9D%E3%81%AEGit%E3%81%AE%E6%A7%8B%E6%88%90)
リポジトリ作成に必要な、ユーザ名とアドレスを登録します。

「Terminal」→「New Terminal」でコンソールを開き
![openterminal.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/5de27ff9-a05b-9b6d-16ee-5de2f335b240.png)

下記コマンドでユーザ名とアドレスを登録します
※ダブルクオーテーションはユーザ名のみ必要

```
git config --global user.name "ユーザ名"
git config --global user.email メールアドレス
```

###リポジトリの作成
※管理対象のコードが既に作成されている前提です

下記手順で、管理したいフォルダを開きます
![openfolder.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/e87ba402-439e-a7cb-f6ed-d0e4ea0e4c6f.png)

下記手順で、リポジトリを初期化します
![initializerepo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/3a5c0051-5164-956e-8e46-d9abce109af8.png)

更新対象に加えたいファイルを「＋」ボタンでコミットに追加します
![selectcommit.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/0a80601a-68a5-f3ad-66d1-627353ac20ec.png)

※管理対象に加えたくないファイルは、右クリックして「Add to .gitignore」で除外可能です。
.gitignoreの記法については[こちら](https://qiita.com/anqooqie/items/110957797b3d5280c44f)が分かりやすいです。
![gitignore.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/bb28642d-4096-fc63-52a3-da619fa68b1b.png)

コミット名（自分で適当に決めてください）を指定してコミットします
![commit.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/a14aea6c-d256-1442-68c3-fc11a551e320.png)

これでGitによるローカルでのバージョン管理ができるようになりました。

##④Git Graphによる可視化
Git Graphは、VSCode上でブランチをGUI可視化できるアドインです。
###Git Graphのインストール
下記手順で、Git GraphをRaspberryPi内にインストールします
![install_gitgraph.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/faafd9e7-752e-0b97-33a8-9ee7deb317c4.png)

###Git Graphによるツリー可視化
ブランチのツリー構造が可視化できます。
![gitgraph.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/94e86e2b-c296-1446-9e58-aaebcba231fe.png)
カラフルで非常に分かりやすいので、RaspberryPiのみならずPC内のバージョン管理にもおすすめです。

Bashで管理したい人はVSCodeのターミナルで
GUIで管理したい人はVSCodeのGit Graphで
といった具合に、流派を問わずSSHで遠隔管理できるVSCode、素晴らしすぎます！！

具体的な方法は本記事の最終章で解説します。

##⑤ローカルリポジトリとリモートリポジトリの連携
RaspberryPi内に作成したGitローカルリポジトリと、Github上に作成したリモートリポジトリを連携させます。
これにより万が一RaspberryPiが壊れてもコードを復旧できますし、他のRaspberryPiにコードをクローンすることもできます。

ターミナルで下記コマンド実行し、ローカルリポジトリのあるフォルダに移動します

```
cd ローカルリポジトリのパス
```

下記コマンドを実行し、ローカルリポジトリとGithubリモートリポジトリを紐づけます

```
git remote add origin ②の最後に控えたURL
```

下記コマンドで、ローカルの内容をリモートにPush（アップロード）します
※ブランチ名は「master」である前提です

```
git push -u origin master
```

ブラウザが開いて認証を求められるのでContinueします
![github_vscode.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/4bf45f38-c220-c350-381c-6d8faf40cf66.png)
Githubのログインユーザ名とパスワードを入力します
![github_vscode2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/c791fe6e-953f-eb33-143a-e5c2889c8ad3.png)
Authorize Githubボタンを押します
![github_vscode3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/9c96112a-099f-e123-e88e-52524ff4cfd3.png)
VSCodeに戻るとGithubパスワード入力が求められるので、入力
![github_vscode4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/1aae8c1f-b04b-8a48-5803-122ddedc07db.png)

私の場合、このタイミングでエラー（タイムオーバー？）が出て終了してしまったので、再度下記コマンドを実行しました
※[ここ](https://github.com/microsoft/vscode-pull-request-github/issues/1221)を見る限り、Edgeが既定のブラウザとなっているとエラーが出やすいようなので、Chromeをデフォルトにした方が良いようです。

```
git push -u origin master
```
下記認証が求められるので、Open
![github_vscode5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/d6c1ed9f-955f-ed68-ca3c-d9c64403e0f3.png)
Githubユーザ名が求められるので、入力
![github_vscode6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/a9691c46-6145-083d-6e6b-4cea28b9927a.png)
成功したら以下の画面が出るようです。
![github_vscode7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/cc434cd7-31f7-e457-f53b-e8bfe5887531.png)

##⑥リモートからローカルへのリポジトリクローン
⑤とは逆に、リモート上に存在するリポジトリを、ローカルにクローン（複製）する方法を解説します。

###リモートリポジトリのURL取得
Githubのリモートリポジトリにアクセスし、「Clone or Download」をクリックします
![githubclone.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/37588f29-e7e4-96e4-c329-1d079cfec879.png)
出てきたURLを控えます
![githubclone2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/a4f67bcf-3e8e-9a9f-0f90-44749e350f5d.png)

###ローカルリポジトリをクローン
VSCodeで、リポジトリを作成したいフォルダ（リポジトリの上位フォルダとしたい場所）を開きます
![openrepofolder.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/d478051a-e313-af22-2b11-cb4889aba89f.png)

ターミナルで下記コマンドを実行し、クローンを実施します

```
git clone 上で控えたURL
```

###クローンされていることを確認
クローンで新たにできたフォルダを開きます
![openclonefolder.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/44e3bffb-ad5c-4df6-d079-e03262e5a472.png)

Git Graphでブランチを表示させ、リモートリポジトリの内容が再現されていれば成功です
![confirmclone.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/7936cfca-7330-1a5a-7069-2dd0c002cf32.png)


上記リポジトリはもちろんリモートと紐づいているので
Push：ローカルからリモートにブランチ更新内容反映
Pull：リモートからローカルにブランチ更新内容反映
Fetch：リモートの更新情報を取得
することができます

#各種コマンド
上記で初期設定は終わりです。
実際にGitの各種コマンドを実行する方法を下記します

###ターミナル
これは通常のGit Bashと同じコマンドを、VSCodeのターミナルから打つだけです
cdでリポジトリのあるフォルダに移動してから、下記コマンドを実行してください
**・Checkout**（ローカル内でブランチ切替）

```
git checkout ブランチ名
```

**・新しいブランチの作成**

```
git checkout 元となるブランチ名
git checkout -b 作成するブランチ名
```

**・Stage**（ファイルをコミット対象に追加）

```
git add .
```
※git addのオプションは[こちら](https://note.nkmk.me/git-add-u-a-period/)参照


**・Commit**（コミットしてバージョン更新）

```
git commit -m "コミット名"
```

**・Merge**（ブランチ同士を結合）

```
git checkout マージ元のブランチ名
git merge マージ先のブランチ名
```
※マージ後に結果のログがnanoかvimで表示されます

**・Push**（ローカル→リモートに更新内容反映）

```
git push origin ブランチ名
```
**・Pull**（リモート→ローカルに更新内容反映）

```:全ブランチ一括Pull
git pull
```

```:特定のブランチのみPull
git pull origin ブランチ名
```
**・Fetch**（リモートの更新情報を取得）

```
git fetch
```

###GUI
VSCodeのバージョン管理タブを使用します。
![version_kanri.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/c9b9e44e-0a5f-6cf0-6b11-65d99361bde2.png)
※Git Graphからも実行できますが、ここではFetch以外は割愛します

**・Checkout**（ローカル内でブランチ切替）
Checkout to…をクリック
![1_git_checkout1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/8b5936d8-c730-6825-bdf7-fe8988884e43.png)
チェックアウト先のブランチ名をクリックします
![1_git_checkout2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/ad54463f-2919-efa7-e646-af9ff9860825.png)

**・新しいブランチの作成**
Checkout to…をクリック
![1_git_checkout1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/8b5936d8-c730-6825-bdf7-fe8988884e43.png)
Create New Branchをクリックし、新たなブランチ名を入力してEnterします
![2_create_new_branch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/57f11570-b49e-7f8b-9614-bbce003d9c3e.png)

**・Stage**（ファイルをコミット対象に追加）
更新対象に加えたいファイルを「＋」ボタンでコミットに追加します
![selectcommit.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/0a80601a-68a5-f3ad-66d1-627353ac20ec.png)

**・Commit**（コミットしてバージョン更新）
更新対象に加えたいファイルを「＋」ボタンでコミットに追加します（上記Stageと同じ）
![selectcommit.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/0a80601a-68a5-f3ad-66d1-627353ac20ec.png)
コミット名（自分で適当に決めてください）を指定してコミットします
![commit.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/a14aea6c-d256-1442-68c3-fc11a551e320.png)

**・Merge**（[参考](https://qiita.com/shuhey/items/f502ea9aaf6659c225b4)）
マージ先ブランチにチェックアウトしたのち、Ctrl+Shif+Pでコマンドパレットを開く
「Git:merge‥」と打ち、見つかった「Git:Merge Branch」をクリック
![5_git_merge_branch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/1bb158ce-8157-1d64-e8af-415108691489.png)
マージ元ブランチを選択
![6_select_merge_branch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/1ba67b59-75e2-97ab-fdc2-aca778f5e1c7.png)
Git Graphでブランチの線が合流していたら成功です！
![gitgraph_mini.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/79205a4c-118e-aa8b-b706-050765b1714a.png)

**・Push**（ローカル→リモートに更新内容反映）
Pushをクリック
![1_git_push.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/a9a92916-698b-ea51-329e-ea0097245504.png)

**・Pull**（リモート→ローカルに更新内容反映）
Pullをクリック
![1_git_pull.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/3bdaa52b-dab0-de2c-76d4-a1f55525bead.png)

**・Fetch**
Git Graph画面の、雲のマークをクリック（※Git Graphの機能を使用します）
![1_git_fetch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610167/fbfda399-3174-c985-55c9-127307764803.png)

#さいごに
以上がVSCodeによるRaspberryPiバージョン管理方法の概要です。

通常のバージョン管理以外にも、あるRaspberryPiで作ったコードを移植したいときにCloneを使う等、応用の可能性は広いと思います。

バージョン管理は骨が折れる作業ですが、**キレイな画面で楽しく管理**できればと思います！