このブログはプログラム開発や学習などの際に役立つ知識や情報を発信するエンジニアのためのトータル技術ブログです。
ご意見やご要望にも積極的に答えていきますので、お気軽にお問い合わせください。

記事へのリクエストはこちら

【Git】Visual Studio Code × GitHub の連携

Git
スポンサーリンク

こんにちは!あっきー (IwswAkht) です!

IT業界に転職して1年ほど、SES として分野は定まらずセキュリティや RPA などやってきましたが、ついに希望の Web自社開発へのジョブチェンジを果たしました。

プログラミングのスキルを磨いていくのは大前提ですが、まだまだ必要な知識はあると感じています。

その1つが Git です。

僕の Git のレベルは業務では SVN を使っていたため未使用、えるますさんに初歩的なことを教えていただいたレベルです。

 

 

いざ現場に入っていきなりは出来ないかもしれません。

でも、未経験を言い訳に何も知らないというのは採用していただいた方に申し訳が立たないので、自分でできる範囲で勉強しておくことが筋だろうと考えています。

というわけで Visual Studio Code と GitHub を連携して基本的な Gitコマンドを使う方法をまとめましたのでご参考にしていただけたら幸いです。

 

スポンサーリンク

さいしょに

 

まずは大前提として Git のインストールをしましょう。
Git のインストール方法はこちらの記事で取り上げていますのでご参考にしてください。

 

【Laravel】Homestead+Vagrant+VirtualBoxで開発環境を構築する方法
HomesteadをVagrant+VirtualBoxで環境構築してLaravelを使用する方法を解説。画像付きでなるべくわかりやすく解説しました。エラー対応も書いていますので参考にしてください。

 

あらかじめ Visual Studio Code がインストール済、GitHub のアカウントが作成済であることを前提でいきます。

また、VSCode から Git History という拡張機能をインストールしておいてください。Gitのコミット履歴を直感的にみれるようになります。便利です。

 

Git の初期設定

 

Git をインストールしましたら初期設定を行っていきましょう。

Windowsの方は Git for Windows、Mac の方はターミナルより以下のコマンドを入力していきます。

 

1.ユーザー名の登録(GitHubアカウント作成時に登録したユーザー名)

$ git config --global user.name 'username'

 

2.アドレスの登録(GitHubアカウント作成時に使用したアドレス)

$ git config --global user.email 'username@example.com'

 

3.エディタ、マージツールの設定をVSCodeに指定

$ git config --global core.editor 'code --wait'
$ git config --global merge.tool 'code --wait "$MERGED"'

 

4.pushの方式を指定(追跡ブランチに対してpush)

$ git config --global push.default simple

 

新規コードを GitHub に公開

 

とりあえず適当なフォルダを作成してなかにテキストデータを作成しておいてください。

↓フォルダ構成の例↓

[GitGUI]

|_GitGUI.txt

[GitCLI]

|_GitCLI.txt

GUI と CLI 両方の方法を説明しますので、分けてGitHubに公開しますので2つ作りました。1つでも構いません。

フォルダとファイルを作成しましたら VSCode を起動して対象のフォルダを開きましょう。

 

リポジトリの作成

 

新規でリポジトリを作成(初期化)していきます。

 

・GUI の場合

サイドバーのソース管理を表示して、リポジトリの初期化アイコンの順にクリックします。

 

 

初期化するディレクトリを聞かれますが、VSCode で対象のディレクトリを開いているのでデフォルトで候補が表示されていますのでそちらを選択します。

 

 

以下の画像のような表示がされましたら無事ローカルリポジトリの作成完了です。

 

 

・CLI の場合

VSCode のターミナルから以下のコマンドを実行してください。

 

・リポジトリの作成(初期化)

$ git init

 

編集してコミットしてみる

 

最初に作成したテキストファイルに適当な編集を加えて保存しておいてください。

 

・GUI の場合

