LoginSignup

This article is a Private article. Only a writer and users who know the URL can access it.
Please change open range to public in publish setting if you want to share this article with other users.

More than 1 year has passed since last update.

GIT+GITHUB教材

Last updated at Posted at 2022-03-20

Gitとは

Gitとは、分散型バージョン管理システムのことです。
少しむずかしい言葉で説明してしまいましたが、ざっくりいうとファイルのバージョン管理を簡単にするツールのことです。

スマートフォンなどでも最新バージョンへアップデートするように通知が来たりしますよね。
ただ、一度アップデートをしてしまうと、基本的には古いバージョンに戻すことはできませんし、するとしても手間がかかってしまいます。

しかし、Gitで管理しているファイルやディレクトリであれば、コンピューター上でファイルの編集履歴を管理することができるので、編集前のファイルを残したまま新しく編集したファイルを保存することができます。
そのため、古いバージョンから新しいバージョンまでの管理を簡単にすることができるということです。

エンジニアは日々多くのコードを編集し、サービスをアップデートしていきます。
しかし、アップデートした後に何か不具合が起こった場合は、アップデート前のバージョンへ戻すことなどがよく行われます。

そのため、Gitを使用せずにバージョンを管理しようとすると、コードを編集する前に日付や時刻をつけて変更するファイルを保存しておき、その上で新しいファイルを作成するというようなことをしなくてはなりません。
そのようなことをしていては時間もかかりますし、ヒューマンエラーが発生してしまう可能性がありますよね。
しかし、Gitを使用すると上記のようなことはせずに、効率的にバージョンを管理することができるようになります。

Gitの特徴

次はGitの特徴について見ていきます。
Gitが分散型バージョン管理システムとよばれるのは、以下のような特徴があるからです。

  • 古いバージョンに簡単に戻せる
  • 新旧のファイルを一元管理できる
  • 編集した履歴を複数人で共有できる
  • 複数人で修正した部分を一つに統合できる

以上の特徴からも、Gitはとても便利ということがお分かりいただけたでしょうか。
つまるところ、Gitはバージョン管理の手間とミスを減らし、効率化できるため多くの開発者から愛用されているということです。

Gitの基本用語

では、Gitを実際に使用していく前に基本的な用語について学んでいきましょう!
もし、Gitの教材を進めている中でわからない言葉が出てきたときは、こちらの基本用語を改めて確認してください。

リポジトリ(repository)

リポジトリとはファイルやディレクトリを保存しておくための貯蔵庫のことです。
Gitにおけるリポジトリは以下の2種類に分かれています。

リポジトリ名 説明
リモートリポジトリ 特定のサーバー上に設置して、複数人で共有するリポジトリ
ローカルリポジトリ ユーザーごとに配置され、手元のPCで編集できるリポジトリ

それぞれのユーザーが手元のPCにあるローカルリポジトリで作業を行い、作業内容を共有するときにリモートリポジトリへ公開するという使い方になります。
リモートリポジトリを介して、作業内容を共有することができるので、他のユーザーの作業内容を把握することも可能になります。

ブランチ(branch)

ブランチとは、ファイルの編集履歴を分岐させて記録していく機能のことです。
英語でブランチはという意味があるので、枝分かれさせるイメージを持っていればOKです。

Webサービスやソフトウェア開発において、バグの修正や機能追加などのファイル編集作業は、複数のユーザーが同時に行うことも少なくありません。
並行して行われる作業を正確に管理するためにGitにブランチという機能が用意されています。
これがGitのバージョン管理を効率的にし、ヒューマンエラーを減らすためにもっとも活かされている機能とも言えます。

コミット(commit)

コミットとは、ファイルやディレクトリの編集作業をローカルリポジトリに記録するために必要な操作のことです。
コミットを実行すると、ファイルを編集した日時を記録したファイルが生成されます。
コミットを実行するごとにファイルが生成され、時系列順に並んで格納されるので、ファイルを編集した履歴やその内容を確認することができます。

ワークツリーとインデックス

ワークツリーとは、ユーザーが編集している作業中のディレクトリのことです。

インデックスとは作業場所であるワークツリーと保存場所であるローカルリポジトリの間にある中間領域のことです。

