MENU

MENU

カテゴリー

＼気になるカテゴリーをクリック！／

ChatGPT
Midjourney
Copilot
Flutter
Java
Android
アプリ
Git/GitHub
VS Code
IT学び方
IT仕事探し
よく読まれている記事
やきいも
文系SE
【プロフ】
　▶ 30代半ば
　▶ ITエンジニア13年目 | 業務システム
　▶ 妻と息子の3人で田舎の暮らし

【サイト運営】
このブログは私の体験をもとに以下に関する情報をお届けしています。
　▶ AI
　▶ Java
　▶ Flutterなど
詳細プロフィールはこちら
Udemyセール！最大95％オフ！1,200円～11月の最新セール情報をみる
  1. ホーム
  2. Git/GitHub
  3. VSCodeでGit・GitHubの使い方を解説【初学者向け】

VSCodeでGit・GitHubの使い方を解説【初学者向け】

Git/GitHub
この記事にはPRを含む場合があります。
この記事で解決できる悩み

VSCodeでGitHubの使い方が分からない。

VSCodeでGitHubの基本操作を知りたい！

VSCodeは人気の高いコードエディターですが、GitとGitHubと連携することで、より便利に開発を進めることができます。

そこで今回は、VSCodeでGit・GitHubの使い方を初心者向けに以下の手順で解説します！

GitHubを効率的に学ぶならUdemyがおすすめです。

あわせて読みたい
【2024年最新】Git/GitHub 勉強におすすめなUdemy講座3選 UdemyでGitを学習したい Udemyで学べるGit/GitHubのおすすめを知りたい そこで、今回は初心者向けにGit/GitHubを学べるUdemyおすすめコースを紹介します。 この記事で分...

   

目次

VS Code×Git・GitHub｜事前準備

VS Code×Git・GitHub｜事前準備

VSCodeでGitHubと連携するにあたり、以下の準備が必要です。

  • GitHubアカウント作成
  • Gitインストール
  • Gitの初期設定
  • VSCodeインストール

   

GitHubアカウント作成

