MENU
カテゴリー
アーカイブ
だいち
このブログの管理者
異業種で仕事をしながら、副業でWeb制作をしているアラサーリーマンです。
日々の勉強の記録や、お役立ち情報を発信していきます。
ホームページ制作などのお仕事に関するご依頼やご相談は、運営者情報のお問い合わせフォームかSNSのDMにて宜しくお願いします。

【VSCode×GitHub】かんたん連携手順解説 1/2

バージョン管理の図

どうも、ダイチです。

この記事ではVSCodeからGitHubに連携する手順についてまとめてみました。

Gitを学ぶには時間と労力がかかりますし、最適な連携方法(できれば簡単なやり方)を模索して当記事に辿り着いた方もいるかもしれません。

普段使ってるVSCodeで簡単にGitHubが使いたいですよね。

そんな方に向けて、初期設定から具体的な連携操作方法までを流れでまとめました。

また、長くなりそうだったので2部構成に分けています。Gitのインストールや初期設定が終わっている方は下の記事からでもいいです↓

また、この記事ではGitHubに関する基礎的な解説などは省いていますのでそのあたりはご了承ください。

目次

VSCodeから連携するメリット

まず先にVSCodeでGit連携するメリットを紹介しておきます。

メリット1:GUI操作が可能

Gitのサービスを使用する場合、ターミナルやコマンドプロンプトからコマンドライン(CUI)で操作するか、専用のアプリを使用しマウスなどで操作(GUI)する方法があります。

公式のヘルプはCUI操作で解説させています。これはGitのコマンド全てを実行できることが理由です。

Git-コマンドライン

ただ正直、あの黒い画面に抵抗感がある方もいると思いますし(自分)、まずはGitHubを使ってみたい!という方はGUIでいいと思っています。

GUI操作ができるアプリはいくつかありますが、VSCcodeはその内の一つということです。

メリット2:専用アプリケーションとの切り替えが不要

他アプリを使用する場合、そもそもそのアプリを立ち上げて切り替えながら別操作が必要ですし、それだけでデスクトップ上の操作スペースを占有します。

その点VSCodeを使用する場合、コードを記述しながらそのままの画面上でGit操作を行えることから操作性はかなり良くなります。

用語の意味

必要最低限ですがここも解説しておきます。

■ VSCode

Microsoftが開発しているコードを記述するエディタ。多様な拡張機能がありカスタマイズ性も高いことから使用者が多い非常に使いやすい。

VSCode公式サイト


■ Git

ソースコードなどの変更履歴を記録・追跡するためのバージョン管理システム。ローカル環境(自分のパソコンなど)に全ての変更履歴が作成することができるため、コードの変更管理などをするために用いられる。

Gitとは


■ GitHub

Gitの仕組みを利用してウェブ上にソースコードなどの変更履歴を記録、また公開することができるサービスの名称。※同様のサービスでBitbucketやBacklogなどがあります。

GitHubとは


■ リポジトリ

履歴管理を行い諸々のデータが格納される場所。Gitの根元となる部分。


■ リモートリポジトリ

サーバ(ウェブ上)にあるリポジトリのこと。ここにコードが格納されることでウェブ上に公開することができる。


■ ローカルリポジトリ

自分のPC上にあるリポジトリのこと。


■ マスターブランチ

リポジトリを作成した時に最初に作成される本流。本番用の原本的なもの。


■ ブランチ

変更履歴を枝分かれさせたもので、マスターブランチのコピーのようなもの。


■ クローン

リモートリポジトリを自分のPC上にコピーすること。このコピーは、ローカル上でローカルリポジトリとなる。


■ ステージング

変更したデータを仮保存すること。(この時リポジトリには保存されない)


■ コミット

インデックスされたデータをローカルリポジトリに反映させること。


■ プッシュ

ローカルリポジトリの内容をリモートリポジトリに反映させること。


■ マージ