Gitの仕様上、ワークツリーで編集したファイルをコミットしたい場合は、一度インデックスに登録しなければなりません。
編集したファイルをローカルリポジトリへコミットする前に一度インデックスへ登録して仮置きしておくようなイメージです。

ワークツリーからリポジトリに直接保存するとミスが増えますし、効率が良くありません。
というのも編集作業を行うファイルは、一つだけとは限りませんし、編集した複数のファイルを一つひとつ確認してコミットするのは、作業的にも非効率ですからね。

コミット予定のファイルをインデックスに仮置きしておけば、後からまとめて確認した上でコミットできるので、編集したファイルのコミットし忘れなどを防ぐことができます。

そして、コミットしたくないファイルをインデックスに仮置しなければ、コミットするときにはインデックスされているファイルのみコミットされるので、余分なファイルを含めずにコミットできるというわけです。

プッシュ(push)

プッシュとはローカルリポジトリにあるファイルをリモートリポジトリに送信し、保存する機能のことです。
いわゆるアップロードに近い感覚です。

クローン(clone)

クローンとはダウンロードをイメージしていただければOKです。
複数人で共有しているファイル(リモートリポジトリ)をまるごと自分のローカル環境(ローカルリポジトリ)に保存する機能ですので、ほとんどの場合Gitで最初に行う作業になります。

マージ(merge)

マージとは複数のブランチを一つにまとめて、完成形に近づけることです。
バグの修正や、機能の追加を行ったブランチを統合するイメージできればOKです。

プル(pull)

プルとは共有されているリモートリポジトリに保存されているファイルの内で、ローカルリポジトリ(あなたのローカル環境)に無いファイルや他のユーザーが更新したファイルのみをダウンロードする機能のことです。

リモートリポジトリのファイルをすべて丸ごとダウンロードするクローンに対して、ローカルリポジトリとリモートリポジトリの差分のみをダウンロードし、更新するのがプルになります。

フェッチ(fetch)

フェッチとはリモートリポジトリからファイルの最新情報を取得してくる操作のことです。
共有されているファイル(リモートリポジトリ)の更新を確認したり、複数人の作業の擦り合わせのために使う機能といえます。
プルとは違い、ローカルのファイルを更新することはありません。

リモートリポジトリのファイルをダウンロードしローカルリポジトリを更新(プル)するのか、ファイルの更新があったかどうかを確認するのか(フェッチ)といった違いがあります。
また、プルはフェッチとマージを同時に行う機能といえます。

何も確認せずにプル(フェッチ+マージ)をしてしまうと、あなたがローカルで編集したファイルと同じファイルが更新されていた場合、エラーが出たりします。
フェッチは、それらを未然に防ぎ、複数人で同じファイルを編集しているときでもお互い干渉しないようにするための機能というわけです。

Git操作の流れ

Gitの流れは、誰かが共有しているファイルをクローン(後述)して、ワークツリーで作業したファイルをインデックスに一度仮置きし、まとめてローカルリポジトリに登録(コミット)する。
ローカルリポジトリにコミットしたファイルを全体に共有するために、リモートリポジトリにプッシュするというのが基本的な流れになります。

これでGitの基本用語の説明は以上です。
言葉だけでは分かりづらいところもあるかと思いますが、実際に使用しながら理解を深めていきましょう!

Gitをインストール

※すでにGitをインストールされている方はこちらの手順は不要です。
ターミナルで以下のコマンドを実行し、Gitのバージョンが確認できればインストール完了しています。

ターミナル
$ git --version
git version 2.27.0

まだの方はこちらからGitのインストールを行いましょう!

インストール後にターミナルで以下のコマンドを実行し、Gitのバージョンを確認できればインストールは完了です。

ターミナル
$ git --version
git version 2.27.0

GitHubにファイルをアップロード

今回はGitとGitHubを実際に使用して、Webアプリケーションのバージョン管理を行っていきます!
まずは、Gitをより便利に使用するためにGitHubの登録を行いましょう!

GitHubとは、Gitの仕組みを利用して、世界中の人々が自分の作品(プログラムコードやデザインデータなど)を保存、公開できるようにしたWebサービスの名称のことです。
GitHubはその名の通り、GitのHub(ハブ:拠点・中心・集まり)という意味になります。

