VSCodeでGitHubのリポジトリを操作する

ツール
スポンサーリンク

Visual Studio Code (VSCode)で、GitHubのリポジトリのクローンを操作する方法です。

前提条件
・Visual Studio Code がインストール済みであること
・Gitをインストール済みであること
・GitHubにリポジトリを作成済であること
開発環境
  • Visual Studio Code 1.44.2
  • Windows 10

GitHub上のリポジトリのクローン(複製)を作成

VSCodeを起動し、エクスプローラーを表示します。エクスプローラーに表示されている「リポジトリをクローンする」ボタンをクリックします。するとウィンドウ上部にリポジトリURLの入力欄が表示されます。

※表示されないというコメントをいただきましたので、追記します。「リポジトリをクローンする」ボタンが表示されていない場合は、「Git History」という拡張機能をインストールしてください。この方法以外にも予めGitのコマンドでローカルにクローンしたファイルにアクセスすることで、連携することもできます。参考までに。

表示されたリポジトリのURL欄にリモートリポジトリのURL(https://github.com/xxxx/xxxx.git)を入力します。

フォルダ選択ダイアログが表示されますので、リポジトリをクローンするフォルダを選択します。クローンしたリポジトリを開きます。

これでリモートリポジトリを開くことができました。

VSCodeでコミット(CMMIT)する

VSCodeでコミットを行う方法です。

以下では、2ファイル削除し、1ファイル追加しています。VSCodeでコミットする場合、変更をステージングする必要があります。ファイルの横のプラスマークを押下して、ステージングを行いましょう。ちなみにここでのステージングは最終確認みたいな感じでしょうか。

一括でステージングを行いたい場合は、変更にカーソルを合わせると横にプラスアイコンが表示されますので、それをクリックします。

ステージングすると以下のようになります。ここでは「Sample.py」のみステージングしています。その後、上のチェックアイコンをクリックし、コミットを行います。

メッセージを入力し、Enterを押下するとコミット完了です。Gitではコミットしただけでは、リモートリポジトリに追加されません。リモートリポジトリに追加するには、この後にpushを行います。

一旦ここで、Git History という拡張機能で、Gitのログを見てみます。一番上の「add new file」となっているものが上でコミットしたものです。

VSCodeでプッシュ(PUSH)する

ソース管理の「・・・」をクリックし、メニューを表示します。「プッシュ」を選択します。

プッシュ後、Git Historyでログを確認してみましょう。リモートリポジトリに登録されていることがわかります。

余談:拡張機能を追加

VSCodeでは様々な拡張機能を追加できます。追加しなくてもコミットやプッシュはできますが、Gitのログを見るときに便利なので「Git History」という拡張機能を入れておきます。この拡張機能はGitのログやブランチやコミットとの比較が行えます。

この他にもVSCodeでは、様々な拡張機能があります。自分が作業しやすいようにカスタマイズしてみてください。

まとめ

GitHubのリポジトリのクローンを作って、ローカルPCから操作する方法について、基本的な操作を紹介しました。バージョン管理は、チームで作業する上では必須です。

GitHubを上手に利用して、プログラミング開発に取り組んでみてはいかがでしょうか。ちなみに、GitHubはオープンソース推奨となっています。公開したくない、してはいけないソースは、必ずプライベートリポジトリで管理するようにしましょう。

以下は、GitHubにアカウントを作成する方法についての記事です。参考までに。

GitHubにアカウントを作ってみよう
GitHubのアカウントの作成方法です。 GitHubはシステム開発を行う上で重要なバージョン管理、構成管理ををクラウド上で管理できるサービスです。個人で使用する場合は、無料で使用できるフリープランもあります。 フリープランは、これまでパブ...

Gitの操作は、コマンドラインからでも可能です。各種コマンドは、以下の記事が参考になるかと思います。

よく使うGitコマンド一覧
Gitでよく使用するコマンドをまとめました。 ここでは、コマンドの一覧をまとめています。プロジェクトが進むと、GUIツール操作(IDE環境)で操作することが多いです。しかし、Gitでどんなことができるのかを理解するには、一度コマンド操作も一...

コメント