急に開発プロジェクトにアサインされmacでgithubが避けられないときに読むVSCodeの使い方（序）

## この記事を書いたモチベーション
githubはざっくり知っているけどあまり慣れていない、かつMacも使い慣れていない方をプロジェクトにアサインしたので、これ読んどいてっていう記事を探したのですが
なかなか痒いところに手が届いておらず、結局自分で書くことにしました。
Qiita初めてで恐縮です。

## 想定しているケース
- githubは触ったことはあるがチームでの開発は未経験な方
    - ラクスさんがまとめた[こちらの内容](https://tech-blog.rakus.co.jp/entry/20200529/git#2-Git%E3%81%A8GitHub%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%83%81%E3%83%BC%E3%83%A0%E9%96%8B%E7%99%BA%E3%81%AE%E8%B6%85%E5%85%A5%E9%96%80 "【超入門】初心者のためのGitとGitHubの使い方" )の１までは知っているけど2はやったことない、というイメージ
- gitのコマンドはそこまで詳しくはない
- mac詳しくない、出来る限りコマンド叩きたくない
- mainブランチとは別に開発ブランチが切られ、そこにfeatureブランチを生やしてコードを書く必要がある
- 複数人が開発しているリポジトリに、コードを書いてpull req出す必要がある
    - イメージ
    ![スクリーンショット 2022-04-11 17.00.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627308/a39ed56d-0774-3559-9c2b-e4741e24f9a5.png)



## 環境
- Mac (M1じゃないです、家の在庫のMBA2018 Catalina10.15.7)
- VSCode (Version 1.66.1)

## VSCodeとは
正式名称 Visual Studio Code というMicrosoftのエディタ。
techacademyさんの記事が詳しいですが、近年圧倒的主流となっているエディタです。
https://techacademy.jp/magazine/39548

公式サイトからダウンロードするのが良いかと思います。
https://code.visualstudio.com/download

## セットアップ
#### MacへのVSCodeインストール
zipをダブルクリックで解凍して、出てきた.appファイルをアプリケーションフォルダに追加します。
![スクリーンショット 2022-04-10 15.43.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627308/06e91603-6618-ded1-7b43-96f5772b7faf.png)

#### VSCodeの設定
初回起動時に日本語パッケージのインストールがおすすめされますので、追加しましょう。
![スクリーンショット 2022-04-10 15.48.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627308/4d547aad-b655-2b5d-82e1-7c2e554feec7.png)
あとはテーマカラーを選んで　Mark Doneを押せばチュートリアルは終了します。
※もう一方のNext Sectionに進むと結構ながいチュートリに入ってしまうので、今回は割愛。

#### VSCodeのプラグイン(git graph)を追加
このあたりはお好みですが、VSCodeには様々なプラグイン(拡張機能)が開発されていて、Git Graphは入れておくと後でブランチが追いやすいのでおすすめです。
左の四角が並んだアイコンを押して出てくる検索窓に`git graph`と打つと一番上に出てくるので、それをインストールしましょう。
もし日本語パッケージ入れそこねた人がいたら、窓に`japanese language pack`と入れれば出てきます。
![スクリーンショット 2022-04-10 16.30.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627308/4cbfff5b-efd1-8f6c-e26b-ab07e8885091.png)


#### リポジトリのクローン
Githubのサイトから自分が開発するリポジトリを選択して、クローン用のURLをコピーしましょう。
![スクリーンショット 2022-04-10 22.13.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627308/55dbcc88-7e5c-e393-26b8-96d0ad698e08.png)

VSCodeに戻って、リポジトリの複製を押すと、自分のPCに先程のリポジトリをクローンします。
上の窓に先程コピーしたURLを貼り付けてエンターを押してください
またURL投入後は自分のPCのどこにリポジトリを置くか選択する必要があります。場所はお好みで（自分はプロジェクト少ないこともあり、`/Users/自分` 直下に置いています。
![スクリーンショット 2022-04-10 22.24.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627308/106be01f-bcd7-a807-b3f9-763d48d74bfd.png)
これで最初のセットアップは完了です。

## ブランチ作成〜commit〜pull reqまで
#### ブランチ作成
早速開発を進めるのですが、まずはブランチを作成しましょう。
左下に今チェックアウトしているブランチが表示されていますが、そこをクリックするとブランチの作成画面になります。「＋新しい分岐の作成」はmainブランチをベースに新しいブランチを作るので、今回は「＋新しい分岐の作成元」をクリックします。
![スクリーンショット 2022-04-10 22.40.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627308/db0035da-ddb5-6499-c3ab-acf09989cb51.png)
新しいブランチ名を記載して・・・
![スクリーンショット 2022-04-10 22.44.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627308/633a6f16-2485-7302-c7ff-3bea57cd4330.png)
次に、自分のコードの派生元（ベース）を選択します。今回はorigin/develop_v409とします。
![スクリーンショット 2022-04-10 22.44.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627308/3169cd09-20dd-46bc-9c3a-89db8adb857f.png)
うまくいけば左下のブランチ表示が、自身で設定したブランチ名になると思います。

#### コード書く
ブランチを切ったところでコードを書いて行くのですが、エクスプローラーで見るとファイルの右側にUやMなどの表示がなされます。これはGitでのファイルの状態を表していて、Uは未追跡、Mは変更ありを表しています。
![スクリーンショット 2022-04-10 23.07.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627308/c390c5aa-0865-cb66-d3b7-41611856b88d.png)

#### ステージ(git add)
開発が一段落したらgitに変更内容を反映していきましょう。左の枝分かれしたボタンを押すとgit操作になるので、`＋`ボタンを押しステージ(所謂git add)していきます。
ボタンを押すと一段上の、ステージされている変更にファイル表示が移動します。
![スクリーンショット 2022-04-10 23.12.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627308/8d569e42-c788-22c8-f8de-cbd0870e1215.png)
ステージ後ファイル名をクリックすると、git diff表示が出てきて更新差分が分かりやすいです
![スクリーンショット 2022-04-11 16.22.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627308/22cae35a-462f-19f4-21bf-5246efe2e5ac.png)


#### コミット
コミットは先程の画面の一番上部のチェックマークになります。ボタンを押すとメッセージが要求されるので、コミットメッセージを入力します。
![スクリーンショット 2022-04-10 23.17.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627308/860b2edc-c858-c1c1-6d50-cca699b4f95d.png)

#### push
ローカルのブランチをgithub上にpushします。「ブランチの発行」もしくは左下の雲マークで自分のブランチをgithubに送ることができます。
![スクリーンショット 2022-04-10 23.20.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627308/ef7ef911-1bd5-e82f-7750-194818a3284b.png)

#### pull req
あとはgithubのGUI操作になります。ブランチ選択画面に進み、pull reqを出してみましょう。
![スクリーンショット 2022-04-11 7.56.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627308/baed8247-a25a-d80d-6ca3-212709d3b9c4.png)
最後、どのブランチにマージするのかbaseの選択を忘れずにお願いします。
![スクリーンショット 2022-04-11 7.57.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627308/e30000dd-ad13-cb6f-9ae3-ecfe3329f87b.png)

これでpull reqまで完了です！レビューが通るかドキドキして待ちましょう。

#### リモートで更新されたファイルをpull
pull reqが進みマージされ、次の開発を始める際には、ローカルの状態をリモートに合わせなおす必要が出てきます。
左下のブランチをmainに切り替え、ブランチ操作画面で３点リーダーから「プル」を選択することでローカルの情報を最新化できます。
![スクリーンショット 2022-04-11 16.39.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627308/f0d73456-8b4b-5912-719f-e7834e27dba7.png)

## 終わりに
一旦、一番シンプルな流れを記載しました。
「手元で開発している間にリモート側のソースが進んで取り込まなきゃいけなくなっちゃた」とかの操作はニーズがあれば書いて見ようと思います。
それでは！

## 追記: macへのgitのインストール
そもそもmacにgitが入っていないこともありますよね・・・

#### homebrewのインストール
homebrewは様々なソフトウェアのパッケージを管理するシステムで、入れておいたほうが無難なのでbrewからgitを入れます。
https://brew.sh/
の上部「Install Homebrew」に記載されているコマンドをコピーして、terminal.app に貼り付けましょう

※terminal.appが見つからない人はmac内を検索してみてください

#### gitのインストール
ターミナルから`brew install git`と打つとインストールが始まります。
完了後、`git --version`でバージョン情報が返ってきたらgitのインストール成功です！