【基礎編】SourcetreeとIntelliJ IDEAとVisual Studio CodeでGit操作する

経緯

ペアプロやモブプロをしていると人のGit操作を見ることがあり、人によって使っているGitクライアントって様々だな～と興味がわいたので、
せっかくだから現在のプロジェクトで使用している開発環境でのGit操作を調べてみました。

やること

基本的なGitコマンドを、CLIと各GUIとで比較していきます。
それぞれ使用するツールは下記の通りです。
CLI（GitBash）、GUI（Sourcetree、IntelliJ IDEA、Visual Studio Code）

初心者の方でもわかりやすよう画像を多めに用意しました！ぜひ最後までよろしくお願いします！

なお、各ツールのインストールなどは省いております。ご了承ください。

今回紹介するGit操作

• ローカルリポジトリを作成して、リモートリポジトリにプッシュする
• masterからブランチを作成して、チェックアウトする
• masterへマージする

ローカルリポジトリを作成して、リモートリポジトリにプッシュする

CLI（GitBash）

$ mkdir TECHBLOG_CLI
$ cd TECHBLOG_CLI/
$ git init

自分のGitHubアカウントから空のリポジトリを作成

// 適当にプッシュするファイルを作成
$ vi firstText.txt
// Git操作
$ git add .
$ git commit -m "first commit"
$ git remote add origin https://ユーザーID:アクセストークン@github.com/ユーザーID/TECHBLOG_CLI.git
$ git push origin master
($ git push origin main)

GitHub上に反映されました！

失敗したはなし
最初こういう風に設定していた
$ git remote add origin https://github.com/ユーザーID/TECHBLOG_CLI.git
後々、pushしようとすると

[e-mail]: Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

といったエラーが出て、プッシュできなかった。
以前作ったssh鍵が原因ぽいとこまで、調べて解決策をやってみたがうまくいかなかった・・・。
やっぱり個人アクセストークンよね！って下記を実行してリモートリポジトリを設定しなおしたらpushできるようになった
$ git remote set-url origin https://ユーザーID:アクセストークン@github.com/ユーザーID/TECHBLOG_CLI.git

以下、同じ作業を各GUI上で行います

Sourcetree

保存先のパス：[参照]から保存したいディレクトリを選択

作成場所に気を付けて
C:\hogehoge　の状態で作成すると、hogehogeの直下にローカルリポジトリが作成されます。
[参照]をクリックした際に表示されるエクスプローラ上で、新規ファイルを作成するか、hogehogeの後に¥fugafugaと入力すると、fugafugaフォルダがhogehogeの下に作成されます。
⇒C:\hogehoge\fugafugaがローカルリポジトリとして作成されます。

名前:ローカルリポジトリの名前です。※わかりやすい名前で大丈夫です。たいていはプロジェクト名ですかね

ここまでが

$ mkdir TECHBLOG_CLI
$ cd TECHBLOG_CLI/
$ git init

と同じ作業です。

適当なメモ帳を開き、作成したローカルリポジトリ内に保存します。

保存したテキストファイルが作業ツリー上に表示されています。
[全てインデックスに追加]または、対象を選択[選択をインデックスに追加]をクリックするか、
対象を選択してindexにステージしたファイルのエリアにドラック＆ドロップします。

コメント編集エリアでコメントを入力し、[コミット]をクリック

右上の[リモート]をクリック
設定がまだの場合、エラーメッセージが表示されます

設定⇒リポジトリ設定：[追加]をクリック

リモートの詳細設定に必要な情報を入力します

リモート名：リモートリポジトリの名称
URL/パス：GitHub上でコピーしたURL

リモート名
リモートリポジトリのアクセス先に対してGitがデフォルトでつける名前
[origin]としておけば間違いない
※あとで修正もできます

CLIと同じようにhttps://github.com/ユーザーID/xxx.git
そのまま入力してプッシュしようとするとエラーとなります。

Unable to open connection:
Host does not existfatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

