GitとGitHubについて知ろう！
はじめに
この記事は、Git・GitHubに触ったことがない人・使ってるけどよく分からない人に向けたGit・GitHubの概要を理解するための記事です。以下の動画を参考にしたので、詳しく知りたい箇所については見てみてください。
この記事では、Git・GitHubについての概要を理解し実際に開発で使うことができることを目標としています！
Gitとは
システムを開発する際に、いつ・誰が・どのファイルを・どのように変更したのかという履歴を記録しておくためのバージョン管理ツールです。
リポジトリとローカル・リモート
gitでは "リポジトリ" という場所でファイルを管理します。リポジトリは、システムやプロジェクトを作成するための箱のようなものです。通常、1つのシステムやプロジェクトにつき1つのリポジトリを作成します。
複数人で開発する際、Gitが用意しているサーバにアップロードやダウンロードをすることでファイルの共有を行います。このサーバーのことをGitでは "リモート" と呼びます。一方で個人個人の作業端末のことをGitでは "ローカル" と呼びます。
GitHubとは
Gitの"リモート"の中身を見たい時に使うと便利なのが "GitHub" というツールです。これを使うことで、ウェブブラウザ上で簡単にGitの管理をすることができます。Gitは履歴を管理するためのシステムのこと、GitHubはGitのリモートをウェブブラウザで見るためのツールであること という違いを覚えておきましょう。
GitHubアカウントを登録してリポジトリを作成してみよう！
まだ自分のGitHubアカウントを持っていない方は、こちらのリンクから作成してください！
実際にリポジトリを作ってみましょう。
- 緑色のNEWまたはCreate repositoryボタンを押します。すると、リポジトリの作成画面に遷移します。
- Repository nameの欄に名前を入力しましょう。何でも大丈夫です。例：git-test
- 少し下に進むと、PublicとPrivateを選択できます。これはリポジトリを全員に公開するか/非公開にするかを設定する場所です。デフォルトでPublicとなっていますが、今回は公開しないのでPrivateを選択します。
- Add a README file にチェックをいれましょう。これは開発するプロジェクトの概要を書くファイルで、チェックするとはじめからリポジトリに格納されている状態になります。 ※なくても可
- Create Repository ボタンを押し、リポジトリを作成します。
作成したリポジトリが表示されたら成功です！これがシステム開発をする際のハコになります。
ローカルの変更をリモートに反映させる
次は、ローカルで編集した内容をリモートに反映させてみましょう。
Gitは"git add"や"git commit"などのコマンドをターミナル で打つことで操作します。実際にローカルでコードを書いてからリモートを更新するまでの流れを見てみましょう。
一言でいうと、 ステージング → コミット → プッシュ です。
Gitにはリモートとローカル（自分のPC）があることは説明しましたが、ローカルの中にも リポジトリ 、インデックス、ワークツリーの3つがあります。ワークツリーとは、実際にコードを書いたり作業したりする場所のことです。
ワークツリーでコードが完成したら、ステージングをします。ステージングとは、ワークツリーからインデックスにファイルの変更を登録することです。"git add"コマンドで実行します。
次に、コミットします。コミットとは、インデックスに登録された変更点をリポジトリに反映させることです。"git commit"コマンドで実行します。
最後に、プッシュをします。これは、ローカルリポジトリからリモートリポジトリに反映させます。"git push"コマンドで実行します。
以上の ステージング → コミット → プッシュ の流れで作業ファイルをリモートリポジトリに反映させることができます。
実際にプッシュまでやってみよう！
上記で説明したファイルのリモートリポジトリへの反映を実際にやってみましょう。
- リポジトリをもってきて、GitHubとVScodeを連携
先ほど作成したリポジトリをローカルに持ってきます。VScodeのターミナルで以下のコマンドを実行してください。リンクは、先ほど作成したリポジトリの緑色のCodeボタンを押すことで表示されます。
git clone [作成したリポジトリのhttpsのリンク]
これを行うことで、先ほど作成したリポジトリを自分のPC上にもってくることができました。実際に、以下のようにディレクトリ"git-test"が作成されていて、READMEファイルが格納されているのが分かります。
- ファイル"file1.txt"を作る
git-testディレクトリ内にテキストファイル"file1"を作成しましょう。ファイル内にテキスト文を適当に書きましょう。
テキストファイルを追加すると、ファイル名が緑になっています。これは、変更があったファイルだよというのを分かりやすくするためです。
- "git add" でステージングしよう
現在の状態で、Gitの状態を確認してみましょう。以下のコマンドを実行してください。
git status
すると以下のように表示されるはずです。
※fatal not a git repositoryと出力された場合はターミナルがいる場所が適切でないので、cd [ディレクトリ名] で移動してください。
上2行は現在のブランチを表しています。ブランチについては後述するのでスルーで大丈夫です。
真ん中3行は"file1"がUntracked（非追跡）、つまりリモートに反映されてないよということを教えてくれています。
では実際にgit add してみましょう。以下のコマンドを実行してください。
git add file1.txt
何も出力されないはずです。再びgit statusを実行して状態を確認してみましょう。
このように、新しいファイルがあるからコミットしてねと表示されていたらステージング成功です。
- "git commit" でコミットしよう
次は、リポジトリに反映させるコミットを実行してみましょう。以下のコマンドを実行してください。
git commit -m "file1 commit"
git commitのみでも実行できますが、-mオプションをつけることで名前をつけながらコミットすることができます。以下のように表示されたら成功です。
- リモートにプッシュしよう
ローカルからリモートにプッシュしましょう。以下のコマンドを実行してください。
git push
以下のように表示されたら成功です。
- GitHubで反映されているか確認しよう
最後に、プッシュした変更がリモートに反映されているのかGitHubで確認してみましょう。GitHubのブラウザ画面に戻り、更新してください。
すると、READMEファイルの下にfile1.txtが追加されているのが分かると思います。また、コミット名で"file1 commit"と指定してコミットしたことも確認できます。
以上が、ローカルの変更をリモートに反映させる add → commit → push という一連の流れです。これは一つの機能を作るたびに行う流れなので、ぜひ覚えておきましょう。
ブランチとは
Gitでは、それぞれの変更履歴を枝分かれさせることができます。開発が始まったときから存在しているものをmainといいます。この、masterとは別で追加・修正していくものをブランチといいます。ブランチで作業することによって、すでに動作しているシステムに影響を与えることがなく新しい機能を開発することができるのです。
また、1つのブランチから別のブランチを新規に作ることをブランチを切るという言い方をします。上の画像では、始めにmasterブランチから4つのブランチを切っています。これによって、用途ごとに管理することができます。
ブランチを切るのは、以下のコマンドで実行できます。
git checkout -b [新しく作るブランチ名] [基となるブランチ名]
よくあるブランチ名
main : 本番環境にデプロイされる安定版のブランチ（デフォルトで存在する）
develop : 開発する際にメインで使われるブランチで、新機能の統合やテストが行われる
feature/[機能名] : 特定の機能開発を行うためのブランチ
マージとは
切ったブランチは合流させることができます。これをマージといいます。変更履歴が異なっているブランチをマージすることで、一方の修正・追加を他方に反映させることができます。上の画像では、feature Aブランチをdevelopブランチにマージしています。このマージによってfeature Aブランチで作成した機能がdevelopブランチでも使えるようになります。
方法は、checkoutコマンドでマージ先に移動し、以下のコマンドを実行することで、対象のブランチをマージ先にマージすることができます。
git merge [マージ対象ブランチ名]
実際にブランチを切ってプッシュしてみよう！
- 現在のブランチ状況を確認してみよう
先ほどの続きで、ターミナルに以下のコマンドを実行してみてください。
git branch
これは、現在のブランチ状況を確認することができます。まだブランチを切っていないので、デフォルトで存在するmainのみ表示されるはずです。
- developブランチを切る
それでは、実際にブランチを切ってみましょう。今回は、mainブランチを基にしてdevelopブランチを切ってみましょう。以下のコマンドを実行してください。
git checkout -b develop main
そして、git branchでブランチ状態を確認してみてください。
上図のようになっていたら成功です。developが緑色で表示され、前にアスタリスクが付いていますが、これは今、あなたはdevelopブランチにいますということを示してくれています。
- developブランチでファイルを修正してみよう
次は、作成したdevelopブランチでファイルを修正してみましょう。以下のように、file1.txtに何か書いてみてください。試しに、develop branch と書いてみました。2行目が追加した行なので緑色が表示されているのが分かります。
そして、この修正をステージング＆コミットしてみましょう。コマンドは前と同様に以下を実行してください。
※"develop-branch"の箇所はなんでも可
git add file1.txt
git commit -m "develop-branch"
- developブランチをmainブランチにマージする
それでは、developブランチをmainにマージし、先ほどの修正点を反映させてみましょう。
まず、以下のコマンドでmainブランチに移動します。
git checkout main
Switiched to branch 'main'と表示されていたら移動できています。
ここでfile1.txtを見てみると、先ほど追加した行が消えていると思います。
これは、変更を加えたのがdevelopブランチで、現在いるのは変更を加えていないmainブランチだからです。
それでは、マージしてみましょう。以下のコマンドを実行してください。
git merge develop
1 file changed が出力されていると成功です。file1.txtを確認してみてください。developブランチで追加した2行目が表示されているはずです！
以上が、ブランチを切ってからファイルを修正し、マージするまでの流れです。
🛠️ Git基本コマンド一覧
| コマンド | 役割 |
|---|---|
git clone <リポジトリURL> |
リモートリポジトリをローカルにコピーする |
git status |
作業ディレクトリの状態を確認する |
git add <ファイル名> |
ステージにファイルを追加する |
git commit -m "メッセージ" |
ステージの変更をローカルにコミットする |
git push origin <ブランチ名> |
ローカルの変更をリモートに反映する |
git pull origin <ブランチ名> |
リモートの変更をローカルに取り込む |
git branch |
ブランチの一覧を表示する |
git checkout <ブランチ名> |
指定したブランチに切り替える |
git merge <ブランチ名> |
他のブランチを現在のブランチにマージする |
git log |
コミット履歴を表示する |
git diff |
変更内容を確認する（未ステージとの差分） |
以上です！ありがとうございました。
Discussion