SHOEISHA iD

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

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

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

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

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

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

GitHub Codespaces

 最後に、GitHub Codespacesを紹介します。GitHub Codespacesは、GitHubが提供する開発環境です。Webブラウザ、VSCode、JetBrains IDE、GitHub CLIから利用できます。特にWebブラウザから利用すると、場所やデバイスを選ばずにリポジトリでの編集作業を全て完結できるので非常に便利です。Codespacesは、Microsoft Azure上にホストされたLinux仮想マシンで、Dockerコンテナを動作させてそこにリポジトリのクローンや開発ツールなどを配置して動作させます。技術的な詳細は、「GitHub Codespaces の概要 - GitHub Docs」を参照してください。Codespacesは、GitHub無料プランの個人ユーザの場合は月間15GB、120時間まで無料で使えます。

 では、WebブラウザからCodespacesを利用してみます。GitHubのリポジトリを表示させたWebブラウザで[ . ](ドット)キーを押すと、GitHub Codespacesに切り替わりVisual Studio Code for the Webが起動してリポジトリでの作業を開始できます。図24は、筆者のPrivateなリポジトリです。

図24:リポジトリを表示させた状態
図24:リポジトリを表示させた状態

 ここで、[ . ]キーを押すと同じタブ内でCodespacesの画面に切り替わります(図25)。URLのホストがgithub.devとなっているように、GitHub側でホストされていることがわかります。

図25:Codespacesでリポジトリを開いた状態
図25:Codespacesでリポジトリを開いた状態

 ひとまずREADME.mdが表示されていますが、エクスプローラーからファイルを選択すれば、そのファイルを編集できます(図26)。

図26:適当なファイルを開いた状態
図26:適当なファイルを開いた状態

 ファイルを編集して、リポジトリに反映させたいときは[ソース管理]アイコンをクリックしてメッセージとともにコミットしますが、通常のコミットとは異なり、コミット後にすぐにプッシュされる点に注意が必要です(図27)。

図27:コミットとプッシュ
図27:コミットとプッシュ

今回登場のショートカットキー

今回登場のショートカットキー
機能 macOS Windows
GitHub Codespacesの呼び出し(Webブラウザ) [ . ] [ . ]

まとめ

 今回は、前回に引き続きVSCodeのGit連携機能をGitHubを中心に紹介しました。さらにGit連携が便利になる拡張機能をいくつか紹介し、オンラインでリポジトリの管理とコード編集が可能になるGitHub Codespacesを紹介しました。

 次回は、VSCodeの備える便利な編集機能を紹介します。

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

連載通知を行うには会員登録(無料)が必要です。
既に会員の方はを行ってください。
開発用エディタのド定番「VSCode」を使いこなそう連載記事一覧

もっと読む

この記事の著者

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

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。 2026年時点での登録メンバは約50名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/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本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

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

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

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/18695 2023/12/07 11:00

イベント

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

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

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

メールバックナンバー