GitとGitHubの概要③

お疲れ様です!

IHです!

 

 さて、今日は前回の続きで、GitHubの内容をアウトプットしていきたいと思います!

 

 前回は、リモートリポジトリの作成までを行いました。

 今日は、リモートリポジトリに保存をしたいと思いますが、その前に

「ブランチ」

というものから説明していきたいと思います。

 

では早速始めます!

 

ーーーーーーーーーーーーーーーーーーーーーーーー

 

ブランチとは?

→「リポジトリで管理しているファイルやディレクトリの変更の流れ」

 

 このブランチには、分岐に種類があります。

 

 変更の本流となる「masterブランチ」

 「masterブランチから分岐するブランチである、トピックブランチ」

です。

 

 文章だけではわかりづらいと思うので、イラストを載せます。

 

f:id:IH-program:20200728204611j:plain

 

 ちなみに、ブランチを日本語で言うと「枝」だそうです。木の枝のように枝分かれしているから、ブランチと呼ぶんですね。

 

 ブランチは、複数人で開発をするときに非常に便利です。

 

 一人でアプリケーション開発を進めていくと

「まず、ルーティングして、コントローラーを作って、それからビューファイルも作って……あー! やること多すぎるよ!」

となります。

 

しかし、複数人でやれば

Aさん「じゃあ私はコントローラー作るね」

Bさん「じゃあ僕はビューファイル作ります」

と、役割分担できます。この方が効率的ですよね。また、不具合が発生した場合も、被害を最小限にでき、容易に対応できます。

 

 では、このブランチを早速作っていきましょう!

 (前回はgit-appというアプリを作って説明していましたが、今回は、僕が制作中のchat-appというアプリで行っていた作業の模様を、スクリーンショットでお届けしたいと思います)

 

 

◉ブランチの作成・リモートリポジトリへの保存

 

 

まずは、下の画像をご覧ください。

 画面上側の真ん中に、「Current Branch」と書いてあると思います。こちらをクリックしてください。

 

f:id:IH-program:20200723224558p:plain

 

すると、以下のような画面が出てきます。

 

f:id:IH-program:20200728210825p:plain

 

 filterという欄にブランチの名前を入力し、「New Branch」をクリックしましょう。

 

その次に、「Create Branch」と言う青いボタンが表示されるので、クリックしましょう。その後、「Current Brunch」の欄が、先ほど入力したブランチの名前になっているかを確認しましょう。

 これで、ブランチの作成は完了です!

 僕はこのとき、「メッセージ投稿機能の実装」という名前でブランチを作りました(このことを、ブランチを切る、とも言う様です)。

 

 次に、画面右側に「Publish branch」という青いボタンが表示されるので、クリックしましょう。そうすることにより、このブランチをリモートリポジトリに反映することができます。

 

f:id:IH-program:20200728211844p:plain

 

 この後、ファイルを変更修正したら、前回の記事で説明したように、commitを行いましょう。commitが完了すると、画面右側に「Push origin」という青いボタンが表示されます。このボタンをクリックすることで、ローカルリポジトリの内容をリモートリポジトリに反映させることができます! つまり、リモートリポジトリにローカルリポジトリのデータを保存させることができるわけですね!

 

 この

「ローカルリポジトリでのコミットをリモートリポジトリに反映させること」

「push」

と呼びます。

 

 

◉プルリクエストの作成

 

 pushをした後には、次のような画面が表示されます。

 

f:id:IH-program:20200728213509p:plain

 

 「Create Pull Request」とありますね。これをクリックすると、プルリクエストという機能を使用することができます。

 

 プルリクエストとは?

→ブランチでのコミット履歴を残すとともに、各コミットにおける変更修正にコメントをつけることができるGitHubの機能のこと。1つのブランチ作業について、コードを確認しつつ、コミュニケーションを取れる掲示板のような物。

 

「Create Pull Request」をクリックすると、次のような画面が表示されます。

 

f:id:IH-program:20200728214148p:plain

 

 これから、「Leave a comment」と表示された部分に「What」と「Why」を書いていきます。具体的には、以下のように書いていきます。

 

f:id:IH-program:20200728214344p:plain

 

 このように、Whatの部分には「どのような実装をしているのか」を記述し、

Whyの部分には「なぜこの実装が必要なのか」を記述します。このプルリクエストを書くときは、マークダウン記法を使って書きます。以下のリンクの記事に、詳しく説明されていますので、ご覧ください。

 

マークダウン記法

 

  必要な内容を入力できたら「Create pull request」という緑色のボタンをクリックします。

 

 

◉merge

 

  すると、次のような画面が表示されます。

 

f:id:IH-program:20200728215311p:plain

 

 プルリクエストや、自分が行ってきたcommitの内容が表示されています。ここからさらに下の画面へスクロールすると、以下のような画面が出てきます。

 

f:id:IH-program:20200728215623p:plain

 

 (こちらからコメントを送ることができますが、今回は個人での開発のため、省略します)

 

 次に「Merge pull request」という緑色のボタンがあります。これをクリックすると、実装したブランチの内容を、リモートリポジトリ上のmastarブランチにmerge(マージ)することができます。

 

mergeとは?

→機能実装のために作成したブランチを、リモートリポジトリ上のmastarブランチに反映させる作業のこと。

 

これを行うことで、Aさんが作ったコントローラーと、Bさんが作ったビューファイルを一つにすることができます。

 

 それでは「Merge pull request」をクリックしましょう。すると、「Confirm merge」という緑色のボタンが表示されるので、こちらも続けてクリックします。成功すれば、トピックブランチの内容を、masterブランチに反映することができます。

 

 mergeが完了すると、次のような画面が表示されます。

 

f:id:IH-program:20200728220921p:plain

 

 「Delete branch」をクリックすると、GitHub上のブランチを削除することができます。

 

 それでは、「GitHub Desktop」に戻って作業を行いましょう。

 

 

◉pull

 

 それでは、「Github Desktop」で、Current Branchをクリックし、masterブランチに切り替えましょう。

 

f:id:IH-program:20200728221333p:plain

 

 その後、画面右上の「Fetch origin」をクリックしましょう。すると、「Pull origin」という青いボタンが表示されます。

 

Pull(プル)とは?

→リモートリポジトリの変更を、ローカルリポジトリに取り組む操作のこと

 

 つまり、今はまだローカルリポジトリのmasterブランチには、変更内容は反映できていない状態というわけですね。

 この「Pull origin」をクリックすると、ローカルリポジトリにも、作業ブランチをmergeした状態が反映されます。

 

 

ーーーーーーーーーーーーーーーーーーーーーーーー

 

 

 いかがでしたか?

 

 ざっくりとですが、GitHubでの作業の流れをアウトプットしてみました。

 

 複数人での開発において、GitHubは欠かせない存在ですので、是非リキしておきたいですね!

 

 それでは、最後まで読んでくださり、ありがとうございました!