Zenn
👯

【Git】No Git, No Life!

2021/11/18に公開
Git
GitHub
Sourcetree
tech

No Git, No Life!

ソフトウェアのチーム開発の現場では、必ずと言ってもいいくらいGitを用いたソースコードのバージョン管理を行います。つまりGitをなくして、開発ライフは過ごしていけません。
No Git, No Life!!!
ということで本記事では、現場でやっていけるくらいの最低限のGitの考え方や操作方法を紹介していきます。

本記事では以下を使用します。

  • ソースコード管理サービス：GitHub
  • Git操作ツール：SourceTree
    • 基本的に私はMac環境でのSourceTreeでGitを扱っています

「SourceTree」を使うメリットとしてはGUIでGitを扱うので、直感的に操作でき、コマンドでやるよりもミスがかなり少なくなります。(コマンドでガシガシやりたい気持ちはわかりますが、Gitのミスは致命的なものもあるのでなるべく減らしたいところです)

GitHubの導入

GitHubの導入に関してはここでは割愛します。
以下を参照ください。
https://qiita.com/ayatokura/items/9eabb7ae20752e6dc79d

SourceTreeの導入

SourceTreeの導入に関してはここでは割愛します。
以下を参照ください。

macの方↓
https://qiita.com/suzutatsu/items/817f58cfb6e69f56d134

Windowsの方↓
https://sukkiri.jp/technologies/devtools/git/sourcetree_win.html

リポジトリ(Repository)

リポジトリというのは、ファイルやディレクトリのバージョン管理を保存している場所のことです。
自分がファイルやディレクトリの変更履歴を保存したい場合は、リポジトリにその対象のファイルやディレクトリを指定してGit操作を行う必要があります。

リポジトリのイメージ図は以下となります。

リポジトリは以下の2種類があります。

  • リモートリポジトリ
  • ローカルリポジトリ

リモートリポジトリ(Remote Repository)

リモートリポジトリとは、サーバ上に存在するファイルやディレクトリの変更履歴を保存するリポジトリのことです。その名のとおり、リモートにあるリポジトリのため複数の人が同時に参照することができ、保存されている変更履歴を自分のマシンに落とすことができます。リモートリポジトリのファイルを直接編集することも可能ですが、基本そんなことはしません。

リモートリポジトリの作成方法

  1. GitHubのトップページの「New」ボタンをクリックします。

  1. 「Create a new repository」と表示された画面が出てきてますので、以下の項目を記載します。
  • Repository name
    • リポジトリの名前です。
  • Description
    • リポジトリの説明です。
  • Public or Private
    • 他人にリポジトリを公開するかどうかを選択します。
  • READMEやgitignoreやライセンスを選択する項目がありますが、一旦無視で大丈夫です。
  1. 上記を記載したら「Create Repository」をクリックします。

  1. GitHubの「Repositories」タブをクリックすると、先ほど作成したリポジトリが作成されています。

ローカルリポジトリ(Local Repository)

ローカルリポジトリとは、自分のマシン上にあるファイルやディレクトリの変更履歴を保存するリポジトリのことです。リモートリポジトリで説明した「保存されている変更履歴を自分のマシンに落とす」ことによってできたリポジトリのことでもあります。ユーザはこのローカルリポジトリのファイルを編集し、リモートリポジトリにアップロードして変更履歴を保存していきます。

ローカルリポジトリのイメージ図は以下となります。

リモートリポジトリの作成方法

クローン方法で説明します。

クローン(Clone)

クローンとはリモートリポジトリを自分のローカル環境（自分のPC上）へ複製することです。
リモートリポジトリで説明した「保存されている変更履歴を自分のマシンに落とす」ことをクローンと言います。

クローンの方式には2種類に大別されます。

  • ssh方式
    • 通信が暗号化されており、公開鍵と秘密鍵を使い安全にクローンすることが可能です。
  • https方式
    • 通信速度が早く、ファイアウォールにブロックされないため、GitHubで推奨されています。

個人的にはセキュリティ面を考慮し、ssh方式をオススメします。

クローン方法

  1. GitHubで作成したRepositoryの「Code」からリモートリポジトリのURLをコピーします。

  1. SourceTreeの「新規」ボタンをクリックし、「URLからクローン」をクリックします。

  1. 「リポジトリをクローン」というダイアログが表示されるので、以下のように記載します。

  1. 保存先のパスにクローンした名前のフォルダができていれば成功です。

コミット(Commit)

