8/30〜|ライターのダイチが運営している個人メディア「ダイブログ」とPENGIN BLOGを統合しました

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

バージョン管理の図

お知らせ

当記事の元サイト「ダイブログ」は、8/30〜「PENGIN PLOG」と統合しました。
※元ドメイン(https://daib-log.com/〜)からはリダイレクト処理されます。

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

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

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

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

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

バージョン管理の図 【VSCode×GitHub】かんたん連携手順解説 2/2

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

VSCodeから連携するメリット

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

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

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

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

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

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

他にもGitHubDesktopという公式GUIツールもあります。こちらの記事でまとめていますので見てみてください!

【必見】GitHub Desktopのインストールから使い方まで徹底解説!

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

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

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

用語の意味

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

■ VSCode

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


■ Git

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


■ GitHub

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

GitHubは現在英語対応しかしていませんが、必要な操作の名称を理解しておけば問題ありません。

GitHubって日本語対応してるの?英語が不安な初学者向けに用語解説!

■ リポジトリ

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


■ リモートリポジトリ

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


■ ローカルリポジトリ

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

【徹底解説】GitHubリポジトリとは?作成や削除・運用方法まとめ!

■ マスターブランチ

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


■ ブランチ

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


■ クローン

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

クローン解説のアイキャッチ 【GitHub】クローンについて解説!うまくできない時の対処法まで紹介

■ ステージング

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


■ コミット

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


■ プッシュ

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


■ マージ

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


Gitのインストール

ここから設定の話ですが、まずはGitが使えるようにします。

Macであれば⌘+スペースでSpotlightという検索窓が開きます。ここで「ターミナル」と検索してください。

スポットライト画像

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

ターミナル画像
git –version

と入力してエンター。

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」を指しています。他のエディタであれば変える必要あります。

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

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

まとめ

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

文字にしたら長くなりましたがやってみたら実際やってみるとそこまで時間はかからないかと思います。

次の記事で実際の操作の様子をまとめていきますので、こちらも参考にしてみてください!

バージョン管理の図 【VSCode×GitHub】かんたん連携手順解説 2/2

また、当記事を読まれている方の中にはWeb制作初学者の方もいるかと思います。デザインやコーディングの基礎知識を学びたい方向けの記事を用意しているので是非見ていってください!

PENGIN無料コーディング課題

【デザインカンプ無料配布】未経験からのコーディング学習ステップ

オススメ書籍紹介

【初学者向け】書籍でWeb制作を学ぶ!オススメ書籍をジャンル別に紹介! Web制作のおすすめ本24選!(コーディング・Webデザイン)

オススメUdemy講座紹介

Udemyオススメ講座まとめ 【2021年8月】Udemy×Web制作!オススメ優良講座を紹介!

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA