未来エンジニア養成所Blog

プログラミングを皆に楽しんでもらうための情報をお届けします。

【Git&GitHub】GitHub Flowの実践

title


GitHub Flowを実践しよう

前回解説したGitHub Flowを実践してみます。


GitHub Flowを実践する前に一連の流れについて再度確認しておきます。

まずmainブランチからブランチを作成していきます。

ブランチを作成したらそのブランチでファイルを変更してコミットします。

コミットして開発が完了したら同じ名前のブランをGitHubへプッシュします。

GitHubへプッシュした後はプルリクエストを作って、コードレビューをしてもらって、コードレビューが完了したらmainブランチにマージします。

マージし終わったらmainブランチをすぐにデプロイしていきます。

GitHub Flow


実際にやってみよう

ではこれを実際にやってみましょう。


ターミナルを開いて、実際に開発してみます。

まず今自分がいるブランチが何かを確認します。

$ git branch
* main

mainブランチです。


mainブランチのファイルの変更はされていないかというのを確認してみます。

$ git status
On branch main
nothing to commit, working tree clean

何も変更が無いことが分かります。


まずmainブランチを最新の状態にしておきます。

$ git pull origin main
From github.com:piketa/git_tutorial
 * branch            main       -> FETCH_HEAD
Already up to date.

特に何も更新されなかったので、mainブランチは最新の状態にあります。


mainブランチは最新の状態であることを確認した上で、新しいブランチを作成して、開発を進めていきます。

今回新しいブランチの名前は「github_flow」という名前にします。

$ git checkout -b github_flow
Switched to a new branch 'github_flow'


ではこの「github_flow」で開発を進めていきましょう。


テキストエディタで「index.html」を開きます。

ここに「<p>GitHub Flow</p>」追記します。

追記したら保存してターミナルに戻ります。

先ほど変更分をコミットします。

$ git add index.html

$ git commit -m 'GitHub Flowを追記'
[github_flow b3864bb] GitHub Flowを追記
 1 file changed, 1 insertion(+)


コミットができたらGitHubにプッシュします。

$ git push origin github_flow
Enumerating objects: 5, done.
Counting objects: 100% (5/5), done.
Delta compression using up to 8 threads
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 324 bytes | 324.00 KiB/s, done.
Total 3 (delta 2), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (2/2), completed with 2 local objects.
remote:
remote: Create a pull request for 'github_flow' on GitHub by visiting:
remote:      https://github.com/piketa/git_tutorial/pull/new/github_flow
remote:
To github.com:piketa/git_tutorial.git
 * [new branch]      github_flow -> github_flow


プッシュできたので、GitHubに移動します。

自分のGitHubを開いたらgit_tutorialリポジトリに移動します。

こちらから「Pull requests」タブをクリックして、プルリクエストを作成していきましょう。

「New pull request」ボタンをクリックします。

今回「base:」は「main」で、「main」に対して「github_flow」ブランチをプルリクエストしていきます。

「Create pull request」ボタンを押します。

ブルリクエストのタイトルはそのまま「GitHub Flowを追記」とします。

本文はからにしておきます。

Pull request


「Create pull request」ボタンを押します。

これでプルリクエストが作られました。


ではここからレビューを依頼していきます。

通常であれば「Reviewers」を押して、チームで開発している場合チームメンバーの名前が出てくるので、そこからレビューを依頼したい人を選択してレビューを依頼していきます。

今回は1人でやっているので、そういう機能もあることを把握したら×を押して閉じておきます。


では、ここからはレビュワーの気持ちになります。

レビュワーはプルリクエストの通知を受け取ったら、「pull requests」タブを開いて、「Files changed」を確認します。

何が変更されたかというと、一番下に「<p>GitHub Flow</p>」というのが追記されたということがわかります。

Pull request


何か問題があれば「+」ボタンを押して、コメントしていきますし、何も問題がなければ、「Review changes」から「Approve」にチェックして「Submit review」ボタンを押します。


今回もこれはApproveされたとします。


Approveされたら「Conversation」タブに移動して、その下に「Merge pull request」があるので、こちらからマージしていきます。

「Confirm merge」ボタンを押すことでマージされます。

マージができたら、「Delete branch」ボタンを押して、ブランチを消します。

ブランチを削除したら、この後すぐにmainブランチをデプロイします。


今回デプロイの内容に関しては特に触れませんが、もうデプロイの環境がある方はその環境を活かしてすぐにデプロイして頂いたら大丈夫ですし、デプロイの環境がない方はできる限りデプロイの環境を用意しましょう。


デプロイができたらこれでGitHubFlowの一連の流れが完了です。


今回の内容としてはここまでなのですが、最後にターミナルに戻って後片付けをしておきましょう。


まず、mainブランチに戻ります。

$ git checkout main
Switched to branch 'main'


先ほどのGitHubのmainブランチの内容を自分のワークツリーの方にも取り入れていきます。

$ git pull origin main
remote: Enumerating objects: 1, done.
remote: Counting objects: 100% (1/1), done.
remote: Total 1 (delta 0), reused 0 (delta 0), pack-reused 0
Unpacking objects: 100% (1/1), 647 bytes | 323.00 KiB/s, done.
From github.com:piketa/git_tutorial
 * branch            main       -> FETCH_HEAD
   52fd079..c378922  main       -> origin/main
Updating 52fd079..c378922
Fast-forward
 index.html | 1 +
 1 file changed, 1 insertion(+)

これでmainブランチの内容を取り込むことができました。


mainブランチを最新の状態にしたら、自分のワークツリーの「github_flow」ブランチも削除しておきましょう。

$ git branch -d github_flow
Deleted branch github_flow (was b3864bb).

これでブランチも削除できました。


この後また新しい開発を進めたい場合は、この最新にしたmainブランチからまた新しいブランチを作成して開発していけば大丈夫です。


このようにGitHub Flowはとてもシンプルなワークフローです。

もしまだ何のワークフローも入れていないようでしたら、是非このGitHub Flowを試してみてください。


参考図書



独学で挫折しそうになったら、オンラインプログラミングスクール
未来エンジニア養成所Logo



あわせて学習したい

phoeducation.work