目次
事前環境
下記の環境を前提に進めていきます。
GitHubアカウントの作成
こちらからアクセスしまして、サインアップを押します。
![](https://blogapi.usuyuki.net/content/images/wordpress/2021/05/image-28-1024x456.png)
ここからは基本的に全て英語です。
![](https://blogapi.usuyuki.net/content/images/wordpress/2021/05/image-29.png)
ページの指示に従ってアカウントを作成してください。
GitHubDesktopのダウンロード
GitHubをGUIに操作するためのソフトウェアです。本来ならgit pullとかコマンド操作しなきゃいけないんですが、それをせずにgitを扱うことができます。
下記よりご自身にあったOSのソフトウェアをダウンロードしてください。
ダウンロードしたファイルを開くと
![](https://blogapi.usuyuki.net/content/images/wordpress/2021/05/image-30.png)
おしゃれな画面が出てきます。しばらく待つと
![](https://blogapi.usuyuki.net/content/images/wordpress/2021/05/image-31.png)
青いボタンをクリックしましょう。ブラウザが立ち上がってログイン画面が出てきます。
先程登録したアカウントでsign inしてください。
![](https://blogapi.usuyuki.net/content/images/wordpress/2021/05/image-32.png)
![](https://blogapi.usuyuki.net/content/images/wordpress/2021/05/image-33.png)
![](https://blogapi.usuyuki.net/content/images/wordpress/2021/05/image-34.png)
Email含めて予め入力されているかと思います。
EmailはGithubDesktopをインストールした端末に自動的に割り振られるアドレスなので、アカウント登録したときに用いたものとはまた別です。特に触らずFinish押しちゃいましょう。
![](https://blogapi.usuyuki.net/content/images/wordpress/2021/05/image-35.png)
![](https://blogapi.usuyuki.net/content/images/wordpress/2021/05/image-36.png)
準備完了です。
Gitが使える環境を整備
こちらにアクセスしまして、
![](https://blogapi.usuyuki.net/content/images/wordpress/2021/06/image-1024x516.png)
お使いの環境に合うものをダウンローしてください。
ダウンロードされたファイルをクリックして開いて、
![](https://blogapi.usuyuki.net/content/images/wordpress/2021/06/image-1.png)
基本「NEXT」ですが、下記画面のときは「Use VisualStudio Code as Git's default editor」を押しましょう。
![](https://blogapi.usuyuki.net/content/images/wordpress/2021/06/image-2.png)
この先はずっと「Next」で大丈夫です。たくさんの選択肢に血迷わず、Nextを押しましょう。
インストールが始まります。
![](https://blogapi.usuyuki.net/content/images/wordpress/2021/06/image-4.png)
終わり
![](https://blogapi.usuyuki.net/content/images/wordpress/2021/06/image-5.png)
VSCodeにGithubの拡張機能をインストール
VScode自体はデフォルトでGitをサポートしています。拡張機能を入れることでより便利に扱えるので、下記3つの導入をお願いします。
拡張機能の導入はVScode開きまして。
![](https://blogapi.usuyuki.net/content/images/wordpress/2021/05/image-38.png)
Git History
「Git History」で検索。
こちらの拡張機能でGitのコミット履歴が見やすくなります。
![](https://blogapi.usuyuki.net/content/images/wordpress/2021/05/image-40.png)
インストールしちゃってください。
GitLens
「GitLens」で検索してインストール。
こちらの拡張機能でコミットの差分を見やすくしてくれます。
![](https://blogapi.usuyuki.net/content/images/wordpress/2021/05/image-41.png)
Git Graph
「Git Graph」で検索。
この拡張機能を入れることでブランチの動きを見やすくできます。
![](https://blogapi.usuyuki.net/content/images/wordpress/2021/05/image-42.png)
インストールしちゃってください。