0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Git001:簡単なGitの導入方法 VS code

Last updated at Posted at 2022-10-12

初めまして。

僕は休日に趣味でProgramをやってますが、この度、ステップアップの為にQiitaを始めようと思います。
まずは現在、どのProgramをするにもまずは覚えた方がいいSouce管理SystemのGitについて書きたいと思います。

Gitは便利だけど、けっこう導入でハマります。
手早く開発環境を構築したい人で、GUIでのサポートも受けたい人はVS codeを使う事をお勧めします。

環境としてはWindowsのPortable環境でGit Hubを使用することを想定しています。

VS codeを入手

https://code.visualstudio.com/Download
からWindowsのZIPをDownloadします。

好きな場所にZIPを解凍すれば使用可能になります。

Gitの入手

https://git-scm.com/download/win
からGit for Windows PortableをDownload。

Git Hubのリモートリポジトリを用意する。

Mypage右上のアイコンを押してYour repositoriesを選択。
GitHub0002.png

Newを押してフォルダを新たに作ります。
GitHub0003.png

リポジトリの設定をしてCreate repository。
GitHub0004.png

アドレス「https://github.com/*********/*****.git」をメモしておきます。
GitHub0005.png

VS codeでローカルのGitを関連付ける。

VS codeを開いて左下の歯車で設定を開きます。
GitHub0011.png

設定のGitの項目を地道に探しても良いですが、Git.pathで検索し、settings.jsonで編集します。
GitHub0013.png

バックスラッシュ2個でGitのPathを記述し、保存します。
ついでにターミナルもGit機能を含んだgit-cmd.exeにしましょう。

{
  "git.path": "D:\\ProgramFiles\\Coding\\PortableGit\\cmd\\git.exe",
  "terminal.integrated.profiles.windows": {
        "Git CMD": {
          "path": "D:\\ProgramFiles\\Coding\\PortableGit\\git-cmd.exe",
          "args": []
        },
        "Git Bash": {
            "path": "D:\\ProgramFiles\\Coding\\PortableGit\\git-bash.exe",
            "args": []
          }
    },
    "terminal.integrated.defaultProfile.windows": "Git CMD"
}

※Pathは各自の環境に合わせてください。

設定を反映する為にVS codeを一度再立ち上げします。

VS codeでリモートリポジトリをクローンする。

他のサイトでGitの立ち上げ方の手順を見てると、この辺りでローカルリポジトリ作成とかするのですが・・・・ローカルリポジトリとリモートリポジトリが不一致で何かトラブって関連付けられませんみたいなトラブルが頻発します。
で、トラブル解決するためにローカルリポジトリ全部消してクローンしなさいってのが流れです・・・。

最初からローカルリポジトリとか作らずに、空の状態から始めてリモートリポジトリからクローンでローカルリポジトリ作成で良くね?って話で。

左タブのソース管理を開き、リポジトリのクローンを押します。
リポジトリのURL入力欄が出るので、先ほどメモしたURLを貼り付けます。
GitHub0017.png

※または、VS codeを立ち上げた時の「作業の開始画面」で「Gitリポジトリのクローン」を選択します。
image.png

ポップアップが何個か出てくるので「開く」とか、「はい」を選択。
GitHub0018.png

GitHub0019.png

複製するフォルダを選択します。
image.png

Cloneができない場合(pingしてみよう) まずは基本としてpingが通らないならCloneできません。 pingが通らないならInternet接続やSecurityを疑いましょう。

案外馬鹿にできない方法で、SecurityがServerをはじいてる場合にWebは表示するけどpingは通らない事が有ります。

ping github.com
github.com [20.27.177.113]に ping を送信しています 32 バイトのデータ:
要求がタイムアウトしました。
要求がタイムアウトしました。
要求がタイムアウトしました。
要求がタイムアウトしました。
Cloneができない場合(Safe Directory登録)

https://chigusa-web.com/blog/git-fatal-error/
このページにあるようにgit cloneするFolderによってはgitが動作しないようです。
私の場合はd: driveにCloneすると動作しませんでした。

command promptでpullしてやるとError messageが出ます。
Portableでやってるなら下記のように絶対Passでgit commandを実行します。

Terminal
D:\\ProgramFiles\\Coding\\PortableGit\\cmd\\git.exe pull origin master

fatal: detected dubious ownership in repository at 'D:/NowWorks_Git/study'
'D:/NowWorks_Git/study' is on a file system that doesnot record ownership
To add an exception for this directory, call:

        git config --global --add safe.directory D:/NowWorks_Git/study

Helpの通りsafe directoryに登録してあげると動作するようになりました。

Terminal
D:\\ProgramFiles\\Coding\\PortableGit\\cmd\\git.exe config --global --add safe.directory D:/NowWorks_Git/study
Cloneができない場合(他人のGithub Private Repository) Private Repositoryは一般公開されていないRepositoryです。 それにAccessする為にはCollaboratorsに登録されている必要が有ります。

image.png

RepositoryのSettingから登録してもらう様に連絡しましょう。
登録してもらえないならAccessはできません。

