SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

開発用エディタのド定番「VSCode」を使いこなそう

VSCodeのGit連携をさらに便利に! 拡張機能Git History、Git Graph、GitLensを解説

開発用エディタのド定番「VSCode」を使いこなそう 第8回

  • X ポスト
  • このエントリーをはてなブックマークに追加

 第8回は、前回の続きとして、GitHubとの連携機能、連携を強化するGit History、Git Graph、GitLensといった拡張機能を紹介し、GitHub上でワンストロークでオンライン版VSCodeを呼び出せるGitHub Codespacesについても紹介します。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 Microsoftの提供するVisual Studio Code(VSCode)は、2015年の最初のリリースから、今では開発用エディタの定番の座を占めるまでになりました。これには、無償で使えることも大きいですが、何よりエディタとしての使いやすさ、そしてさまざまな拡張機能によっていくらでも使い勝手を向上させたり、利用の領域を拡げたりすることも大きいでしょう。本連載では、このVSCodeにフォーカスし、基本的な使い方から拡張機能の活用、そして本格的な開発現場での利用を想定した高度な機能までを紹介していくことで、読者がVSCodeマスターになるお手伝いをします。

対象読者

  • テキストエディタメインで開発してきた方
  • Visual Studioより軽い環境が欲しいと考えている方
  • Visual Sudio Codeをもっと使いこなしたい方

必要な環境

 本記事の内容は、以下の環境で動作を確認しています。

  • macOS Sonoma 14.0

      -Visual Studio Code 1.83.1

リモートリポジトリへの発行とプッシュ・プル

 前回は、ローカルリポジトリでのソース管理を紹介しました。複数の開発者で共同作業したり、リポジトリを外部に公開したりする場合には、ローカルリポジトリをリモートリポジトリに発行する必要があります。ここでは、作成したローカルリポジトリをGitHubに発行してみましょう。

リモートリポジトリに発行する

 発行は簡単で、第7回の図5などの局面で、[Branchの発行]をクリックするだけです。ステータスバーに表示されている、チェックアウトされているブランチが発行されることに注意してください。GitHubへのサインインを確認され、承諾すればサインインが実行されてWebブラウザからVSCodeに戻ってきます。

 この時点で、コマンドパレットにはリポジトリの名前(vscode_git_basic)が表示されています。発行先として[Publish to GitHub private repository]と[Publish to GitHub public repository]の2つが表示されるので、リポジトリを非公開としたければ前者を、公開したければ後者を選択します(図1)。ここでは非公開としました。

図1:ブランチの発行
図1:ブランチの発行

 発行でエラー等が発生しなければ、WebブラウザでGitHubを開きます。自身のリポジトリ一覧に登録されていれば発行は成功です(図2)。

図2:GitHubに登録されたリポジトリ
図2:GitHubに登録されたリポジトリ

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

 リモートリポジトリへの発行を済ませたら、以降はローカルリポジトリでの作業内容をリモートリポジトリにも反映させる必要があります。これを「プッシュ」といいます。ローカルからリモートにリポジトリを押し出すからプッシュ、というわけです。ローカルリポジトリにファイルを追加して、それをコミット、リモートリポジトリにプッシュしてみましょう。

 ローカルリポジトリにファイルを適当に作成します。ここでは、hello.htmlとしました。通常通りの手順で、ステージングまで済ませます。ここで、ソース管理ビューは図3のようになっています。

図3:新規作成したファイルのステージング
図3:新規作成したファイルのステージング

 ここで選べる手順は、以下の通りです。

  • そのまま[コミット]をクリック、そのあとにプッシュする
  • [コミット]ボタンのプルダウンメニューから[コミットしてプッシュ]を選択する

 コミットしてすぐにプッシュするなら、後者の方が手順が少なく済み便利です。すぐにリモートリポジトリに反映する必要がなければ、前者を選択してプッシュは保留しましょう。

 ここでは、すぐにプッシュしてしまうことにします。コミットメッセージ入力欄に例えば「Add file」と入力して、[コミット]ボタンのプルダウンメニューから[コミットしてプッシュ]を選択します。エラー等が発生しなければ、リモートリポジトリにもファイルの追加が反映されているはずです(図4)。

図4:hello.htmlが追加されたリモートリポジトリ
図4:hello.htmlが追加されたリモートリポジトリ

リモートリポジトリからプルする

 プッシュとくれば「プル」です。プルとは、リモートリポジトリの変更をローカルリポジトリに反映させることです。プルなので、引っ張ってくるというわけです。共同作業者がプッシュした変更を取り込むときに使います。リモートリポジトリにファイルを作成して、それをローカルリポジトリにプルしてみましょう。

 リモートリポジトリにファイルを適当に作成します。ここでは、remote.mdとしました(図5)。

図5:remote.mdを追加したリモートリポジトリ
図5:remote.mdを追加したリモートリポジトリ

 ソース管理ビューの[ミートボールメニュー]アイコンから[プル]を選択します。エラー等が発生しなければ、ローカルリポジトリにもremote.mdが存在するのを確認できるはずです(図6)。

図6:remote.mdが追加されたローカルリポジトリ
図6:remote.mdが追加されたローカルリポジトリ

リモートリポジトリのクローン

 ここまでで、ローカルリポジトリを作成し、さまざまな操作の果てにリモートリポジトリに発行、変更を反映するところまでやってきました。しかし実際には、GItHubにある既存のリポジトリをクローン(複製)し、手元で作業することもよくあります。オープンソースプロダクトのサンプルなどですね。このようなGitHubにあるリポジトリをクローンし、VSCodeで使うのは簡単です。

 ここでは、筆者が用意しておいたサンプルのリポジトリをクローンしてみましょう。もちろん、各自のGitHubアカウントに独自に作成してもらっても構いません。開いているフォルダやワークスペースがあれば閉じて、第7回の図3の状態で今度は[リポジトリの複製]をクリックします。コマンドパレットに「リポジトリURLを指定するか、リポジトリソースを選択します。」と表示されているので、ここにサンプルリポジトリのURLを入力します。自身のリポジトリからクローンする場合には、[GitHubから複製]を選択すると、リポジトリの一覧から選択できます(図7)。

図7:リポジトリソースの指定
図7:リポジトリソースの指定

 URLを入力するかリポジトリを選択すると、クローン先を尋ねてきます。お好みの場所(フォルダ)を選んで、[リポジトリの宛先として選択]をクリックしてください。クローンしたリポジトリを開きますか?の問いには、まずは[開く]を選択します。「このフォルダー内のファイルの作成者を信頼しますか?」の問いには[はい、作成者を信頼します]を選択します。これで、クローンしたリポジトリをローカルで開くことができました(図8)。

図8:リポジトリのクローン終了
図8:リポジトリのクローン終了

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
Git連携に便利な拡張機能

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
開発用エディタのド定番「VSCode」を使いこなそう連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 山内 直(WINGSプロジェクト ヤマウチ ナオ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook <個人紹介> WINGSプロジェクト所属のテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/18695 2023/12/07 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング