LoginSignup
7
6
ミライトデザインAdvent Calendar 2023Day 18
@__tomotomon(Tomo)in株式会社ミライトデザイン

【Gitクライアント Fork】基本的なコマンドの使い方

Last updated at Posted at 2023-12-18

前日の記事はariakiさんの「古のPHP5.6プロジェクトをdeployerでデプロイする」でした。

はじめに

みなさん「Git」の操作は「CUI」ですか？「GUI」ですか？

私のGitの使い始めは「コマンドの意味を理解する」のが大事と考え、「CUI」操作だったのですが、
ある程度理解してきて最近は「Fork」というGitクライアント（GUI）を併用しています。
「差分、ツリー、ブランチ一覧」などはこっちが見やすいからです。

また、なぜ併用しているかというと「Fork」の使い方を一部しか知らないからです。
そのためこの記事を通して自分自身「Fork」の使い方を知っていきたいと思います。

Forkについて

上記にも記載しましたが、Git クライアントツールです。

インストールについてはこちらから行います。
https://fork.dev/
Mac、Windowsと分かれているためご自身の環境に合わせてダウンロードしてください。

インストールから使用するまでの詳細設定について、
わかりやすい記事がありましたのでこちらを参考していただくといいかなと思います。
https://hugo-de-blog.com/git-fork/

基本操作について

記事の前提

今回は私が普段「CUI で使用しているコマンドを Fork で使えるようにする」のが目的ため、
Gitコマンドの詳細については基本的には触れないためご承知おきください。

また各操作にはキーボードでのショートカット操作もあったりするので、
興味があれば実際に使って探してみてください。

Gitコマンドの詳細が知りたい方は以下の動画がおすすめです！
https://www.youtube.com/watch?v=7_JtLzI9iqE&t=605s

弊社メンバーが実務でよく使うコマンドからたまに使うコマンドまで丁寧に説明しています。

ブランチ作成

※masterやmainブランチがある前提です。

  1. 派生元となるブランチへ移動します
    a. 移動したいブランチをダブルクリック or 右クリック→「Checkout 'ブランチ名'」で移動できます。
    b. 今回はdevelopブランチを派生元とします。
  2. 右クリック→「New Branch」をクリックします。
    image.png
  3. 作成したいブランチ名を入力し「Create and Checkout」をクリックで新しいブランチが作成されます。
    「Check out after create」にチェックを入れておくことで、作成したブランチへ移動してくれます。
    image.png

add

Fork ではaddする前は「Unstaged」した後は「Staged」へファイルが移動します。

  1. addしたいファイルを選択し「Stage」をクリックします。
    image.png

  2. ファイルが「Unstaged → Staged」へ移動し、コミットできる状態となります。
    image.png

commit

コミットするファイルを「Stage（add）」したら画面右下にコミットメッセージ、説明文（必要に応じて）を入力したら青い「Commit 2 Files」ボタンを押下でコミット完了です。
image.png

push

  1. pushしたいブランチに移動します。
  2. 画面中央上部に「Push」があるのでそれをクリックするとpushに関する情報を選択できます。
    通常はそのままでOKです。
    push先のリモートブランチも自動で選択先としてくれています。

※例えばrebase行ってコミットIDが変わっていたりする場合は「Force push」にチェックをする必要があります。
image.png

fetch

画面中央上部にある「Fetch」ボタンを押下
自動で「Fetch」してくれる設定もありますのでしておくと楽です。
image.png

pull

例：リモートのdevelopブランチの内容をローカルのdevelopブランチにpullする

  1. developブランチに移動します。

  2. 「2↓」と表示されていて、差分が出ていることがわかります。
    （リモートブランチよりも遅れている状態です）
    image.png

  3. 画面中央上部の「Pull」を押下するとモーダル画面が出るので右下の青い「Pull」ボタンを押下することでpullは完了です。
    image.png

stash

1.stash したいファイルを選択して画面中央上部の「Stash」をクリックします。
image.png
2. 必要であればメッセージを入力し「Save Stash」をクリックします。
image.png

3.「stash」した内容は左側の「Stashes」で確認でき、目的の箇所をクリックすると編集していたファイルや内容を確認できます。右クリックから削除することもできます。
image.png

4.stash した内容を戻したい場合は対象の箇所を右クリック→「Apply メッセージ名」 をクリックします。
image.png
5.「Apply」押下で「stash」していた内容を戻すことができます。
（stashしていた内容は削除されます、残すこともできます）
image.png

差分の確認方法

画面左上の「Local Changes」をクリックすると画面中央に修正・新規作成したファイル、右側には修正差分が表示されます。
image.png

merge

例：bブランチをaブランチにマージしたい場合
image.png

  1. bブランチに移動します。

  2. 画面左側のbブランチをaブランチへ「ドラッグ & ドロップ」し「Merge 'b' into 'a'...」をクリックします。
    image.png

  3. 内容を確認して「Merge」をクリックします
    image.png

  4. bブランチにaブランチがマージされました
    image.png

rebase

