GitHub管理のプロジェクトに参加してプルリクを送るまで

はじめに

インターンに参加し、GitHubで管理しているプロジェクトに参加することになったので、やったことなど後から参照できるようメモがてら書いていきます。
また、同じことをするのにコマンドとツールでどう違うか書いていければなと思う。

こちらの作業環境としてはWindows10を使用しています。

手順

1, ツールインストール

Gitというとコマンド叩いてというのをイメージしがちだが、そういったことをしなくて済むようにSourcetreeというツールがあります。
これを使えばコマンドを細かく覚えたりしなくてもGUIで直感的に操作ができるので便利です。
インストール途中でアカウントがどうたらと出て来るがお手持ちのGoogleアカウントを使っちゃえばOK。

もしくはVSCodeにもGit管理機能がついてるからそれを使うのもあり。

2, まずはプロジェクトディレクトリをクローンする

作業するファイルがないと何もできないので、まずはGitHub上からコピーしてきます。
URLはGitHubのリポジトリページ右上にあるClone or downloadという緑色のボタンを押してコピーできます。

コマンド操作の場合

$ git clone URL

これを打てば今いるディレクトリにクローンされます。

Sourcetreeの場合

上のメニューバーにある「ファイル」から「クローンを作成」を選択し、クローン元とそれの保存先を指定してクローンを押せば完了。

3, 作業用のブランチを切る

インターン先企業ではGit-flowを用いて開発を行っていました。なので、作業に移る前にブランチを切っておきます。

コマンド操作の場合

$ git branch feature/hogehoge

feature/hogehogeの部分は適当に名前を変えたり。
これでブランチを切れます。

Sourcetreeの場合

上部のブランチというボタンを押して、ブランチ名を入力し作成ボタンを押せばOK！

3.5, ブランチの確認と切り替え

今いるブランチの確認やブランチの切り替えもできる。
####コマンド操作の場合
ブランチ一覧を確認でき、左に*がついてるのが現在いるブランチ。

$ git branch
  develop
  feature/hogehoge
* feature/testtest
  master

ブランチを切り替えるならこう。

$ git checkout feature/hogehoge
Switched to branch 'feature/hogehoge'

Sourcetreeの場合

サイドバーにあるブランチ名の横に○がついているのが現在自分がいるブランチで、ブランチ名をダブルクリックすることで作業するブランチを切り替えることができます。

4. ファイルを編集してコミットする。

自分の担当する箇所の編集が終わったらコミットしてGit側にも反映させましょう。

コマンド操作の場合

$ git add filename
$ git commit -m "コメント"

コミットするためにまずはインデックスに追加(add)し、コミット(commit)すれば完了です。

Sourcetreeの場合

下部のファイルステータスから、変更したファイルをインデックスに追加してテキストボックスにコメントを書き込んでコミットを押せば完了です。

ですがこれだけでリモートのGitHub上にも変更が加えられるわけではなく、変更されるのはローカル上だけです。

5, プッシュしてGitHub上に上げる

ということで変更点をGitHubにあげてみよう。

コマンド操作の場合

$ git push origin ブランチ名

Sourcetreeの場合

上部のプッシュボタンを押して変更したブランチを選択しプッシュする。

6, プルリクを送る！

変更点をレビューしてもらうためにプルリクを送ります。
ここからはGitHub上で作業します。
そのリポジトリページに行くと以下のようにプルリクできそうなボタンがあるので押します。

押すと画面が変わってプルリクを送る画面になります。

ここからマージ先のブランチを変えたりプルリクを送るのにタイトルやコメントを設定できます。
各種記入して最後にCreate pull requestを押せば完了です！

あとはコードレビューとマージがされるのを待つだけです。

終わりに

プルリクやブランチを切ったりなどは複数人で開発を行わないとなかなか体験できないことだが、将来的に絶対必要になるであろうからこれぐらいのことは覚えておこうと思う。
こうまとめるとコマンドのほうが覚えてしまえば早く楽に終わるし、ガチで使っていくならコマンドメインでやってもいいかも。

[追記]
VSCodeでできる最低限必要なGit操作について書いたのでよければ見てね
VSCodeの機能で最低限必要なGit操作をしたい！

参考資料

サルでもわかるGit入門
Git-flowって何?
GithubでPR(プルリク)を使って開発しよう