チーム開発はエンジニアにとって必須の環境ですが、IT業界に入らないと方法がわからないという経験からこの記事を書きました。
GitとGitHubをなぜ使うのかやプロジェクトを進めるように解説してくれる記事があればなと思っていました。
そこで、この記事ではプロジェクトを進めながらGitとGitHubで使い方を解説していきます。
チーム開発をする初心者やドキュメントの管理をもっと効率的にしたい方におすすめです。
noteでも記事を書いてます！
（本サイトはアフィリエイト広告を利用しています）
Gitとは？
Gitは分散型バージョン管理システムのことで、ファイルのバージョンを管理することができます。
Gitではテキストファイルやコードの編集前と編集後を機械的に記録してくれているため、ファイルに問題があったときにコマンドを実行するだけで元に戻せます。
Gitを使わずにファイル管理するとどうなるか？
ファイル名に日付やバージョンを記載しておく方法がありますが、これは時間がたったときに確認する場合や他の人がファイルを確認する場合にファイルの新旧がわからなくなります。
また、ファイル名を入力するときに日付やバージョン、バージョンの記載方法をミスする可能性もあるため非効率な管理方法になります。
GitHubとは？
GitHubはGitでバージョン管理されたテキストファイルやコードをチームで共有・共同作業できるWebサービスです。
GitHub上でファイルの内容をレビューしたり課題（Issue）をアサインすることでチームに振り分けられます。
Git＆GitHubでチーム開発
前提条件
この章ではGitのコマンドとGitHubにユーザー登録できている前提で進めていきます。
以下のサイトが詳しく解説しているので参考にしてみてください。
GitとGitHubのバージョン管理の流れ
下図はGitとGitHubを使ったバージョン管理の流れを図にしました。
リモートリポジトリはネット上で管理されているプロジェクト（データ）のことで、今回の場合はGitHub内にあるプロジェクトのことです。
ローカルリポジトリは自分のパソコンにあるリポジトリのことで、GitHubなどからダウンロードしたプロジェクトを保管するフォルダです。
プロジェクトを作成する
GitHubのトップページを表示し、画面左上の「New」ボタンをクリックします。
プロジェクト名などを入力し、「Create repository」をクリックしてリポジトリを作成します。
リポジトリを作成すると以下のような画面が表示されます。
リポジトリをダウロードするときは右上の「Code」ボタンをクリックし、表示されているURLをコピーします。
ダウンロードしたいフォルダまで移動し、ターミナルで以下のコマンドを実行するとダウンロードできます。
<ダウンロードしたいフォルダ> % git clone https://github.com/<ユーザーアカウント>/sample-app.git
ローカルリポジトリで開発する（概要）
ここでは実際にプロジェクトを作成しながらチーム開発の手順を解説します。
コマンドを使ってバージョン管理するのは慣れるまで時間がかかりますが、覚えてしまうととても便利なのでぜひ活用してみてください。
ブランチを分岐させる流れ
下図はブランチがどのように分岐されるのかを表しています。
英数字で表現されているものはブランチの名前です。
ブランチとは履歴の流れを分岐して記録していくデータのことで、元データから分岐した状態でデータ編集して元データに合流（マージ）させると差分が反映されます。
mainブランチ
Webサービスなどの本番環境に反映させるブランチで、基本的に開発をスタートさせる時や開発が全て完了した時にしか操作しないです。
mainブランチとdevelopmentブランチを分けることで、2回目の開発でmainブランチには新旧のバージョンしか記録されないので切り替えが楽になります。
developmentブランチ
mainブランチから分岐されたブランチで、開発したデータを反映させるためのブランチです。developmentブランチは各開発者が修正したブランチをマージされます。
branch_nブランチ
各開発者がdevelopmentブランチから課題ごとに分岐させるブランチです。
課題は「〇〇機能の開発」や「△△部分の修正」などの単位で設定されます。
開発後はブランチを確認してもらい、developmentに開発したブランチをマージしてもらいます。
development+ブランチ
全ての開発が完了した状態のブランチです。このブランチを本番環境と同じ環境で作成されたテスト環境に反映して正常に機能するか確認します。
不具合が確認されると、development+ブランチから新しいブランチを分岐させて開発します。開発完了後は開発内容を確認してもらってdevelopment+ブランチに反映します。
main+ブランチ
development+ブランチの開発内容が安全であることを確認されてマージされたブランチです。本番環境でも動作確認などのテストをし、正常なことを確認すると開発は完了になります。
不具合がある場合はdevelopment+ブランチでやったように開発を再開させます。
2回目以降で本番環境に不具合が確認されるとmainブランチに切り替えて従来のバージョンに戻します。
ローカルリポジトリで開発する（準備編）
ここからはリモートリポジトリからダウンロードした「sample-app」フォルダを使って解説します。VSCodeも使用するので、ダウンロードしていない方は下のリンクからダウンロードしてみてください。
メインブランチを最新化
以下のコマンドでmainブランチを最新化します。
このコマンドはリモートリポジトリにあるmainブランチからローカルリポジトリにデータをダウンロードします。
sample-app % git pull origin main
開発用ブランチを作成
GitHub画面の左上に表示されているmainブランチをクリックします。
入力欄に「development」と入力し、「Create branch development from 'main'」をクリックします。
これで開発用のブランチが作成されました。
ローカルリポジトリで開発する（実践編）
課題ごとに開発していく方法を記載します。
大まかな流れは以下になります。
- GitHubでIssue（課題）を設定する。
- ローカルリポジトリで課題について開発したデータをGitHubにアップロードする。
- プルリクエストを作成する。
- Issueとプルリクエストを紐づける。
GitHub上でIssueを設定する
GitHubのIssuesタブをクリックし、「New Issue」をクリックしてIssue作成画面に遷移します。
Issueのタイトルと説明を入力して「Submit new Issue」をクリックしてIssueを作成します。
Issueを作成するとIssue一覧に作成されたIssueが表示されます。
Issueでは設定された課題について会話のようにコメントを残せるのでとても便利です。
ローカルリポジトリでブランチを分岐する
課題に合わせたブランチ名を設定して分岐させます。
sample-app % git branch
---------------------------------------------------------------------------
main
sample-app % git branch createText
分岐したブランチに移動して開発をします。
sample-app % git checkout createText
Switched to branch 'createText'
変更部分をインデックスに登録する
VSCodeで「sample.txt」を作成します。
新しく作成されたファイルは「U」と表示され、変更されたファイルは「M」と表示されます。
以下のコマンドで変更したファイルを確認します。
sample-app % git status
---------------------------------------------------------------------------
On branch createText
Untracked files:
(use "git add <file>..." to include in what will be committed)
sample.txt
nothing added to commit but untracked files present (use "git add" to track)
以下のコマンドでインデックスに変更したファイルを登録します。
sample-app % git add sample.txt
このとき、「git add .」とすると変更されている全てのファイルをインデックスに登録できます。
以下のコマンドを実行してファイルがインデックスに登録されているか確認します。
sample-app % git status
---------------------------------------------------------------------------
On branch createText
Changes to be committed:
(use "git restore --staged <file>..." to unstage)
new file: sample.txt
コミットを取り消すとき
一つ前のcommitを取り消すときは以下のコマンドを使用します。
sample-app % git reset --mixed HEAD^
git reset には3種類のオプションがあるので、以下のサイトでどのような動作になるのか確認することをおすすめします。（図解で説明されているためわかりやすいです。）
コミットをリモートリポジトリにプッシュする
インデックスに登録されていることを確認できたら以下のコマンドを実行してリモートリポジトリに変更したファイルをアップロードします。
sample-app % git push origin HEAD
Total 0 (delta 0), reused 0 (delta 0), pack-reused 0
remote:
remote: Create a pull request for 'createText' on GitHub by visiting:
remote: https://github.com/<ユーザー名>/sample-app/pull/new/createText
remote:
To https://github.com/<ユーザー名>/sample-app.git
[new branch] HEAD -> createText
GitHub上のsample-app画面を確認すると、「Compare & pull request」というボタンが表示されているのでクリックします。
ブランチを「development」にしてタイトルと説明を記入します。
「Create pull request」ボタンをクリックします。
これでプルリクエストが作成されます。
プルリクエストは変更や追加されたファイルの内容をチームに確認・承認してもらう機能です。
レビューをする
レビューはファイルやコードの品質を向上させるために必要です。
基本的にレビューは自分以外の方にやってもらうのが一般的です。
ここではレビューの方法を記載します。
該当するプルリクエストを選択し、コミットを選択します。
ファイルの行を選択するとコメント欄が表示されるので、修正内容を入力して「Start a review」ボタンをクリックします。
修正内容をコメントした後、画面右上の「Finish your review」ボタンをクリックし、全体の修正に対するコメントを記載して「Submit review」ボタンをクリックします。
レビューが送信されるとプルリクエスト画面にレビュー内容が反映されます。
開発者はレビューを見ながら内容を修正してプルリクエストに修正内容をpushします。
これを何度か繰り返して内容が完了するとdevelopmentブランチに編集した内容がマージ（合流）されます。
もっと学びたい方へ
エンジニアやUIデザイナーなどコードやテキストファイルを管理するのに必須なGitとGitHubについて解説しました。
GitやGitHubの使用方法はネットに書かれてありますが、プロジェクト作成から完成までを説明しているサイトは少なかったです。
この本では実際にプロジェクトを作成しながらGitとGitHubの使い方がわかります。図解でGitがどのようにデータを管理しているのかやチーム開発ならではの問題の解決方法なども記載されています。
チーム開発・バージョン管理を導入したい方やGit＆GitHubの復習をしたいエンジニアにおすすめです。
詳細はこちら→いちばんやさしいGit&GitHubの教本 第2版 人気講師が教えるバージョン管理＆共有入門
まとめ
GitとGitHubの説明とチーム開発の進め方について解説しました。チーム開発の方法を習得するには苦労しますが、習得すると品質の良い開発ができるようになります。
どんどんGitとGitHubを使ってチーム開発を覚えていきましょう！
未経験からのITエンジニア
IT技術の進化速度が速くなっていっている今、IT技術にアンテナを張っておくことはとても重要です。エンジニアになろうとしている方やそうではない方もITスキルを磨くことで問題解決能力や論理的思考を養うことができます。複雑な課題に対処し、効果的な解決策を見つける能力はどの職種でも重宝されます。
そこで、エンジニア未経験の時にあったらよかったなと思っていた講座をマガジンにまとめました！アプリの基礎がわかるTodoアプリの開発からGit&GitHubでのチーム開発までエンジニアに必要な知識が詰まっています！
エンジニアリングの第一歩として使ってみてください！
Discussion