コミットとは、ローカルリポジトリに対してファイルやディレクトリの変更を保存することです。リポジトリの変更履歴はこのコミット単位で保存さております。コミットだけではリモートリポジトリへは反映されませんので違いを理解するようにしましょう。

コミットのイメージ図は以下となります。

コミット方法

  1. クローンしたフォルダの直下にファイルを作成します。

  1. 作成したファイルを編集します。
index.html
<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <h1>Gitのチュートリアルです。</h1>
    <p>Gitは楽しいです。</p>
</body>
</html>
style.css
h1 {
    color: red;
}

※「No newline at end of file」という警告が出ないように、各ファイルの末尾に空行を入れてください。

  1. SourceTreeの「コミット」アイコンをクリックすると、ファイルの変更差分が表示されます。
    各ファイルのチェックボックスにチェックをし、コミット対象のファイルを選択します。

「ステージング済みのファイル」にあるファイルがコミット対象のファイルとなります。

  1. コミットメッセージを記載し、「コミット」ボタンをクリックします。

  1. ワークスペースの「ファイルステータス」をクリックすると、コミットした内容が表示されます。

この手順によってローカルリポジトリにファイルの差分が保存されます。

プッシュ(Push)

プッシュとは、ローカルリポジトリをリモートリポジトリに反映する(アップロード)することです。クローンの逆をしているという理解で良いでしょう。

プッシュのイメージ図は以下となります。

プッシュ方法

  1. SourceTreeの「プッシュ」アイコンをクリックします。

  1. プッシュ先のリポジトリとブランチを選択します。

プッシュ先のリポジトリはデフォルトの「origin」を指定します。

  1. プッシュ対象のチェックボックスをチェックし、「OK」ボタンをクリックします。

プッシュ対象は一旦「mainブランチ」を指定してください。
※ブランチについてはこちらで説明しています。

  1. プッシュに成功すると、「ファイルステータス」に「main」と「origin/main」が追加されます。

  1. GitHubの「git-tutorial」を開くと、プッシュした内容がリモートリポジトリに反映されています。

ブランチ(Branch)

ブランチとは、同じリポジトリ中で複数の変更を同時に進めるために履歴を分岐させて記録していくものです。ソフトウェア開発では、ベースとなるmaster(main)ブランチやdevelopブランチをベースとし、同時に機能追加やバグの修正を行うことがしばしばあります。このようにブランチは並行作業を支援するための機能となります。

ブランチのイメージ図は以下となります。

mainブランチから「featureブランチ」と「bugfixブランチ」を生やした例となっています。
ブランチ名は慣例として以下のような名前にすることが多いです。（PJの開発ルールに従ってください）

例：画像をアップロードする機能を追加するブランチ名の場合

  • 機能追加のためのブランチ
    • feature/upload-image

例：画像をアップロードする機能のバグを修正するブランチ名の場合

  • バグ修正のためのブランチ
    • bugfix/upload-image
    • fix/upload-image

ブランチの作成方法

  1. SourceTreeの「ブランチ」アイコン、もしくはSourceTreeの画面上で右クリックメニューの「ブランチ」をクリックします。

  1. 「新規ブランチ」のダイアログが表示されるので、新規ブランチ名を入力し、「ブランチを作成」をクリックします。

新規ブランチ名にfeature/add-imageと入力していますが、ブランチ名は任意です。
ただし、そのブランチで何をするのかがわかる名前にすると良いでしょう。

  1. ブランチが作成されると、ファイルステータスに新規ブランチが表示されます。

チェックアウト(Checkout)

チェックアウトとは、ブランチを切り替えることです。現在作業しているブランチから他のブランチで作業したい場合に使用します。

チェックアウト方法

  1. 現在作業しているブランチをSourceTreeで確認します。
    現在作業しているブランチは「ブランチ」メニューのところに「○」マークがついています。

  1. チェックアウトしたいブランチの上で右クリックをし、「〇〇をチェックアウト」をクリックします。

※チェックアウトしたいブランチをダブルクリックでもチェックアウトできます。

  1. 「ブランチ」メニューの「○」マークがチェックアウトしたブランチにつきます。

チェックアウトする際に、移動元のファイルが既に何らかの変更が行われている場合はチェックアウトできません。これを解消するには一旦コミットを行うか、スタッシュを使用し一時的に変更内容を退避させることでチェックアウトを行うことができます。

スタッシュ(Stash)

スタッシュとは、コミットしていない変更を一時的に退避することです。とあるブランチで作業中だけど、いますぐ他のブランチでやりたいことができた。しかし、とあるブランチでの作業がすごく中途半端だからコミットはしたくない時に使用します。

