PrAhaPublicationへの投稿
🥦

VScodeだけでGit操作を完結させるのだ～～ッ!!

penpen
に公開
7件
Git
VS Code
tech

VScodeだけでGit操作を完結させる方法について書くのだ。

👀その前に！

この記事は、以下の2つの拡張機能がインストールされている前提で進めるのだ。

インストールしておいてほしいのだ。

✅ステージング(git add ◯）

以下のようにするのだ。

  • ＋ボタンをクリック：ステージングする
  • ーボタンをクリック：ステージングを解除する

▲ステージング→解除

✅コミット名を自動でつける

右にある✨ボタンを押すと、コミット名を自動で決めてくれるのだ👇

▲この例だと、変更内容が意味不明すぎて変なコミット名になってるし、現状英語だけみたい？

これは、GitHub Copilotの機能なのだ。

✅コミット(git commit）

コメントを書いてコミットボタンを押すと、コミットできるのだ👇
▲コミットッ!!

ちなみに、ファイルを1つもステージングしていない状況でコミットボタンを押すと「全部ステージングしてコミットしちゃう？」と訊いてくれるのだ👇
▲常時を押すと、このダイアログすら出なくなる

✅行単位のステージング

以下のようにするとできるのだ👇
▲行番号の右の色付き縦棒をクリック → ＋ボタンをクリック

✅行単位で前コミットの状態に戻す

以下のようにするとできるのだ👇
▲行番号の右の色付き縦棒をクリック → ーボタンをクリック

✅ブランチの作成（git branch）

以下の手順でブランチを作成できるのだ👇
▲ブランチの作成

  1. 任意のコミットを右クリック→Create Branch...を押す
  2. ダイアログでブランチ名を入力してCreate Branchを押す

Check outにチェックをつけると、「ブランチを作った上で移動する」という意味になるのだ。

✅チェックアウト（git checkout）

チェックアウトしたいコミットを右クリック→Checkout Branchを押すと、チェックアウトできるのだ👇
▲main→devブランチにチェックアウト

✅プッシュ（git push）

リモートブランチにpush

変更の同期を押すと、リモートリポジトリにpushできるのだ。

たとえば、以下👇のような状況で変更の同期を押すとするのだ。

💻local
  ├ main
  └ dev 👈HEAD（いまここ）
  
🌏remote
 ├ main
 └ dev

すると「localのdevをリモートのdevにpushする」ができるのだ👇
▲origin/devが移動しているのが分かる

リモートブランチを作成→push

次に以下👇のような「リモートリポジトリにローカルのブランチが存在しない」な状況の場合を考えるのだ。

💻local
  ├ main
  └ dev 👈HEAD（いまここ）
  
🌏remote
 └ main
 　　　　 👈ない

この場合、変更の同期の代わりにBranchの発行と表示されるのだ。
同期するものがないので「そりゃそうだよね」なのだ。

この状況でBranchの発行を押すと、「リモートリポジトリにdevブランチを作成してさらにpushする」ができるのだ👇
▲origin/devが作成されているのが分かる

リモートリポジトリ＆ブランチを作成→push

そして最後に「そもそもリモートリポジトリが存在しない」なパターンなのだ👇

💻local
  └ main
  └ dev 👈HEAD（いまここ）
 
 （リモートリポジトリがない）

この場合も、変更の同期の代わりにBranchの発行と表示されるのだ。

この状況でBranchの発行を押すと、「GitHub上に自動的にリポジトリの作成を行い、さらにそのリポジトリに全ブランチを作成してpushする」ができるのだ👇

GitHub上でリポジトリを作る作業は地味に面倒なのだ。
でもこの方法だと1発でリポジトリまで作れちゃうのだ。すごいのだ。

✅フェッチ(git fetch)

Git Graph画面の右上にある⛅ボタンを押すと、リモートリポジトリをfetchできるのだ👇

▲fetch!!

✅マージ(git merge)

マージしたいブランチ名を右クリック→ merge into current branch...でマージできるのだ👇

▲devをmainにマージ!!

  • Create a new commit evenf if fast-forward is possible
    →「fast-forwardが可能であっても新しいコミットを作成する」な設定
  • Squash Commits：
    →「マージするブランチのコミットを1つにまとめる」な設定
  • No commmit
    →「コミットの手前（ステージングの状態）で止めて」な設定

fast-forwardって何？と思う人もいるかもなので一応説明するのだ。
fast-forwardをONにしてマージすると以下のように新しいコミットが作られないのだ👇

✅直前のコミットの修正(git commit --amend）

コミット（修正）をクリックすると、直前のコミットを修正できるのだ👇

▲直前の3.mdを追加というコミットを上書きコミット

✅2個以上前のコミットの修正(git rebase)

「どのような修正をしたいか」によって微妙に操作が違うのだ。

順に説明するのだ。

コミット名の変更

たとえば現在、以下のような状態だとするのだ👇

この状態で2.mdを追加というコミット名を大日本帝国に変更したいとするのだ。

これは以下のような手順で変更できるのだ👇

  1. 変更したいコミットである2.mdを追加の1つ下にある1.mdを追加というコミットを右クリックして Rebase current branch on this commit...をクリックする

  2. Launch Interactive Rebase in new Terminalにチェックを付けてYes, rebaseをクリックする

  3. 2.mdを追加のメニューからrewordを選択してSTART REBASEをクリック

  4. 新しく開いたエディタで「大日本帝国」と入力して、エディタのタブを閉じてからエディタを閉じる

これで変更できたのだ👇

コミットを削除

これも「コミット名の変更」と同じような操作をするだけなのだ。

まず、現在以下のような状態だとするのだ。

この状態で2.mdを追加というコミットを削除したいとするのだ。

これは以下のような手順で変更できるのだ👇

  1. 変更したいコミットである2.mdを追加の1つ下にある1.mdを追加というコミットを右クリックして Rebase current branch on this commit...をクリックする

  2. Launch Interactive Rebase in new Terminalにチェックを付けてYes, rebaseをクリックする

  3. 2.mdを追加のメニューからdropを選択してSTART REBASEをクリック

これで削除できたのだ👇

コミットの順番入れ替え

これも「コミット名の変更」と同じような操作をするだけなのだ。
なので詳細は割愛するのだが、以下のように操作するだけなのだ👇
▲ドラッグ＆ドロップで位置を入れ替えてSTART REBASEを押すだけ

コミットを1つにまとめる

これには以下の2つの方法があるのだ。

  • fixup
  • squash

どちらも「コミット名の変更」と同じような操作をするだけなのだ。
なので詳細は割愛するのだが、以下のように操作するだけなのだ👇
▲fixup / squashのどちらも2.mdを追加に3.mdを追加をまとめられる
まとめる際、それぞれ以下のような違いがあるのだ。

  • squash：
    →新しいコミットメッセージを作り、3.mdを追加と2.mdを追加のコミットメッセージは新しいコミットメッセージの本文に入れられる
    ▲2.mdと3.mdを追加のように新しいコミットメッセージをつけれる。さらに本文には3.mdを追加と2.mdを追加というメッセージが残っている
  • fixup：
    3.mdを追加のコミットメッセージは削除される
    ▲2.mdを追加のコミットはそのままで、3.mdを追加のコミットがまとめられる

つまりfixupだと3.mdを追加のコミットメッセージは闇に消えるのだ。
なので、たとえばtypeを修正のような無意味なコミットをまとめたい場合は、fixupのほうが良いのだ。

コミットの修正

最後はコミットの修正なのだ。

たとえば「この修正はあのコミットに含めたかったのにぃぃ!!」な時に使えるのだ。

まず、現在以下のような状態だとするのだ👇

この状態で2.mdを追加というコミットを編集して、2.mdに「大日本帝国」を追記したいとするのだ。
2.mdには、何も書き込まれていないという想定なのだ。

これは以下のような手順で実現できるのだ👇

  1. 変更したいコミットである2.mdを追加の1つ下にある1.mdを追加というコミットを右クリックして Rebase current branch on this commit...をクリックする

  2. Launch Interactive Rebase in new Terminalにチェックを付けてYes, rebaseをクリックする

  3. 2.mdを追加のメニューからeditを選択してSTART REBASEをクリック

  4. 2.mdを開いて「大日本帝国」と追記

  5. VScodeのメニューのコミットをクリック
    （ここで「2.mdを追加」という元のコミット名が入力されているが、変更することもできる）

これで、2.mdを追加というコミットを編集できたのだ。

さて、ここで以下のようなケースが存在するかもしれないのだ。

「2.mdを追加」というコミットに大日本帝国を追記したという事実を含めるんじゃなくて、「大日本帝国を追記」という新規コミットをしたい！

これがしたい場合、4.が終わった後にコマンドラインで以下を打つ必要があるのだ（要確認だがおそらくVScode内で）。

git add .
git commit -m "大日本帝国を追記"

なぜならVScodeのほうで「コミット」を押すと、「これで編集は終わり！」な感じになって編集がおわってしまうのだ。なのでコマンドで操作する必要があるのだ。

このようにした後で、最後にVScodeのほうで「2.mdを追加」というメッセージが入力された状態で「コミット」を押すのだ。

これで「編集は終わり！」な感じになるのだ。

結果、以下のように「過去に差し込むッ!!」なコミットを作れるのだ👇

✅リセット（git reset）

リセットは「このコミット地点まで戻りたい！」なときに使うコマンドなのだ。

以下の手順で行えるのだ👇

▲この場合、3.mdを追加と4.mdを追加のコミットが消えてワークツリーに戻る

  1. 「このコミット地点まで戻りたい！」というコミットを右クリック→Reset current branch to this Commit...をクリック
  2. モーダルが開くので「Mixed～」を選んでOKを押す

Mixed か Softを選べば、大体幸せになれるのだ。

Hardは「すべてを無かったことにするッ!!」になるのだ。
つまり、👆のGif動画でいうと「ワークツリーからも消える」挙動になるのだ。
あんまり使わない気がするのだ。

✅リバート（git revert）

リバートは「このコミットを取り消すコミットがしたい！」なときに使うコマンドなのだ。

リバートをするには、リバートしたいコミットを右クリック→Revert...するだけなのだ👇
▲この場合、3.mdが追加されなかったことになる

✅タグ（git tag）

タグは「このコミットはバージョン1.0なのだ！」をしたいときに使えるコマンドなのだ。

タグを付けたいコミットを右クリック→Add Tag...でタグを追加できるのだ👇

▲タグがついたまま、pushするとGitHub上にも反映される

✅スタッシュ（git stash）

スタッシュは「別の作業をやらないといけなくなったから、今の作業内容を一時退避したい！」なときに使えるコマンドなのだ。

スタッシュするには、スタッシュしたいコミットを右クリック→Stash changeを押すのだ👇

また、取り出したいstashを右クリック→Pop Stash...とするだけで取り出せるのだ。

✅チェリーピック（git cherry-pick）

チェリーピックは「このコミットだけを取り込みたい！」なときに使うコマンドなのだ。

たとえば「今週のリリースは厳しいけどこのコミットだけは取り込みたい！」なときに使うのだ。

▲この場合、6.mdを追加だけmainブランチに取り込んでいる

オプションは以下なのだ。

  • Record origin：
    →「このコミットはコミットAをチェリーピックしたよ」なメッセージが追加される
  • No commmit
    →コミットされずにワークツリーに追加だけされる。
    なのでたとえば「コミットAとコミットBをチェリーピックしてまとめてコミットしたい！」な時に使う

✅コマンドで操作してるやつ

僕がコマンドで操作してるのが👇なのだ。

git push -f origin HEAD

以下のようなときに使うのだ。

  • pushしちゃった後に間違いに気づいたとき
    • 「今ならまだ誰にもバレないはず!!オラァッ!!」な感情で使うのだ。
  • プルリクのコミット履歴を汚さずにrebaseしたいとき
    • （ちょっとややこしい話だが）たとえばdevブランチに対するプルリクAを出していたけど、別のプルリクBがマージされちゃったせいで、プルリクAが古くなった。なので「rebaseしてdevブランチを取り込んだコミットを強制pushしてプルリクAを最新にしたい！」みたいな時に使うのだ。

git pull --prune

「ローカルに存在するけどリモートには存在しない」なブランチを削除したいときに使うのだ。
あんまり使わないが、Git Graphがごちゃごちゃして見づらいときに使うのだ。

ちなみにこれもVScodeのメニューから操作できるのだが、奥深くにあって探すのが面倒くさいのだ。だから僕はコマンドで操作してるのだ。

ほかにも基本「これ実行したらヤバい」系のコマンドはGUIで用意されていないのだ。
だからコマンドをたたくのだ。

✅おわりに

エンジニアは覚えることが大量にあるのだ。
だから、どんどん便利ソフトに頼ればいいのだ！

さらばなのだ。

＼ PR ／

PrAhaでは、WEBエンジニアを大募集しているのだ。
つよいエンジニアや、つよくなりたいエンジニアは応募するのだ。

以下ページに募集要項などを書いてるのだ。こぞって応募するのだ。

recruit | PrAha Inc.

PrAha
PrAhaPublication

株式会社PrAhaでは、株式会社アガルートのサービス「アガルートアカデミー」の開発、自社サービス「PrAha Challenge」の運営、スタートアップに特化したデザインと受託開発を行なっています。一緒に働いてくれる方を血眼になって探しています。

Discussion

tkssttksst

プル(git pull)
Git Graph画面の右上にある同期ボタンを押すと、リモートリポジトリをpullできるのだ👇

これはリモートブランチを取り込むだけで、ローカルブランチに影響を与えないので、pullではなくfetchです。

penpenpenpen

ご指摘ありがとうございます！間違っておりました！
修正させていただきました！🙏

TSUBOI ShotaroTSUBOI Shotaro

コミット同士の関係を見るrebaseとかは、git graphのサポートがあると操作しやすいですね！

一点だけ、「コミットの修正」の説明動画がdropの説明動画になっちゃってます。

penpenpenpen

ご指摘ありがとうございます！GIF多すぎて気づいてませんでした！！
修正させていただきました！🙏

VegaVega

Branchのcheckout (switch)は右クリック->メニュー選択だけでなくダブルクリックでもできますよ。
とても便利で実用的なのでやってみて下さい。