パスワード認証は廃止されたので注意が必要です。
×： https://ユーザーID:パスワード@github.com/ユーザーID/xxx.git

remote: Support for password authentication was removed on August 13, 2021. Please use a personal access token instead.

個人用アクセストークンを利用した認証かSSHでの認証をGitHubは推奨しているとのこと。
今回は比較的簡単な個人用アクセストークンの方法で認証しています。

アクセストークン作成ドキュメント
https://docs.github.com/ja/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token

〇：https://ユーザーID:アクセストークン@github.com/xxx.git

個人用アクセストークンの設定ができたら、sourcetree上から[プッシュ]をクリック

対象にチェックが入っていることと、リモートブランチを確認して、[プッシュ]をクリック

ここまでが

$ git remote add origin https://github.com/ユーザーID/TECHBLOG_CLI.git
$ git push origin master
($ git push origin main)

と同じ作業です。
設定が正しければ、GitHub上に反映されています。

IntelliJ IDEA

IntelliJ IDEA上でprojectを新規に作成します

VCS>Gitリポジトリの作成を選択

VCSだったところがGitに代わり

下にGitのタブができています

ここまでが

$ mkdir TECHBLOG_CLI
$ cd TECHBLOG_CLI/
$ git init

と同じ作業です。

コミット画面へ移動

画面左のコミットを選択	画面右上のチェックマーク（コミット）を選択

どのファイルをコミットするか選択できるようになります

コミットしたいファイルを選択

コミットメッセージを入力し「コミット」をクリック
※「コミットとプッシュ」でもいいです

プッシュマークをクリック

※GitHub連携がまだな場合、なにも表示されません

個人アクセストークン認証で認証します
〇：https://ユーザーID:アクセストークン@github.com/xxx.git

認証が成功するとプッシュが押せるようになります。
GitHub上に反映されているはずです。下のツールウィンドウにもブランチの状態が反映されています。

ここまでが

$ git remote add origin https://github.com/ユーザーID/TECHBLOG_CLI.git
$ git push origin master
($ git push origin main)

と同じ作業です。

Visual Studio Code

左のタブからこのアイコン(ソース管理)を選択

フォルダーを開くを選択して、リポジトリを作りたい場所にフォルダを作成して選択

リポジトリを初期化をクリック

git管理のタブに代わります

ここまでが

$ mkdir TECHBLOG_CLI
$ cd TECHBLOG_CLI/
$ git init

と同じ作業です。
新しいファイルを作成し、適当な文字列を入力して保存します

変更の下に保存したファイルが表示されているので、「+」変更をステージをクリック

クリックしたファイルがステージされている変更に移るかと思います。

コミットメッセージを入力し、チェックマーク（コミット）をクリック

リモートリポジトリと連携させます。
「・・・」その他の操作をクリック＞リモート＞リモートの追加　をクリック

ここのリポジトリを指定するときに

個人アクセストークン認証で認証します
〇：https://ユーザーID:アクセストークン@github.com/xxx.git

プッシュを選択

ここまでが

$ git remote add origin https://github.com/ユーザーID/TECHBLOG_CLI.git
$ git push origin master
($ git push origin main)

と同じ作業です。
設定が正しければ、GitHub上に反映されています。

masterからブランチを作成して、チェックアウトする

CLI（GitBash）

// どちらか
$ git switch -c <ブランチ名>
($ git checkout -b <ブランチ名>)

$ git switchは Git 2.23.0（2019年8月16日リリース）で追加されたコマンド
https://tracpath.com/docs/git-switch/
個人的には checkout より直感的で好き

ブランチが切れました
チェックアウトできたかどうか確認

$ git branch
* 2ndBranch
  master

$ git branch
ブランチの一覧を表示するコマンド
ブランチ名の横に[*]がついているやつがチェックアウト中のブランチ

ちなみに

カレントディレクトリの横に、今いるブランチ名が（）内に表示されているのでわかりやすいですね。

Sourcetree

ブランチをクリック