GitHubサイト(https://github.co.jp/) にアクセスし、GitHubのアカウントを作成しましょう。

GitHubのアカウント作成方法を知りたい方はこちらの記事を参考にしてみて下さい。

GitHubアカウント作成方法3ステップで簡単解説！

Gitインストール

以下のサイトからGitのインストーラーを取得して、Gitをインストールしていきます。

Windowsをご利用の方

macOSをご利用の方

git for windows
Download for macOS

Gitのインストール方法を知りたい方はこちらの記事を参考にしてみて下さい。

Gitのインストール方法（Windows/Mac）を解説！【2024年最新】
やきいも

Gitインストールしたか確認方法は以下のコマンドを実行して下さい。
Gitのバージョンが表示されれば、問題なくGitがインストールされています。

   

$ git --version

Gitの初期設定

Gitの初期設定をしておきます。

以下のコマンドを実行すことで、Gitでの自分の名前とメールアドレスを設定できます。

$ git config --global user.name "<ユーザー名>"
$ git config --global user.email "<メールアドレス>"

設定した名前とメールアドレスを確認したい場合は、以下のコマンドを実行しましょう。

$ git config --global user.name
$ git config --global user.email

Git/GitHubのコマンドを一覧上で確認したい方はこちらの記事を参考にしてみて下さい。

Git/GitHubコマンド一覧！使い方のまとめ【早見表】

VSCodeインストール

今回は、Visual Studio Codeを使って作業を行います。Microsoft公式サイトのVisual Studio Codeのダウンロードサイトにアクセスし、インストールしましょう。

VSCodeのインストール方法が知りたい方はこちらの記事を参考にしてみて下さい。

VS Code(Visual Studio Code)インストール方法を解説！

   

VS Code×Git・GitHub｜ローカルリポジトリ作成

VS Code×Git・GitHub｜ローカルリポジトリ作成

ローカルリポジトリを作成する方法は以下の通りです。

ちなみに、ローカルリポジトリーとは、自分のコンピュータ（ローカル環境）に存在するコピーを指します。

  • フォルダを作成して、VS Codeで開く
  • VS Codeでターミナルを開く
  • Gitコマンドで初期化する

VS Codeでフォルダを開く方法

事前にフォルダを作成しておきます。

ここでは、「project_x」というフォルダをデスクトップに作成しました。

   

VS Codeを起動させて、画面上部のヘッダーバーからファイルを選択し、フォルダを開く...をクリックします。

上記の作業をやると、以下のような画面が表示されます。

VS Codeでターミナルを開く

   

VS Codeでターミナルを開きます。

画面上部のヘッダーからターミナルを選択し、新しいターミナルをクリックします。

Gitコマンドを実行する

   

ターミナルを開いたら、以下のコマンドを実行してローカルリポジトリの初期化をおこないます。

$ git init

コマンド実行結果

$ Initialized empty Git repository in /Users/XX/Desktop/project_X/.git/

initコマンド実行後に、対象のフォルダでgitの隠しフォルダが作成されます。

「.git」の隠しフォルダが、project_Xのフォルダのローカルリポジトリです。

VS Code×Git・GitHub｜ローカルリポジトリにファイル追加

VS Code×Git・GitHub｜ローカルリポジトリにファイル追加

VS Codeでローカルリポジトリにファイル追加する手順は以下の通りです。

  • 新規ファイルの追加
  • ローカルリポジトリにステージング
  • ローカルリポジトリにコミット

   

新規ファイルの追加

VS Codeの追加アイコンをクリックし、ファイル名を入力します。

ここでは、main.htmlのファイル名を設定しました。

ローカルリポジトリにステージング

VS Codeの画面左にあるソース管理のアイコンをクリックします。

作成したファイルの＋アイコンをクリックします。

ステージされている変更エリアに移動され、ステージングされます。

ローカルリポジトリにコミット

コミット時のコメントを残します。ここでは新しいファイルを作成したので、make newとコメントを残します。

コミットをクリックし、ローカルリポジトリに行った変更が反映されます。

VS Code×Git・GitHub｜連携させる

VSCodeとGitHubを連携させる手順は以下の通りです。

  • GitHubでリモートリポジトリを作成する
  • リモートリポジトリに紐づける
  • リモートリポジトリにプッシュする
  • GitHubに反映されたかを確認する

   

GitHubでリモートリポジトリを作成する

GitHubにアクセスしサインインして、画面左上のCreate repositoryボタンをクリックします。

Repository name（リポジトリ名）を選択し、Privateを選択し、Create repositoryをクリックします。

…or push an existing repository from the command lineより下に書かれたコマンドをコピーしておきます。

   

リモートリポジトリに紐づける

   

先ほどコピーした1行目のコマンドを実行します。

VS Codeを開き、リモートリポジトリに紐づいているかgit remote -vコマンドを実行します。

以下のように実行結果が表示されます。

origin  https://github.com/[ユーザー名]/yakiimo_sample.git (fetch)
origin  https://github.com/[ユーザー名]/yakiimo_sample.git (push)

リモートリポジトリにプッシュする

   

以下のコマンドでリモートリポジトリにプッシュします。

git branch -M main
git push -u origin main

実行結果は以下の通りです。

Enumerating objects: 3, done.
Counting objects: 100% (3/3), done.
Writing objects: 100% (3/3), 206 bytes | 206.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
To https://github.com/[ユーザー名]/yakiimo_sample.git
 * [new branch]      main -> main
branch 'main' set up to track 'origin/main'.

GitHubに反映されたかを確認する

GitHubにアクセスして、画面左上のCodeをクリックすると、GitHubに追加ファイルが反映されています。

VS Code×Git・GitHub｜変更をコミット・プッシュ

以下の手順でVS Codeでファイルの編集・追加をしてリモートリポジトリにプッシュします。

  • VSCodeでファイルを編集・追加する
  • 変更のステージング・コミットを行う
  • 変更をリモートリポジトリにプッシュする

   

VSCodeでファイルを編集・追加する

以下ではファイルの編集と追加を行いました。

  • M:Modified（変更した）
  • U:Untracked（追跡対象外）

変更のステージング・コミットを行う

ローカルリポジトリへのステージング・コミットを行います。

VSCodeでソース管理をクリックします。

＋アイコンをクリックします。ここでは、main.htmlとsecondpage.htmlに対して、＋アイコンを選択します。

コメントはcommit testと入れ、コミットボタンをクリックして完了です。

   

変更をリモートリポジトリにプッシュする

最後に、リモートリポジトリにローカルリポジトリの更新内容をプッシュします。

変更の同期ボタンをクリックします。

OKボタンをクリックします。

リモートリポジトリに変更内容が反映されているか確認します、

   

VS Code×Git・GitHubの使い方 まとめ

今回はVSCodeでGit・GitHubの使い方を紹介しました。

以上、最後まで読んで頂きありがとうございます！

GitHub入門

GitHubの入門知識として押さえておきたい内容をまとめました。学習のご参考にどうぞ。

VS CodeでGit/GitHubの使い方まとめ

VS CodeでのGit/GitHubの使い方をまとめました。

GitHub Copilot X【AIペアプログラミング】

GitHub Copilot X【AIペアプログラミング】として押さえておきたい内容をまとめました。

あわせて読みたい
Github Copilot学習におすすめなUdemy講座3選【2024年最新】 UdemyでGithub Copilotを学習したい Udemyで勉強できるGithub Copilotのおすすめ講座を知りたい そこで、今回はGithub Copilotを学べるUdemyおすすめコースを紹介します...

Git/GitHub コマンド一覧

Git/GitHub コマンド一覧をまとめました。

Git/GitHub 勉強方法

Git/GitHub の勉強方法をまとめました。

あわせて読みたい
【2024年最新】Git/GitHub 勉強におすすめなUdemy講座3選 UdemyでGitを学習したい Udemyで学べるGit/GitHubのおすすめを知りたい そこで、今回は初心者向けにGit/GitHubを学べるUdemyおすすめコースを紹介します。 この記事で分...
Git/GitHub
VS Code

コメント

コメントする

CAPTCHA


目次