ここではチーム開発を行う上で必須なブランチを使った機能について紹介していきます。
この機能はチーム開発だけではなく、個人開発でも使うのでしっかり理解しましょう！
ブランチとは、1 つのプロジェクトから分岐させることにより、プロジェクト本体に影響を与えずに開発を行える機能のことを言います。
イメージとしてはパラレルワールドを作成して、のちに元の世界に収束させることもできる、という感じです。
リポジトリを作ると main(or master)という名前のブランチが作成されます。
よく使われる開発のブランチとして、以下が挙げられます。
main ブランチ: リリースした時点のソースコードを管理するブランチ(安定しているコードを置く)
develop ブランチ: 開発作業中の安定したブランチ(main ブランチへマージされます)
開発ブランチ: 実際にコードをpushしていくブランチ(develop ブランチへマージされます)
実際のブランチの動きが以下の画像のようになります。
- main ブランチ
- develop ブランチ
- 開発ブランチ
ブランチ操作では以下の二つのコマンドをよく使用します。
branchコマンドで、ブランチの確認や操作をすることができます。
以下はブランチ確認する時のコマンドです。
// ローカルのブランチ一覧を確認する
$ git branch
// リモートのブランチを確認する
$ git branch -r
// 全てのブランチを確認する
$ git branch -a以下はブランチを操作する時のコマンドです。
// ブランチの新規作成
$ git branch [ブランチ名]
// 今いるブランチの名前を変更する
$ git branch -m [新しいブランチ名]
// ブランチを削除する
$ git branch -d [ブランチ名]switchコマンドで、ブランチの切り替えをすることができます。
// 既存のブランチへ切り替え
$ git switch [ブランチ名]
// ブランチを新規作成と切り替え
$ git switch -c [ブランチ名]で、ブランチの作成と切り替えができます。
ブランチを移動したら、そのブランチで開発しコミットしていきます。
main ブランチ以外で作業した時に注意することがあります。
それは、push, pullをするときにリモートの情報とブランチを指定してあげる必要があります。
やり方は単純です。
以下のコマンドを使用します。
$ git push origin [ブランチ名]
$ git pull origin [ブランチ名]リモートの情報を指定と言いましたが、originと書いている部分がそこに当たります。
これは最初に設定しているので、今は特に気にしなくても大丈夫です。
では、実際にブランチを切ってコードを変更してみます。
まずは、ローカルが最新であることを確認するためにpullしておきます。
$ git pull今のブランチがmainであることを確認します。
$ git branch次に、ブランチを切ります。
今回は仮にtest-1という名前のブランチを作成します。
(こだわりがある人は自分の好きなブランチ名でも構いません)
$ git switch -c test-1正しくブランチが変更されているか確認します。
$ git branchtest-1というブランチが作成され、そこへ移動していれば OK です。
では、ファイルを修正していきましょう。
index.jsを、index_04.js のように変更しましょう！
変更前
console.log("Hello, world!");
function test() {
console.log("test");
}
test();変更後
function hello() {
console.log("Hello, world!");
}
hello();変更が完了したら、コミットしていきます。
$ git add .
$ git commit -m "Add hello function"コミットが完了したらtest-1ブランチをリモートへ反映させます。
$ git push origin test-1リモートで、ブランチが増えていることを確認できたら完了です！
「main」の部分を選択すると、「test-1」を選択することができるようになっていると思います。
ブランチを切って作業した時にそのブランチの変更内容を元のブランチに反映させたくなります。
その時に、切ったブランチと元のブランチを合流させます。
これをMergeと言います。
この操作はコマンドで行うことができるのですが、コンフリクトなどのバグが一番起こりやすい操作となります。
ですので、安全にマージさせるために Pull Request という機能を使用します。
Pull Request とは簡単に言うと、開発者のローカルリポジトリでの変更を他の開発者に通知する機能です。
Pull Request を使うと、以下のようなメリットがあります。
- 機能追加や改修などの作業内容を他開発者に通知
- ソースコードの変更箇所を分かりやすく表示
- ソースコードに関するコミュニケーションの場の提供
Pull Request は GitHub 上で行います。
まずは、ブランチを切って作業した後にcommit, pushまで行います。
(この時、先述の通りブランチ名を指定して push することを気をつけて下さい。)
次に、GitHub 上で Pull Request を作成します。
ブランチを更新してpushすると以下の画像のように、自動で Pull Request を作成するとこができるボタンが出てくるので、
このボタンを選択して作成します。
また、以下のように手動でブランチを選択して Pull Request を作成することも可能です。
この場合には、まず「Pull requests」タブから、「New pull request」ボタンを選択します。
次に、どのブランチをどのブランチにマージさせるのかを選択して、「Create pull request」を選択します。
どちらの方法でも、次に以下のような画面が出てきます。 ここに、Pull Request の内容を書いていきます。
- まずタイトルにやったことを簡単に記述します。
- 次に詳細をマークダウン形式で入力します。
ここには、他の人が見たときにも分かりやすいことを意識して内容を書きましょう。 - ここは様々なオプションをつけることができるのですが、現在は特に追加するものがないので飛ばします。
- 上記の入力が完了したら、作成をします。
以下のようにな画面が出てきたら完了です！
まずは、先ほどの画像がメインの画面になります。
ここでは、Pull Request 作成時に入力した項目が表示されます。
また、コメントがあった際にはここに表示されます。
次に、「Commits」のタブです。
ここでは、ブランチのコミット履歴が一覧で表示されます。
コミットのを選択すると、そのコミット単位での変更が表示されます。
「Checks」については、今は気にしなくていいので説明を省略します。
続いて、「Files changed」のタブです。
ここでは、このブランチで行ったファイルの変更を見ることができます。
ここでは、変更に対して実際のコードを指定してコメントを追加することができます。
個人開発のみではコメントは特にする機会はないかとは思いますが、チーム開発をする上でとても便利です。
ここで書いたコメントは「Start a review」を選択した場合には下記で説明する、レビューを行わないと実際に反映されないので注意して下さい。
では、Pull Request のレビューをしていきます。 自分が出した Pull Request なので、承認などはできませんが説明だけしておきます。
- まずは「Review changes」を選択します。
- 次にコメント(Pull Request 全体に対して)を書きます。
- レビュー結果の種類を選択します。
内容は以下の 3 つが存在します。
a. Comment: ただのコメントです。
b. Approve: このブランチをマージして OK と言う承認です。
c. Request changes: 修正依頼など承認しない場合に選択します。 - 上記全てを選択したら「Submit review」を押して完了です。
では、実際にtest-1ブランチをmainブランチへマージしましょう。
やり方は簡単です。
まずは、「Merge pull request」を選択します。
すると以下のような表示に切り替わるので、続けて「Confirm merge」を選択します
これでマージが完了しました！
リモートのブランチはもう必要ないので、削除しておきます。
では、実査に main に反映されているかチェックしてみましょう。
「Code」タブからindex.jsの中身を見てみて下さい。
正しく反映されていることが確認できました。
現状は、リモートブランチのみがマージされた状態なので、main ブランチをローカルに反映させます。
以下のコマンドを入力して下さい。
まずは、mainブランチへ移動します。
$ git switch mainリモートの状態をローカルに反映させます。
$ git pull自分のコードを確認して、index.jsが更新されていれば成功です！
ここまでの流れは非常に多く使うので、何度も練習して使い慣れましょう！