ブランチを合流させ、変更内容を合体させること。一般的にはブランチに履歴を残していき、本番にうつしたい時にマスターブランチにマージする、という運用をとる。


Gitのインストール

ここから設定の話です。(いつも前置きが長い)

まずはGitが使えるようにします。

Macであれば⌘+スペースでSpotlightという検索窓が開きます。

ここで「ターミナル」と検索してください。

スポットライト画像

このような黒い画面が出てくるので、文末のカーソルが当たっているところに

ターミナル画像
git –version

と入力してエンター。

Gitバージョン記載画像

見づらいですが赤線を引いたようにヴァージョンが表記されていればGitが使える状態です。

まだの方はこちらからインストールを。

Gitーダウンロードサイト

Gitダウンロード画像

OSを選べますが、赤丸箇所からでよいかと思います。

インストール完了したら上記のようにターミナルから確認してみましょう。

Gitの初期設定

再びターミナルを開き、下記項目を入力してください。

 git config --global user.name 'username'
 git config --global user.email 'username@example.com'
 git config --global core.editor 'code --wait'
 git config --global merge.tool 'code --wait "$MERGED"'
 git config --global push.default simple
  • ユーザ名
  • メールアドレス
  • エディタをVSCodeに指定
  • マージツールをVSCodeに指定
  • pushのデフォルト方式を指定(追跡ブランチに対してpush)

上から二つのユーザ名、メールアドレスはご自身のものに変更してください。

「core.editor」はデフォルトエディタの設定で「code」というのが「VSCode」を指しています。他のエディタであれば変える必要あります。

クラスメソッド発「やってみた」系技術メディア | DevelopersIO
各種テキストエディタを Git で使うための設定 (Atom/Sublime Text/TextMate/CotEditor) | DevelopersIO
各種テキストエディタを Git で使うための設定 (Atom/Sublime Text/TextMate/CotEditor) | DevelopersIO各種テキストエディタを Git で使うための設定 (Atom/Sublime Text/TextMate/CotEditor) コミットやタグのメッセージを編集する時に使うエディタは、ユーザがデフォルトで...

「merge.tool」はGit の履歴差分の比較を確認したり、マージをするツールを指定します。「code」でVSCodeを指定しています。(履歴差分の比較は拡張機能で見れるけど)

「global push.default」は、Git 2.0以降デフォルト設定のようなので必要ないかも?

Black Everyday Company
初心者必見!Gitでやらかす前に設定しておきたいpush.default | Black Everyday Company
初心者必見!Gitでやらかす前に設定しておきたいpush.default | Black Everyday CompanyコンフリクトをおこしたfeatureブランチをrebaseしてPullRequestを作りたかった。その際、git push -fコマンドを実行してmasterブランチを壊してしまった。

まとめ

とりあえずこれで初期設定は終わりです。

文字にしたら長くなりましたがやってみたら結構すぐ終わる、、、と思います。

次の記事で実際の操作の様子をまとめていきます。

あわせて読みたい
【VSCode×GitHub】かんたん連携手順解説 2/2
【VSCode×GitHub】かんたん連携手順解説 2/2どうも、ダイチです。前回の記事でVSCodeからGitHubに連携するための概要説明〜初期設定までをご紹介しました。初期設定がまだの方は是非前回の記事からご覧ください↓今...

Gitについて改めてきちんと学んでおいた方がいいかも…と思った方はオススメのUdemy教材を紹介します。基礎からじっくり動画で学びたい方は是非ご覧ください!

あわせて読みたい
【Udemy】Web制作関連のオススメ講座紹介!【2021年5月】
【Udemy】Web制作関連のオススメ講座紹介!【2021年5月】当記事では動画学習教材「Udemy」について、Webデザイン・Web制作に関連する優良講座を紹介します!世の中には学習教材が数多くあるので、特に独学の方はどれを選んだら...

それでは今回はこのへんで!

バージョン管理の図

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

コメント

コメントする

CAPTCHA


目次
閉じる