rebase でできることは多くありますが、
ここでは私がよく使う以下２つについて紹介します
（他気になる方は調べてみてください）

複数コミットをまとめる

  1. まとめたいコミットの一つ前の行を選択して「Interactively Rebase '対象ブランチ名' to Here...」をクリックします。
    今回はaブランチの赤枠のコミット１、２、３を一つにまとめます
    image.png

  2. 以下のような画面が表示されます
    image.png

  3. コミット１に対して２、３をまとめたいので２、３の行を「Pick→Squash」のように変更し、右下の「Rebase」をクリックします。
    ※コミットメッセージを変更したい場合は「Rebase」をクリックする前に「Reword」をクリックして変更することができます。
    image.png

  4. aブランチの3つあったコミットを一つにまとめることができました。
    image.png

ブランチの派生元を変更し上流の更新を取り込む（派生元を変更する）

ここでは開発中のyブランチの派生元をdevelopブランチに変更し、developブランチにコミットされている変更分を yブランチにも取り込みたいとします
（ｘブランチでコミットされた「hoge関数作成」）
image.png

操作としてはmergeと同じです。

yブランチをdevelopブランチでrebaseしたいので、

  1. 画面左のブランチ一覧のyブランチに移動します

  2. yブランチをdevelopブランチへ「ドラッグ & ドロップ」し、
    「Rebase 'y' on 'develop'」をクリックします。
    image.png

  3. 内容を確認して「submit」をクリックします。
    image.png

  4. yブランチがdevelopブランチから派生され、「hoge関数作成」のコミットの内容も取り込まれました
    image.png

revert

ここでは「hoge関数の文言修正」のコミットに対して行います。
image.png

  1. 対象のコミットを右クリック → 「Revert Commit...」をクリックします。
    image.png

  2. 「Revert」をクリックします。
    image.png

  3. 対象のコミットを打ち消すコミットが作成されました
    image.png

reset（--soft, --mixed, hard）

  1. resetしたいブランチへ移動します。
    ここではzブランチとし「挨拶をする関数作成」のコミットまで戻りたいとします。
    image.png

  2. 画面中央の戻りたいコミットを右クリック → 「Reset 'y' to Here...」をクリックします
    image.png

  3. クリックするとResetの詳細が表示されるので「Reset Type」を選択します。
    image.png

  4. ここでは　Mixed（デフォルト） を選択し右下の「Reset」をクリックします
    image.png

  5. コミット履歴を確認すると「挨拶をする関数作成」の状態までHEADが戻り、「hogehoge関数を作成」のコミットをする前（addする前まで）の状態に戻っています
    image.png
    image.png

コンフリクトの解消方法

mergeやrebaseではコンフリクトが発生することがあります。

今回は例としてｚブランチをdevelopブランチにマージ、
コンフリクトを発生させそれを解消してみます。
developブランチとzブランチがコンフリクトする状態を作っています。
（ソースコードは割愛します）

  1. ｚブランチをdevelopブランチにマージします。
    image.png

  2. 「The merge will require manual resolution」とありますが、そのまま進めて右下の「Merge」をクリックします。
    （直訳するとマージは手動で解決する必要がある）
    image.png

  3. コンフリクトしているので、コンフリクトを解消してからコミットしてください、といった内容が表示されます。
    コンフリクトをなかったことにしたい場合は画面右上の「Abort」をクリックし、コンフリクト前の状態に戻します。
    image.png

  4. コンフリクトしているファイルを確認します。
    image.png

  5. 「Merge in Fork」をクリックで内容が確認できます。
    image.png

  6. どちらか片方の取り込みで問題なければチェックボックスのチェックを外すことで、
    チェックがついている方の状態を反映することになります。
    以下はzブランチのチェックを外して見た状態で、developブランチの状態を反映する状態です。
    image.png

  7. 今回はどちらの状態も取り込みたいので、「Merge in Fork」をクリックし修正を行います。
    修正が完了したら、画面右下の「Resolve」をクリックして決定します。
    image.png

  8. addされた状態になるので適宜メッセージを変更してコミットボタンを押せば完了です。
    developブランチにzブランチがマージされました。
    。ｔｗimage.png

cherry-pick

cブランチに対してbブランチの「phpでhoge」というコミットを取り込むとします。
image.png

  1. cブランチに移動し、「phpでhoge」の箇所で右クリックし「Cherry-pick Commit...」をクリックします
    image.png

  2. 画面右下の「Cherry Pick」をクリックします。
    image.png

cブランチに「phpでhoge」のコミットを取り込むことができました。
（コンフリクトした場合は解消することが必要です）
image.png

まとめ

今回の普段使っているコマンドを「Fork」で行う方法を紹介しましたが、
「Fork」の機能としてはほんの一部にしかすぎないと思うので便利な操作を見つけたらまた紹介できればと思います。

また機能を紹介するにあたり、
当然Gitの理解が必要になるため改めて勉強できて良い機会となりました。

明日は @tkek321 さんの最低限これだけおさえる DB インデックスです。

参考サイト・本

7
6
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
Sign upLogin
7
6