5
Help us understand the problem. What are the problem?

posted at

updated at

Organization

【基礎編】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アカウントから空のリポジトリを作成
image.png

// 適当にプッシュするファイルを作成
$ 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上に反映されました!
image.png

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

git@github.com: 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

image.png

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

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

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

ここまでが

$ mkdir TECHBLOG_CLI
$ cd TECHBLOG_CLI/
$ git init

と同じ作業です。

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

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

image.png

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

image.png

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

設定⇒リポジトリ設定:[追加]をクリック
image.png

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

リモート名:リモートリポジトリの名称
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上から[プッシュ]をクリック
image.png
対象にチェックが入っていることと、リモートブランチを確認して、[プッシュ]をクリック
image.png
ここまでが

$ 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リポジトリの作成を選択
image.png

VCSだったところがGitに代わり
image.png
下にGitのタブができています
image.png
ここまでが

$ mkdir TECHBLOG_CLI
$ cd TECHBLOG_CLI/
$ git init

と同じ作業です。

コミット画面へ移動

画面左のコミットを選択 画面右上のチェックマーク(コミット)を選択
image.png image.png

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

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

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

プッシュマークをクリック
image.png

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

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

image.png

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

ここまでが

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

と同じ作業です。

Visual Studio Code

左のタブからこのアイコン(ソース管理)を選択
image.png
フォルダーを開くを選択して、リポジトリを作りたい場所にフォルダを作成して選択
image.png
リポジトリを初期化をクリック
image.png
git管理のタブに代わります
image.png
ここまでが

$ mkdir TECHBLOG_CLI
$ cd TECHBLOG_CLI/
$ git init

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

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

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

コミットメッセージを入力し、チェックマーク(コミット)をクリック
image.png

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

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

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

プッシュを選択
image.png

ここまでが

$ 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
ブランチの一覧を表示するコマンド
ブランチ名の横に[*]がついているやつがチェックアウト中のブランチ

ちなみに
image.png
カレントディレクトリの横に、今いるブランチ名が()内に表示されているのでわかりやすいですね。

Sourcetree

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

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

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

IntelliJ IDEA

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

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

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

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

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

Visual Studio Code

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

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

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

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

masterへマージする

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

CLI(GitBash)

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

$ git switch master
$ git merge 2ndBranch

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

Sourcetree

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

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

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

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

image.png

IntelliJ IDEA

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

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

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

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

Visual Studio Code

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

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

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

「・・・」その他の操作>ブランチ>ブランチをマージを選択
image.png

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

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

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

git history git graph
image.png image.png

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

まとめ

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

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

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
5
Help us understand the problem. What are the problem?