スタッシュの方法

  1. まずチェックアウトできない状況を作ります。(普段はこんなことしません。テスト的に状況を作るだけです)
    mainブランチをチェックアウトして、index.htmlに<p>mainブランチ進みます</p>を追加します。
index.html
<body>
    <h1>Gitのチュートリアルです。</h1>
    <p>Gitは楽しいです。</p>
    <p>mainブランチ進みます</p> // 追加！！
</body>
  1. 変更内容をコミットし、プッシュします。(GitHubでプッシュされたことを確認します)

  1. add-imageブランチをチェックアウトして、index.htmlを更新します。
index.html
<body>
    <h1>Gitのチュートリアルです。</h1>
    <p>Gitは楽しいです。</p>
    <p>画像を追加します</p> // 追加！！
</body>
  1. 変更差分があると、チェックアウトできません。

  1. 変更差分があることを確認し、「スタッシュ」アイコンをクリックします。

  1. 以下のダイアログが表示されるので、スタッシュのメッセージ(名前)を入力し、「スタッシュ」ボタンをクリックします。

  1. SourceTreeのスタッシュメニューに変更内容が退避されます。
    これでスタッシュは完了です。

  1. 退避した変更内容を元に戻すには、スタッシュメニューで右クリックメニューの「退避した変更を適用」ボタンをクリックします。(ダブルクリックでもできます)

  1. スタッシュを適用するかのダイアログが表示されるので、「OK」をクリックします。

  1. 退避する前の変更差分が反映されます。

マージ(Merge)

マージとは、分岐したブランチをとあるブランチに統合することです。基本はベースとなるブランチでは作業をせず、作業ブランチで機能を追加します。その機能を追加したブランチをベースとなるブランチにマージしていく運用が基本となります。

マージのイメージ図は以下となります。

マージの方法

  1. add-articleブランチをmainブランチから新たに生やします。

  1. add-articleブランチでindex.htmlを更新し、コミットとプッシュを行います。
index.html
<body>
    <h1>Gitのチュートリアルです。</h1>
    <p>Gitは楽しいです。</p>
    <p>mainブランチ進みます</p>
    <article>           // 追加！！
        記事を追加します。 // 追加！！
    </article>          // 追加！！
</body>
  1. GitHub上でブランチを切り替えて、プッシュされていることを確認します。

  1. マージ先のブランチ(ベースとなるブランチ)をチェックアウトして、マージ元のブランチの上で右クリックをクリックし、「〇〇をmainにマージ」を選択します。

※マージ先とマージ元を勘違いしないように注意してください。

  1. マージした内容が変更履歴として、ローカルリポジトリのコミットを進ませます。

  1. コミットされているので、「プッシュ」アイコンをクリックしプッシュをします。

  1. GitHubでmainブランチを選択すると、マージした内容が反映されています。

フェッチ(Fetch)

フェッチとは、リモートリポジトリの最新の履歴の取得することができます。フェッチではリモートリポジトリの最新の履歴の取得することができますが、ブランチにはフェッチした内容は反映されません。後述のプルを行う前に、リモートリポジトリの最新を見るために使用することが多いです。

フェッチの方法

手順1~4はフェッチできる状況をあえて作るためのテスト的な操作ですので、普段フェッチする際は特にやらない操作です。

  1. リモートリポジトリを更新するために、GitHub上からREADMEファイルを作成します。

  1. 自動的に文言が入力されると思います。内容はそのままで大丈夫です。

  1. コミットメッセージを入力して、「Commit new file」ボタンをクリックします。

  1. GitHub上でREADMEが作成できました。これでリモートリポジトリが更新されました。

  1. SourceTreeの「フェッチ」アイコンをクリックします。

  1. ダイアログが表示されるので、「OK」をクリックし、フェッチを行います。

  1. リモートリポジトリの最新の履歴がローカルリポジトリに反映されます。
    ただし、フェッチではローカルリポジトリに反映されますが、実際のフォルダには反映されません。

プル(Pull)

プルとは、リモートリポジトリの最新の履歴の取得し、ローカルリポジトリに最新の履歴を反映することです。
プルはフェッチと似ていますが、リモートリポジトリから最新の変更履歴をダウンロードしてきて、自分のローカルリポジトリにその内容を取り込むイメージです。
つまり、プル＝フェッチ＋マージと考えてもらって大丈夫です。