ファイル編集を行うと Git のアイコンに「1」と表示され、サイドバーのソース管理に更新ファイルの一覧が表示されます。+アイコンでステージングされます。取り消す場合はアイコンです。

 

 

ステージングした状態からコミットメッセージを入力して、チェックアイコンでコミットが完了します。

 

 

・CLI の場合

VSCode のターミナルから以下のコマンドを実行してください。

 

・変更内容をステージング

$ git add .

 

・変更内容をステージング

$ git commit -m “gitCLI初回のコミット”

 

きつね先生
きつね先生

ステージングの状況を「git status」コマンドで確認、コミットに[-m]オプションをつけるとコメントが追加できます!

 

 

 

コミットをログで確認する

 

・GUI の場合

はじめにインストールしておいた Git History でコミットログを確認することができます。
Ctrl + Shift + Pでコマンドパレットを表示して、検索窓に「git」と入力しますと候補がたくさんでてきますので、その中から「Git: View History (git log)」を選択します。

 

 

・CLI の場合

ログは圧倒的に GUI の方が見やすいですが、CLI でよく使いそうなコマンドを載せておきます。

ターミナルより以下のコマンドを実行してください。

 

・頻出のログ表示コマンド

#コミット履歴の表示
$ git log
#特定ファイルのログを表示
$ git log gitCLI.txt
#ブランチを指定して表示
$ git log master
#変更したファイル名を表示
$ git log --name-status

 

ブランチを作成する

 

現在の本流のブランチ(master)から別のブランチを作成してみましょう。

 

・GUI の場合

VSCodeの画面左下に現在のブランチ名が表示されています。その個所をクリックし、

[+新しいブランチを作成]→ブランチ名入力欄に新規ブランチ名を記入→[Enter]

の実行します。

 

 

Ctrl + Shift + Pで 「Git History」を再度開いてください。[All branches]を選択すると master ブランチの横に新しいブランチが表示されていることが確認できます。

 

 

・CLI の場合

ターミナルより以下のコマンドを実行してください。

 

・ブランチの作成

$ git branch newBranchName

 

・作成したブランチに移動(チェックアウト)

$ git checkout newBranchName

 

きつね先生
きつね先生

git branch で現在のブランチの場所を確認することもできます!

 

 

ブランチをマージする

 

新規で作成したブランチを master ブランチにマージしてみましょう。

変更履歴がわかりやすいように2回適当な編集を加えてコミットしておいてください。

 

・GUI の場合

master から別のブランチに移動したときと同様に画面左下のブランチ名が表示されている箇所からもう一度 masterブランチに戻してください。

切り替えができたらマージを行います。

Git Historyでマージ元の最新履歴から以下の手順におこなってください。

[新規ブランチ]の右にあるアイコンをクリック→[Merge this commit into current branch]を選択→[新規ブランチ名]選択→[yes]選択

 

 

最終変更を行ったブランチに master ブランチが結合されていることが確認できます。

 

 

・CLI の場合

ターミナルより以下のコマンドを実行してください。

 

・masterブランチに移動

$ git checkout master

 

・差分のマージ

$ git merge newBranchName

 

不要なブランチの削除

 

編集が終了してマスターブランチにマージしましたら、不要なブランチは削除してしましましょう。

 

・GUI の場合

Ctrl + Shift + P「Git: Delete Branch」を選択→を削除対象のブランチを選択すると[All branches]から削除されていることが確認できます。

 

・CLI の場合

ターミナルより以下のコマンドを実行してください。

 

・ブランチの削除

$ git branch -d [ブランチ名]

 

GitHubにリポジトリを作成

 

GitHub と連携させてみましょう。

まずはGitHub の方にリポジトリを作成しましょう。(リモートリポジトリの作成)

以下の手順に沿って作成してください。

 

・GitHubへアクセス→[Repositories]タブ→[New]タブ

 

・各項目の入力→[Create repository]タブ

 

・アカウントトップへ移動→作成したリポジトリのリンクにアクセス→[Clone or download]タブ→表示された URL をコピー

 

