4
1

VSCodeとGitHubを連携する方法【Gitコミット方法も解説】

Last updated at Posted at 2024-07-03

VSCodeとGitHubを連携する方法

VSCodeとGitHubを連携することで、コードのバージョン管理がよりスムーズになります!
この記事では、VSCodeとGitHubを連携する手順を詳しく説明しますので、ぜひ参考にしてください!

ステップ1: GitHubアカウントの準備

まず、GitHubのアカウントを作成しましょう。
アカウントがない場合は、GitHubでサインアップしてください。
68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3636333435382f34653061306539302d633835372d656332622d383233332d3531333332343831366339302e706e67.png

ステップ2: Gitのインストール

Gitがローカルにインストールされていることを確認します。
以下の手順でインストールできます!

  • Windows: Git for Windowsをダウンロードしてインストールします。
  • Mac: ターミナルでbrew install gitと入力してインストールします。
  • Linux: ターミナルでsudo apt-get install git(Debian系)またはsudo dnf install git(RPM系)と入力してインストールします。
こちらのコマンドでgitのバージョンが出てきたらインストールできています!
$ git --version

ステップ3: VSCodeのインストール

VSCodeをまだインストールしていない場合は、こちらからインストールしてください。
68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3636333435382f61376636326662642d653932352d336533302d356537612d3866633638663032623665342e706e67.png

ステップ4: VSCodeの設定

  1. VSCodeを開き、左サイドバーのソースコントロールアイコンをクリックします。
    68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3636333435382f31653135656564652d656139372d336364362d366537332d3930343437623862656539342e706e67.png

  2. 「リポジトリを初期化する」を選択し、ローカルリポジトリにコミットします。
    スクリーンショット 2024-07-03 23.44.26.png
    スクリーンショット 2024-07-03 23.45.52.png

  3. 「Branchの発行」を選択し、リモートリポジトリにプッシュします。
    スクリーンショット 2024-07-03 23.47.55.png
    スクリーンショット 2024-07-03 23.48.59.png
    スクリーンショット 2024-07-03 23.51.54.png

ステップ5: GitHubでの確認

GitHubのリポジトリにアクセスし、変更が反映されていることを確認します。
スクリーンショット 2024-07-04 0.01.13.png

まとめ

これで、VSCodeとGitHubの連携が完了です。
簡単な手順で、効率的なバージョン管理が可能になりました!
VSCodeではGitの操作全般を行えるので、色々調べて使いこなしてみてください!
もし機会があれば、その辺りの便利な使い方も記事にできればと思っています!

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