GitHubに作成されたリポジトリ(保存庫のようなもの)は、基本的にすべて公開されますが、プライベート設定をすると、指定したユーザーからしかアクセスができないプライベートなリポジトリを作ったりすることもできます。
また、wiki(メモ書き)やタスク管理ツールなど、コラボレーションのための機能も充実しているのが特徴です。

GitHubがどういうものかわかったところで早速アカウントの作成orログインをしていきましょう!

①GitHubアカウントの作成orログイン

下記よりGitHubにアクセスし、アカウントの作成orログインをしましょう!
GitHub公式サイト

また、もしかすると画像の通りの登録画面が出てこない可能性があります。
※Webサービスの見た目はよく変わるため。
その場合は、Githubアカウントの作成と検索してください。
それでもわからない場合は、質問してください!

git_1.png

画面右上のsign upをクリック
※アカウントをお持ちの方はsign inからログインを行ってください。

スクリーンショット 2021-12-15 10.11.58.png

email(メールアドレス)、password(パスワード)、username(ユーザー名)、y(Githubの情報をメールで受け取る設定)を入力し、ロボット認証を行ってからCretate accountをクリック。
Create accountクリック後、登録したメールアドレスへ登録を完了するためのURLが送付されるので、メールボックスを確認しましょう!

git_2.png

ここからはオプション項目なのでみなさんの使用用途に合わせて登録を行ってください。
また、プランの選択時はfreeプラン(無料プラン)を選択してください。

git_3.png

アカウントの作成が完了し上記の画面に遷移すればOKです!

②リポジトリの作成

アカウントの作成が完了したので、早速リポジトリを作成していきましょう!
※GitHubで作成するリポジトリはリモートリポジトリと呼ばれています。

GitHubアカウントにログイン後Create repositoryをクリック。

git_5.png

今回はtestというリモートリポジトリを作成してみましょう!
Repository name(リポジトリ名)にtestを、Description(リポジトリの説明)にGitHub練習用リポジトリ(入力しなくても可)を入力しCreate Repositoryをクリック。

git_6.png

また、Publicにチェックを入れているので、すべてのGitHubユーザーに対してリポジトリを公開する設定になっています。
Privateとすることでリポジトリの作成者が許可したユーザーのみがリポジトリを参照できる設定にすることも可能です。

git_7.png

上記画像のページに遷移すればリモートリポジトリの作成が完了です!

③自分の端末(PC)にローカルリポジトリを作る

GitHubの方でリモートリポジトリの作成が完了したので、ローカルリポジトリの作成をしていきます!

デスクトップにgit_testというディレクトリ(フォルダ)を作成しましょう!

ディレクトリを作成したらVSCodeでgit_testを開き、画面上部にあるターミナルをクリックし、新しいターミナルをクリック
git_8.png

すると画面の下部にターミナルが展開されます。
git_9.png

今回はこちらでgitの操作をしていきましょう!

git initコマンドでローカルリポジトリを作成します。

ターミナル
$ git init

以下のように表示されたら成功です!

ターミナル
Initialized empty Git repository in ~

~の部分はみなさんのgit_testを作成したパスです。

④ファイルをローカルリポジトリに登録

次に、git_testディレクトリにpush_test.txtという名前のテキストファイルを新規に作成してください。
作成のやり方は自由ですが、下記のように、VSCodeから作成していただいても大丈夫です。

git_10.png

VSCodeの画面左上にあるファイルのアイコンをクリックしファイルを新規作成しましょう!

作成したpush_test.txtをVSCodeで以下のように編集します。

push_test.txt
push test!!!

ファイルを編集できたら、編集内容をgit addコマンドにて、インデックスに追加します。
インデックスに追加することでGitで管理する対象のファイルとなります。

ターミナル
$ git add push_test.txt

エラー等何もメッセージが表示されなければOKです!

インデックスの追加を実施したら、ローカルリポジトリに変更内容をコミットします。
コミットにはgit commitコマンドを実行します。

ターミナル
$ git commit -m “pushコマンドの確認”