作成したいブランチ名を入力してブランチを作成をクリック

はい！ブランチ切った
ブランチを切ってチェックアウトされているかは、GUIでは下記で確認できます。

ローカルブランチ一覧のブランチ名の横に〇がつく	git操作履歴にブランチ名が表示される

IntelliJ IDEA

ローカルブランチ一覧から右クリックから	ブランチ一覧横の「+」から	右下のブランチ名をクリックから

作成したいブランチ名を入力して作成をクリック。チェックアウトするにチェックが入っていることを確認

はい！ブランチ切った
ブランチを切ってチェックアウトされているかは、GUIでは下記で確認できます。

ローカルブランチ一覧にしおりみたいなマークがつく	右下のブランチ名

作成した際にメッセージも表示されます

Visual Studio Code

「・・・」その他の操作をクリック＞ブランチ＞分岐の作成　をクリック	左下のmasterと書かれているところをクリックでもできます

作成したいブランチ名を入力してエンター

はい！ブランチ切った
ブランチを切ってチェックアウトされているかは、GUIでは下記で確認できます。

ソース管理リポジトリのところ	左下のところ

masterへマージする

2ndBranchの編集をmasterブランチへ取り込む

CLI（GitBash）

チェックアウトしたブランチ(2ndBranch)でファイルを編集します。
※同じ操作のため割愛します

$ git switch master
$ git merge 2ndBranch

CLIもGUIぽいことできるってはなし
$ git log --graph　をするとコミット履歴の横に樹形図が表示される

Sourcetree

チェックアウトしたブランチ(2ndBranch)でファイルを編集します。
※同じ操作のため割愛します

masterブランチにチェックアウト
※ブランチをダブルクリックでチェックアウトします
右クリック＞現在のブランチにbranchnameをマージ　をクリック

確認メッセージがでますのでOKをクリック
すると2ndBranchで行った編集がmasterブランチに反映されています。

カラフルにしたくなるやつ
チェックアウトと編集（コミット）とマージを行うと樹形図がこのような感じになります。
青色がmasterブランチのコミットを示していて
赤色が2ndBranchのコミットとmasterブランチへのマージされたことを示しています

IntelliJ IDEA

チェックアウトしたブランチ(2ndBranch)でファイルを編集します。
※同じ操作のため割愛します

masterブランチにチェックアウト
※ローカルブランチ一覧からブランチを選択し右クリックまたは右下のブランチ名をクリックからチェックアウトを選択

ローカルブランチ一覧から右クリックから	右下のブランチ名をクリックから

すぐにマージされます
すると2ndBranchで行った編集がmasterブランチに反映されています。

Visual Studio Code

チェックアウトしたブランチ(2ndBranch)でファイルを編集します。
※同じ操作のため割愛します

masterブランチにチェックアウト
※ブランチ名クリックからチェックアウトしたいブランチ名を選択

ソース管理リポジトリのところ	左下のところ

「・・・」その他の操作＞ブランチ＞ブランチをマージを選択

マージ元のブランチを入力または、選択

マージ元/マージ先の理解
マージ元はマージで合流する側　マージ先はマージを受け入れる側　⇒マージ元はマージ先と合流したい
今回は2ndBranchをmasterへマージしたい ⇒マージ元：2ndBranch　マージ先：master　となります。

Visual Studio Codeでの履歴一覧表示
標準機能で表示する方法を見つけきれませんでした・・・
拡張機能の2つを紹介　※追加の仕方は割愛

git history	git graph

赤で囲んだのがgit history、青で囲んだのがgit graphを表示させるボタン

まとめ

自分はもっぱら、Git操作はSourcetreeを使っているのですが、ほかのもいいな～と思いました。

今回はここまでですが、まだまだ紹介したい"各開発環境でできること"があるので次回はそれらを紹介できたらと思います！

• SSH認証でのGit設定（再設定）
• その他のGitコマンド
  などなど・・・（未定）

最後までご覧いただきありがとうございました！