Cloneができない場合(Github Private Repository) Git hubでPrivate RepositoryをCloneへの接続の場合、SSH接続も一度試してみてください。Git hubのセキュリティの変更でHTTPでは接続されないみたいな話もあります。(でも接続できる時もあるような・・・)

SSHでもだめなら、VS codeの設定に関わるものかもしれないですが、変にVS codeにこだわって頑張るより、普通にコマンドでCloneする事をお勧めします。

今後も細かくMerge動作やCommit Resetなどをしたいという時にはVS codeでは対応できません。困ったときはコマンドで解決するのが一番早いです。

①VS codeの上メニューの表示でターミナル表示状態にします。
 ターミナル上にcd ****を入力し、CloneしたいFolderへ移動します。
②下記のCommandでCloneします。
git clone https://(AcesssしたいUserのGithubアカウント)@github.com/(CloneしたいGithubアカウント)/(Repository名).git
③ブラウザが開いてGit hubのログイン画面が出ますのでログインしてください。

SSHで接続する場合

SSH Keyを生成します。

ssh-keygen -t rsa -b 2048 -C "your_email@example.com"

Windowsの場合はssh接続の設定は下記に保存されます。
C:\Users<user name>/.ssh/id_rsa/
このid_rsa.pubの中のテキストをコピーします。
image.png

Git hubの自分のページに行き、自分のアカウントのSSH設定に登録します。右上のアカウントのマークを押します。
image.png
SSH and GPG keys
image.png

image.png
New SSH key
image.png
Titleはなんでもいいので、Keyに先ほどのpubファイルの中身をペーストします。
image.png

gitで使用するsshCommandの設定を確認しましょう。

C:/Users/user name/.gitconfig Windows標準
[core]
	quotepath = false
	sshCommand = C:/Windows/System32/OpenSSH/ssh.exe

Portable gitを使用する場合は下記のような設定が必要です。

*/PortableGit/etc/gitconfig PortableGit
[core]
	quotepath = false
	sshCommand = ****/PortableGit/usr/bin/ssh.exe
\Users****\AppData\Roaming\Code\User\settings.json
    "git.path": "****\\PortableGit\\bin\\git.exe",
    "git.sshCommand": "D:\\ProgramFiles\\Coding\\PortableGit\\usr\\bin\\ssh.exe",
    "python.autoComplete.extraPaths": [],
    "python.defaultInterpreterPath": "****\\WPy64-38100\\python-3.8.10.amd64\\python.exe",

下記のコマンドでGithubにSSH接続ができるか確認します。

ssh -T git@github.com
Hi ****! You've successfully authenticated, but GitHub does not provide shell access.

SSH接続が確立したなら前に戻ってCloneとPull操作をしてみてください。
もしも、CloneはできたがPullできない場合は実はhttpで接続する設定になっているかもしれません。Local Repositoryの./gitのremoteの設定を確認してください。

LocalRepository/.git/config
[remote "origin"]
	url = git@github.com:****/****.git
	fetch = +refs/heads/*:refs/remotes/origin/*

まとめてコミット

ローカルリポジトリに移動すると、下記のように.gitフォルダができています。
登録したいソースファイルをまとめて追加します。(下記画像ではSourcesフォルダを追加しています。)
image.png
VS codeのソース管理を開くと追加したファイルがリストアップされています。
コミットの上に更新内容のメッセージを記述し、コミットボタンを押します。
GitHub0021_2.png

ポップアップが出るのではいを選びます。
GitHub0023.png

ちなみに、レアな状況とは思いますが、Gitを置いているDrive容量が足りなくなると下記のようにErrorが出ます。

Terminal
  fatal: unable to write new_index file

コミットや変更の取り消し、Git操作をするごとにGitへ記録が書かれますので、空き容量0になるとあらゆる状況でこのようなErrorが出るかもしれません。
頭の片隅に覚えておくと良いかもです。

このままプッシュまでやろう

ここでプッシュまでやるのをお勧めします。
ローカルで頑張って更新してもプッシュの時点で不整合が起こる事があるので・・・。😓

ソース管理の右上の・・・のプッシュを押すか、変更の同期ボタンを押します。
GitHub0042.png

CredentialHelperSelectorというポップアップが出ますがmanagerでも選べば良いと思います。no helperを選ぶとパスワード入力になります。
GitHub0032.png

Git hubに行くとこのようにrepositoryが登録されていたら完成です。
git0031.png

あとはSourceを変更するたびにコミットをしたり、戻したりするわけです。ただ、調子に乗って10000件とか更新するとVisualStudioCodeからお𠮟りを受けます。その場合は粛々と.ignore fileを書いてください。

VScode拡張

今後、Gitを使ったSoft変更管理を行うのであれば、変更履歴がビジュアル的に見えるビューワーを使う方が良いです。

VS codeの拡張機能TabでGitで検索すると色々出てきますので好みでInstallします。
個人的にはGit Graphがあれば困らないと思います。

image.png

使い方はソース管理で下記赤枠を押すと、
image.png

こんな感じでBranchを図示してくれます。
image.png

0
1
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
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?