プッシュする

 

それでは LocalRepository → RemoteRepository へのプッシュの流れとしてGitHub に公開してみましょう。

手順としましては、

1.リモートリポジトリの追加
2.フェッチ(リモートのデータをローカルに持ってくる)
3.master ブランチをフェッチしたリポジトリへマージ
4.リモートリポジトリへプッシュ

 

プルコマンドで2と3の工程をまとめて行える。便利なコマンドである一方で、Conflict などが起きた時に慌ててしまう。そのため、fetchを用いてひとつひとつ作業していくと安心して作業を進めることができるます。

 

・GUI の場合

Ctrl + Shift + P「Git: Add Remote」を選択→リモート名を入力(リモート名はoriginを推奨)→リモート先URLの入力(GitHub のリポジトリ作成時に取得したもの)

再度、Ctrl + Shift + P「Git: Fetch」を選択

さきほどと同じ手順で master ブランチをフェッチの履歴へマージする。

ここで以下のエラーが出た場合は GUI 操作の説明のところでもうしわけないのですが、VSCode のターミナルよりコマンドを実行してください。

 

fatal: refusing to merge unrelated histories

 

・エラー対応コマンド

$ git merge --allow-unrelated-histories origin/master

 

Git2.9から mergeコマンドと pullコマンドでは,–allow-unrelated-histories を指定しない限り,無関係なヒストリを持つ2つのブランチをマージすることができないそうです。

ここまできたらリモートリポジトリ(origin/master)が本流の master ブランチと合流していることが確認できます。

また、リモートリポジトリで作成した「README.md」ファイルが追加されていることも確認できます。

 

あとは左側の … ボタンから プッシュ を選択すると GitHub で内容が反映されます。

 

 

・CLI の場合

以下のコマンドを順に実行してください。

 

・リモートの追加

$ git remote add origin {url}

 

・フェッチ

$ git fetch origin

 

・マージ

$ git merge origin/master

 

・プッシュ

$ git push origin master

 

文字プッシュの時にエラーが表示されたら以下のコマンドを実行してみてください。

・エラー対応コマンド

$ git push origin master --force

 

GitHub 公開済コードの同期

 

新規ファイルのプッシュまでの流れをやりましたので、既に GitHub に公開されているリモートリポジトリをクローンして同期する流れも確認しておきましょう。

 

まずクローン先として適当な空のディレクトリを作成して VSCode で開いておいてください。

 

・GUI の場合

Ctrl + Shift + P[Git: Clone]選択→リモートリポジトリのURLを指定

あとは同様に何かしらの変更を加えてコミットしてください。その後、

 … ボタンから 同期  を選択すると GitHub で内容が反映されます。

 

・CLI の場合

以下のコマンドを順に実行してください。

 

・リモートの追加

$ git clone {https://github.com/{usr}/{repositoryName}.git}

 

・クローン先へ移動

$ cd {repositoryName}

 

コミットまでの流れは先述のものを参照してください。

・プッシュ

$ git push

 

このような感じでクローンの場合はリポジトリの初期化やリモートの追加を省略することが可能です。

さいごに

 

さいごまで読んでいただきありがとうございます。

基本的な Git の扱いは取り上げられたかと思いますのでご参考しなれば幸いです!

この記事を気に入っていただけましたらTwitterでもプログラミングに関してのツイートをリアルタイムでしていますので
ご一緒にフォローもお願いします。

 

スポンサーリンク
あっきー

元キャバクラ店長から未経験でエンジニアに転職した異端児。

「週4の5時間勤務、月収100万円」を実現させ、ゆるりと生きることを目標に日々パソコンと奮闘している。

自分の経験を元に、未経験からでも挫折しないプログラミングの勉強方法や最新技術や情報などを発信していきます。

あっきーをフォローする
Git
\良い記事だったらシェアしてね!/
スポンサーリンク
駆け出しエンジニアのつぶやき