-mはメッセージオプションのことです。
メッセージオプションを付けることで、どのような編集内容なのかを記録することができます。
-m """"の中に指定することができます。
ちなみに、メッセージ内容は自由ですが、今回はわかりやすいように「pushコマンドの確認」としています。

成功すると以下のように表示されます。

ターミナル
[master (root-commit) 4d21edc] “pushコマンドの確認”
 1 file changed, 1 insertion(+)
 create mode 100644 push_test.text

これでローカルリポジトリへ変更内容のコミットが完了しました。

⑤リモートリポジトリにpushする

今のままでは、皆さんの端末の中でしか変更が反映されていない状態です。
なので、GitHubでバージョンを管理できるようリモートリポジトリに変更内容を反映させましょう!

ローカルリポジトリに作成したファイルをpushコマンドでリモートリポジトリへ送信してみます。
pushコマンドは、ローカルリポジトリで編集したファイルやフォルダをリモートリポジトリへアップロードするためのものです。

pushで送信する前にgit remote addコマンドを使用して、ローカルリポジトリとリモートリポジトリの結びつけを行います。
※こちらはpushするたびに行う必要はなく、結びつけるために1度だけ最初に行います。

リモートリポジトリのURLは先程GitHubで作成したリモートリポジトリのURLを指定します。
GitHubのリポジトリのURLは通常下記のようになっています。
https://github.com/ユーザーID/test.git
ユーザーIDは、皆さんが設定したユーザーIDのことです。

ターミナル
$ git remote add origin https://github.com/ユーザーID/test.git

git remote addをしたことにより、ローカルリポジトリとリモートリポジトリが結びついたので、git pushコマンドでリモートリポジトリにファイルをアップロードしていきます。
以下のコマンドを実行してください。。

ターミナル
$ git push origin master

実行するとGitHubのページに遷移するので、usernameとpasswordを入力し、Authorize githubをクリック
git_11.png

成功すると以下のように表示されます。

ターミナル
Enumerating objects: 3, done.
Counting objects: 100% (3/3), done.
Writing objects: 100% (3/3), 264 bytes | 264.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
To https://github.com/ユーザーID/test.git
 * [new branch]      master -> master

では、push_test.txtの編集内容がGitHub上で登録されていることを確認しましょう!
https://github.com/ユーザーID/testへにアクセスしましょう!
※ユーザーIDの部分は各自書き換えてください。

git_12.png

上記画像のように先程編集した内容が反映されていればOKです!

これでローカルリポジトリからのGitHubへのファイルアップロードの一連の流れが完了しました!

ブランチの操作

続いて、Gitでブランチの操作を行ってみましょう!
前回のレクチャーをもとに、今回のレクチャー用にリモートリポジトリgit_branchをGitHubに作成してみてください。

GitHubにて、リモートブランチgit_branchが作成できたら、デスクトップにgit_branchというディレクトリを作成しましょう。
作成が終わり次第、デスクトップに作成したgit_branchディレクトリをVSCodeで開き、VSCodeでターミナルを開いたら、以下のコマンドを実行してください。

ターミナル
$ echo "# git_branch" >> README.md
// README.mdというファイルをgit_branchディレクトリ下に作成にし、"# test_branch"と書き込むためのコマンド
// このコマンドが実行されると、README.mdファイルがgit_branch下に作成されている。

$ git init
// ローカルリポジトリを新規に作成

$ git add README.md
// README.mdの編集内容をインデックスに追加

$ git commit -m "first commit"
// 追加・変更したファイルをfirst commitというコメントともにGitに登録

$ git remote add origin https://github.com/ユーザーID/git_branch.git
// ローカルリポジトリとリモートリポジトリの接続

$ git push origin master
// ローカルリポジトリの編集内容をリモートリポジトリに送信

これで、Gitのローカルリポジトリの作成からローカルリポジトリの内容をリモートリポジトリに送信する一連の流れが完了しました。
https://github.com/ユーザーID/git_branchへにアクセスして、README.mdファイルが追加されているかを確認しましょう。

確認が終わり次第、実際の開発現場で使用されているようなブランチの操作を学んでいきましょう!

###ブランチの作成準備
ブランチを作成する前に、動作確認用にファイルを作成しましょう。
git_branchディレクトリの配下にsample.txtというファイルを作成しましょう。
作成が完了したらsample.txtを以下のように編集してください。

sample.txt
masterで追加しました。

sample.txtの編集が完了したら、ターミナルで以下のコマンドを実行しましょう!

ターミナル
$ git add .
  // 編集内容をインデックスに追加
  // 今回はファイル名を指定せずに.(ピリオド)を使用しています。
  // .(ピリオド)を使うことで編集されているすべてのファイルをインデックスに追加することができます。

$ git commit -m 'masterブランチでsample.txtを追加'
  // インデックスに登録されているファイルをコミット

$ git push origin master
  // ローカルリポジトリの編集内容をリモートリポジトリに送信

エラーが発生しなければsample.txtの編集が、正常にリモートリポジトリに登録されています!

リモートリポジトリの内容はGitHub上で確認することができます。
まずは、GitHubへアクセスして、Sign inからログインしてください。
※すでにログインしている方はそのままで大丈夫です。

スクリーンショット 2021-12-15 10.11.58.png

ログインが完了した方は、左上のRepositoriesの中から今回使用しているリモートリポジトリのgit_branchをクリックしてください。
※もし、Repositoriesのない画面が表示されている場合は、下画像左上のGitHubアイコンをクリックしてください。

スクリーンショット 2021-12-15 10.13.52.png

すると、下記画像のようなページに遷移します。

スクリーンショット 2021-12-15 10.36.15.png

このページでは、リポジトリの設定や確認をすることができます。
各ファイル名をクリックすると、ファイルの中身を確認することができます。
また、ファイルの右隣りには、原則として該当のファイルの追加や更新を行った最後のコミットメッセージが表示されています。

試しにsample.txtのファイル名をクリックしてみましょう。

スクリーンショット 2021-12-15 10.43.30.png

しっかりと先程追加したmasterで追加しました。という内容が記録されていることがわかります。

###ブランチの作成
sample.txtの編集がリモートリポジトリに記録できたことを確認したら、ローカルリポジトリに新しくブランチを作成してみましょう!

ブランチを作成するにはgit branchコマンドを使用します!
使い方は以下のとおりです!

ターミナル
$ git branch <作成したいブランチ名>

実際に使用してみましょう!
今回はtest1という名前のブランチを作成してみます。
VSCodeでgit_branchディレクトリを開いて、ターミナルを開いてください。

ターミナルで以下のコマンドを実行しましょう!

ターミナル
$ git branch test1
  // test1という名前のブランチをローカルリポジトリに作成

エラー等の表示が何もなければ作成は完了です!

ブランチを作成すると何が起こるのかを解説していきます。
今回はmasterブランチにいる状態でtest1というブランチを作成しました。

そのため、masterブランチの状態をそのままコピーしてtest1という新しいブランチを作っています。
つまり、全く同じ内容のフォルダが2つあるイメージです。

なので、何も編集していない状態の今では、masterブランチとtest1ブランチの内容は変わりません。
masterブランチとtest1ブランチの内容が変わっていないことは、test1ブランチへ移動した後に確認していきます。

では、なぜmasterブランチをコピーするのでしょうか?
ユーザーの使っているアプリケーションのコードは、masterブランチに格納されていることがほとんどです。
そのmasterブランチのコード中にバグなどがあった場合、masterブランチをそのまま変更してしまうと、すぐにユーザーへ変更内容が反映(リリース)されてしまいます。

そうさせないために、一時的にコピーしたブランチを作成して、そちらのブランチを使用してバグの改修などを行います。
そして、実装の確認やテストなどが終わった後に、masterブランチと統合することで、バグ改修のリリースとなります。

また、新機能を追加しようとするときもバグ改修時と同じです。
masterブランチからコピーを作成して、そのブランチで機能追加を実装しながら、確認&テストを行った後にmasterブランチと統合してリリースとなります。

ローカルブランチの内容を確認

では、ローカルリポジトリにtest1という名前のブランチが作成されているかを確認してみましょう!

ブランチの一覧を表示する場合にもgit branchコマンドを使用します!
使い方は以下のとおりです!

ターミナル
$ git branch
  // 対象のリポジトリに存在しているブランチの一覧を確認

実際に使用してみます!
ターミナルで以下のコマンドを実行しましょう!

ターミナル
$ git branch
実行結果
* master
  test1

* mastertest1が表示されましたね。

このmasterとtest1がローカルリポジトリに存在しているブランチの名前です。
実はgit push origin masterというコマンドでリモートリポジトリへの登録を行っていましたが、最後のmasterはmasterブランチのことでした。

つまり、ローカルリポジトリの中のmasterブランチの変更内容を、リモートリポジトリのmasterブランチへ記録していたということです。
なんと、皆さんはすでにブランチという機能を使用していたのです!

ちなみに、masterの前についている*が現在作業を行っているブランチのことになります。
では、実際に動きを確認しながらさらに理解を深めていきましょう!

ブランチの移動

ブランチ名の前についている*について理解を深めていくために、ブランチの移動を学んでいきましょう!

操作するブランチの移動を行うにはgit checkoutコマンドを使用します。
使い方は以下のとおりです!

ターミナル
$ git checkout <移動対象のブランチ名>
  // 移動対象のブランチへ移動

実際に使用してみましょう!
ターミナルを開いていない方は、VSCodeでgit_branchを開いて、ターミナルを開いてください。
まずは、現在のブランチを確認しましょう!
ターミナルで以下のコマンドを実行してください。

ターミナル
$ git branch
実行結果
* master
  test1

masterブランチに*がついていることが確認できます。
確認が終わったので、test1ブランチへ移動します。

ターミナル
$ git checkout test1
  // test1ブランチへ移動

Switched to branch 'test1'という表示がされれば移動が完了しています!

git checkoutコマンドを実行した際に以下のようなメッセージが出た場合は、$ rm .DS_Storeコマンドをターミナルで実行し.DS_Storeを削除してからgit checkoutコマンドを実行しましょう。

ターミナル
git checkout mastererror: The following untracked working tree files would be overwritten by checkout:
        .DS_Store
Please move or remove them before you switch branches.
Aborting

それでは、git branchコマンドを使って、本当にブランチの移動ができているかを確認しましょう!

ターミナル
$ git branch
実行結果
  master
* test1

test1ブランチに*がついていることが確認できますね。
これでブランチの移動が完了しました。

では、本当にmasterブランチの内容がコピーされたtest1ブランチが作成されているのでしょうか?

それを確かめるためにtest1ブランチのsample.txtの内容を確認してみましょう。
このsample.txtというテキストファイルは、masterブランチで作成し、内容をmasterで追加しました。というものにしていました。

VSCodeでsample.txtを開いてください。
どうでしょうか?
内容はmasterで追加しました。になっていますか?
なっていれば、無事にmasterブランチの内容がコピーされたtest1ブランチが作成されています!

sample.txtの内容をtest1ブランチで変更

さて、ブランチの移動方法がわかったところで、作業が行われているブランチ(test1)のファイルに変更を加えて動きを確認してみましょう!

sample.txtを以下のように編集しましょう!

sample.txt
test1ブランチでの変更です。

変更内容をリモートリポジトリへ反映

sample.txtの編集が完了したら、いつも通りターミナルで以下のコマンドを実行しましょう。

$ git add .
  // 編集内容をインデックスに追加

$ git commit -m 'test1ブランチでsample.txtを追加'
  // インデックスに登録されているファイルをコミット

$ git push origin test1
  // ローカルリポジトリのtest1ブランチの編集内容をリモートリポジトリのtest1ブランチに送信
  // このとき、リモートリポジトリにtest1というブランチが自動で作成されます。

これでリモートリポジトリにtest1というブランチが作成され、編集内容がGitHub上で共有されました。

リモートリポジトリの確認

リモートリポジトリにtest1というブランチが作成されているのかを確認していきます。
まずは、ブラウザでGitHubを開きましょう。
そして、前と同じようにgit_branchのリポジトリを開いてください。

開けたら、masterをクリックしてください。
ここでブランチの選択をすることができます。
ちなみにsample.txtのコミットメッセージは「masterブランチでsample.txtを追加」になっていることを確認しておいてください。
スクリーンショット 2021-12-15 12.36.08.png

すると、プルダウンが出てくるので、その中のtest1をクリックしてください。
スクリーンショット 2021-12-15 12.46.34.png

クリックすると、masterだった部分がtest1に変わります。
これでtest1ブランチが選択されていることになります。
スクリーンショット 2021-12-15 12.49.14.png

よく画面を見てみると、sample.txtファイルのコミットメッセージもtest1ブランチでsample.txtを追加と書いてあります。
念の為、sample.txtをクリックして内容を確認しましょう。
スクリーンショット 2021-12-15 12.54.20.png

test1ブランチでの変更です。となっていますね。

これで、リモートリポジトリにもローカルリポジトリと同じtest1ブランチができていることがわかります。

ローカルリポジトリの確認

次は、ローカルリポジトリのmasterブランチとtest1ブランチの差を見ていきます。

まず、下記コマンドを実行して、ローカルリポジトリのmasterへ移動しましょう。

$ git checkout master
  // masterブランチに移動

次に、下記コマンドを実行して、現在のブランチを確認しましょう。

$ git branch
  // ブランチの確認

masterブランチに*がついていればOKです。
では、sample.txtの中身を確認しましょう。

sample.txt
masterで追加しました。

masterブランチのsample.txtの中身は、test1ブランチで編集した内容が反映されておらず、「masterで追加しました。」のままですね。

test1ブランチの内容をmasterブランチへ反映させるためには、リモートリポジトリのtest1ブランチとmasterブランチを統合させ、統合させたあとにリモートリポジトリのmasterブランチからプルしなければなりません。

かなり難しいことをやっていきそうなイメージですが、そこまで複雑ではありません。
順序立ててやっていきましょう。

プルリクエストとは

まず、リモートリポジトリのtest1ブランチの内容をリモートリポジトリのmasterブランチへ反映させるためには、プルリクエストというものをGitHub上で作成します。
簡単に言うと、「test1ブランチの作業内容をmasterブランチへ反映させたいのですがいいですか?」とお願いをすることです。

なぜこのようなことをしているのでしょうか?
わかりやすい例えとして、複数の建築会社が一緒に一つのビルを建設していることを想像してください。
それぞれの会社が設計した部品を誰の指示も無いまま組み立ててしまった場合、収拾がつかなくなってしまいます。
そうなると、たとえ完成したとしても思わぬ欠陥が生まれたり、すぐに倒壊してしまうリスクが高くなります。

そのようなことがWeb開発でも起こりえるのです。
そのため、まずは作業内容をサービスの中に組み込んでいいのかを他の開発者やマネージャーに確認をしてもらうのです。
つまり、masterブランチと統合する前に確認をお願いする機能が「プルリクエスト」です。

プルリクエストを作成

では、プルリクエストを作成してみましょう。
まずは、GitHubでgit_branchのリポジトリを開いてください。

そして、メニューバーのPull requestsをクリックしてください。
スクリーンショット 2021-12-15 13.09.48.png

New pull requestをクリック。
スクリーンショット 2021-12-15 13.12.16.png

下記画像の赤枠内がmasterになっている方はクリックして、test1へ変更してください。
すると、画像のように変更された部分が表示されます。
スクリーンショット 2021-12-15 13.14.19.png

Create pull requestをクリック。
スクリーンショット 2021-12-15 13.18.22.png

タイトルとコメントを入力できる画面に遷移するので、タイトルに「test1ブランチでsample.txtを追加」(原則自動的にコミットメッセージが入ります)と入力し、コメントに「ここに実装内容を詳しく記述できる。」と入力しましょう。
入力ができたら、Create pull requestをクリックしてください。
スクリーンショット 2021-12-15 13.30.31.png

下記のような画面に遷移すれば、プルリクエストの作成は以上となります。
タイトルやコメントはこの画面でも確認できますね!

もちろん、確認してくれる他開発者やマネージャーなどもこのタイトルとコメントを見ることになるので、なるべくわかりやすく書くことが望ましいということも覚えておきましょう!
スクリーンショット 2021-12-15 13.55.19.png

プルリクエストをマージ

通常は、ここまでやった後にマネージャーなどに実装内容を見てもらい、マージ(test1ブランチをmasterブランチへ結合)してもらいます。
しかし、今回は自分でマージしていこうと思います。

まずは、メニューバーのPull requestsをクリックすると、現在のプルリクエストが一覧で確認することができます。
一覧の中から、今回作成した「test1ブランチでsample.txtを追加」という名前をクリックしてください。
スクリーンショット 2021-12-15 14.02.39.png

すると、プルリクエストを作成した直後に遷移した画面と同じ画面に遷移します。

その中のMerge pull requestをクリックすると、Confirm mergeというボタンが新しく出てくるので、そのボタンをクリックするとリモートブランチのtest1ブランチがリモートブランチのmasterブランチにマージ(結合)されます。
スクリーンショット 2021-12-15 14.07.35.png

リモートリポジトリのmasterブランチ確認

無事にtest1ブランチの内容がmasterブランチに反映されているのかを確認してきます。
まず、Codeをクリックして、ブランチがmasterになっているのかを確認してください。

masterブランチになっていることを確認できたら、sample.txtのメッセージを見てみましょう。
test1ブランチをマージする前はmasterブランチでsample.txtを追加となっていたはずです。
しかし、プルリクエストを作成し、test1ブランチの内容をmasterブランチにマージしたため、test1ブランチでsample.txtを追加となっています。

これで無事にリモートリポジトリでは、test1ブランチの内容がmasterブランチの内容に取り込まれました。
スクリーンショット 2021-12-15 14.14.26.png

リモートリポジトリのmasterブランチの内容をローカルリポジトリのmasterブランチに反映

まずは、VSCodeでローカルリポジトリのmasterの内容を確認していきます。

ターミナル
$ git checkout master
  // masterブランチへ移動

$ git branch
  // masterブランチに*が付いていればOK

これでmasterブランチの内容を確認できるので、VSCodeでsample.txtの内容を見てみましょう。
まだmasterで追加しました。となっているはずです。

これを、test1ブランチでの変更です。という変更内容をリモートリポジトリのmasterブランチから反映させます。

やり方は簡単です。
VSCodeのターミナルで、現在のブランチがmasterブランチになっていることを確認して、下記git pullコマンドを実行してみましょう。

$ git pull origin master

これでリモートリポジトリのmasterブランチの内容がローカルリポジトリのmasterブランチへ反映されます。

このようにGitを使用した開発は、masterブランチからブランチを切って(作成して)、切ったブランチの中で変更作業を行い、変更が終わり次第そのブランチをmasterへ結合していき、結合したらまたその内容を自分のローカルリポジトリに反映させ、さらにそこからブランチを切って新たな開発を行っていくという流れになります。

Git開発の流れ

もう一度最後にGitを使った開発の流れをおさらいしましょう。

  1. GitHubにリポジトリを作成する
  2. 自分のパソコンにフォルダを作成する
  3. 作成したフォルダをGit管理し、GitHubにアップロードする
  4. masterブランチからブランチを切る(作成する)
  5. 切ったブランチ内で作業をする
  6. 作業が終わったら作業内容をリモートリポジトリにプッシュする
  7. 切ったブランチの内容をmasterブランチへ結合するプルリクエストを作成する
  8. プルリクエストをmasterブランチへマージ(結合)する
  9. masterブランチの内容をプル(ダウンロード)する
  10. その後は4から9をループ

また、1~3は必須の作業ではありません。
すでにリポジトリを他の人が作成している場合は、そのリポジトリを自分の端末へクローンしてから開発をしていきます。

最初は少し難しいかもしれませんが、たくさん使っていき、徐々に慣れていきましょう!

おめでとうございます!

Gitの教材を最後までお読みいただき、ありがとうございました。
Gitの概要はわかっていただけましたか?
1度読んだだけではすべてを理解することはできません。

Gitをマスターするにはひたすら使うことです。
Gitを使うことを拒まず、今日からでも使ってみましょう!

開発現場でGitを採用していないところはほぼゼロと言っても過言ではないほどに開発作業で必須のツールなので、ぜひマスターしてください!

0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up