プルの方法

  1. SourceTreeの「プル」アイコンをクリックします。

  1. ダイアログが表示されますので、「OK」ボタンをクリックします。

  1. ローカルリポジトリにプルした最新の履歴がローカルリポジトリに取り込まれます。

  1. ローカルリポジトリに取り込まれたので、READMEファイルが追加されています。

リベース(Rebase)

リベースとは、作業ブランチをベースとなるブランチの最新から再度派生させるようにすることです。あるブランチで作業している間にベースとなるブランチが進むことがあります。そこでは、古いベースブランチのコミットから生えている状態になるので、再度ベースブランチの最新からブランチを生やすようにすることができます。

リベースのイメージ図は以下となります。

リベースの方法

  1. ベースとなるブランチであるmainブランチから生えているadd-imageブランチがmainブランチの最新でないコミットから派生していることを確認します。

  1. ブランチメニューでmainブランチの上で右クリックをし、「現在の変更を'main'にリベース」をクリックします。(add-imageブランチをチェックアウトしておいてください)

  1. 「リベースの確認」ダイアログが表示されるので、「OK」をクリックします。

  1. ファイルにコンフリクトが起これば「マージの競合」のダイアログが表示され流ので、「OK」を押します。

  1. コンフリクトが起これば、ファイルステータスが以下のように表示になります。

  1. コンフリクトが起これば、ソース上では以下のように表示されます。

  1. コンフリクトが起これば、ソース上でコンフリクトを解決します。

  1. コンフリクトを解決したら、「ステージング済みのファイル」に移動させ、「端末」アイコンをクリックします。

  1. git rebase --continueをコマンドで叩きます。(コマンドになります。。。)
$ git rebase --continue
[detached HEAD 3f5f3af] 画像を追加する文言を追加した。
  1. escキーを押して:qを押します。(コマンドになります。。。)
:q
Successfully rebased and updated refs/heads/feature/add-image.

Successfullyと表示されていれば成功です。

  1. 「プッシュ」アイコンをクリックし、プッシュをします。この時強制プッシュにチェックを入れてください。

  1. 「強制プッシュの確認」ダイアログが表示されますので、「OK」をクリックします。

  1. add-imageブランチがベースとなるmainブランチの最新から派生するようになります。

スカッシュ(Squash)

スカッシュとは、複数のコミットを1つのコミットにまとめることです。特によく用いるケースがベースのブランチが進んだことによって、ベースのブランチから派生した作業ブランチでコンフリクトが起こり、そのコンフリクトを解消するためにスカッシュをして一度にコンフリクトの解消をすることができます。

スカッシュのイメージ図は以下となります。

スカッシュの方法

  1. add-imageで適当に複数コミットします。

  1. コミットをまとめたいコミット上で右クリックメニューを開き、「xxxxx子を対話形式でリベース...」をクリックします。

  1. コミットの一覧が表示されるので、一番上のコミットを選択した状態で「過去を含めてsquashする」をクリックします。(バグ？でなぜか画面が黒くて見えなくなってました。。。)

  1. チェンジセットにまとまったコミットの数が表示されるので、まとめ終わったら「メッセージを編集」をクリックしコミットメッセージを入力します。

  1. 入力し終わったら「OK」ボタンをクリックします。

  1. 説明の箇所にコミットメッセージが表示されます。確認後「OK」ボタンをクリックします。

  1. スカッシュでまとめたコミットが追加されます。

  1. 強制プッシュを行い、リモートリポジトリにプッシュします。

チェリーピック(Cherry-pick)

チェリーピックは、任意のコミットを作業中のブランチに取り込むことができます。別ブランチのあるコミットのみを今の作業ブランチで使いたい時などに使用します。

チェリーピックのイメージ図は以下となります。

チェリーピックの方法

  1. 取り込みたいコミット上で右クリックメニューを開き、「チェリーピック」をクリックします。

  1. チェリーピックのダイアログが表示されるので「続行」をクリックします。
    ※取り込んだコミットを作業中のブランチで即座にコミットしたい場合は「mergeが成功した直後にコミットする」にチェックを入れましょう。

  1. 取り込んだブランチにチェリーピックによる変更差分が出てきます。

  1. コミットからプッシュを行うとリモートリポジトリに反映されます。

まとめ

本記事では、現場でやっていけるくらいの最低限のGitの考え方や操作方法を紹介しました。
はっきり言って、Gitは習うより慣れろです。
実際に個人的なプロジェクトもGitを使って練習がてら書く操作をやってみてはいかがですか^^
快適なGitライフを！！！

Discussion