SHOEISHA iD

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

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

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

VSCodeのソース管理をはじめよう! Gitの連携機能について解説

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

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

ソース管理ビューでの操作

 準備ができたところで、VSCodeにおけるソース管理の基本について見ていきましょう。本節では、手元にリポジトリを作成し、ステージング、コミットまでを実行し、リポジトリ操作の基本的な流れを紹介します。

ソース管理ビューを見てみる

 ソース管理の基本となるのが、ソース管理ビューです。リポジトリとして初期化済みのフォルダーを開いた状態で、アクティビティバーから[ソース管理]アイコンをクリックすると、ソース管理ビューが表示されます。ソース管理ビューには、変更されたファイル一覧、ステージングされたファイル一覧などのセクションと、リポジトリに対する処理を指示するボタンやメニューが配置されます(図3)。メニューは、ソース管理ビュー上部の[ミートボールメニュー]アイコンから呼び出せます。

図3:ソース管理ビューとメニュー
図3:ソース管理ビューとメニュー

 メニューの項目は、Gitのコマンドとほぼ一対一に対応しています。VSCodeは、リポジトリに対する処理の際に、対応するGitのコマンドを内部で呼び出しているので、Gitのコマンドに理解があればVSCodeにおける操作は容易でしょう。表1は、メニュー項目、その機能とGitコマンドの対応です。

表1:ソース管理ビューのメニュー項目
メニュー項目 機能(Gitコマンド)
プル リモートリポジトリから変更をプルする(git pull)
プッシュ リモートリポジトリへ変更をプッシュする(git push)
クローン リモートリポジトリをローカルに複製する(git clone)
チェックアウト先 ブランチを切り替える(git checkout)
フェッチ リモートリポジトリからファイルを取り出す(git fetch)
コミット コミット(git commit -a)、ステージング済みをコミット(git commit)、前回のコミットを元に戻す(git reset)、リベースを中止する(git rebase --abort)、コミット(修正)(git commit -a --amend)、ステージング済みをコミット(修正)(git commit --amend)、すべてコミット(修正)(git commit -a --amend)、コミット(サインオフ)、コミットしてステージング(サインオフ)
変更 すべての変更をステージ(git add -u)、すべての変更のステージング解除(git reset)、すべての変更を破棄(git restore)
プル、プッシュ 同期、プル(git pull)、リベース(git rebase)、指定元からプル(git pull origin)、プッシュ(git push)、プッシュ先(git push origin)、フェッチ(git fetch)、フェッチ(prune)(git prune)
ブランチ ブランチをマージ(git merge)、ブランチのリベース(branch rebase)、ブランチの作成(git branch)、ブランチの作成元(git branch -u)、ブランチ名の変更(git branch -m)、ブランチの削除(git branch -d)
リモート リモートの追加(git remote add)、リモートの削除(git remmote rm)
スタッシュ スタッシュ(git stash)、スタッシュ(未追跡ファイルを含む)(git stash -u)、スタッシュ(ステージング済み)(git stash)、最新のスタッシュを適用、スタッシュを適用(git stash apply)、最新のスタッシュをポップ(git stash pop)、スタッシュをポップする(git stash pop)、スタッシュを削除する(git stash drop)、すべてのスタッシュを削除(git stash clear)
タグ タグを作成(git tag)、タグの削除(git tag -d)、リモートタグの削除(git push)

 以降は、この中から利用頻度の高い機能をピックアップし、実際にリポジトリを操作しながらソース管理の手順を紹介していきます。

リポジトリを作成し初期化する

 リポジトリとするフォルダを、場所はどこでも構いませんので、適当に作成しておきます。ここでは、vscode_git_basicとしました。VSCodeを起動した直後などフォルダを開いていない状態では、図4のように2つの選択肢[フォルダーを開く][リポジトリの複製]が表示されています。ここで、[フォルダーを開く]を選択して、作成したvscode_git_basicフォルダを開きます([リポジトリの複製]の方は、次回で取り上げます)。

図4:[フォルダーを開く]と[リポジトリの複製]
図4:[フォルダーを開く]と[リポジトリの複製]

 フォルダが開いたら、[ソース管理]アイコンをクリックします。すると、図5のようにさらに2つの選択肢[リポジトリを初期化する][GitHubに公開]が表示されるので、ここでは[リポジトリを初期化する]をクリックします([GitHubに公開]の方は、次回で取り上げます)。

図5:[リポジトリを初期化する]と[GitHubに公開]
図5:[リポジトリを初期化する]と[GitHubに公開]

 これで、リポジトリが初期化されます(git initコマンドが実行される)。ステータスバーの左端には、ソース管理アイコンとともに「main」と表示されているのが確認できます(図6)。これは、現在リポジトリのmainブランチで作業しているという印です。「メッセージ(⌘Enterで"main"に…」と表示されている入力ボックスや、[Branchの発行]ボタンについては後述します。エクスプローラーに戻りましょう。

図6:リポジトリの初期化完了
図6:リポジトリの初期化完了

ファイルを作成する

 作成したフォルダは空なので、何かファイルを追加します。リポジトリを公開する際にはREADME.mdファイルを置くのが常なので、中身は適当で良いのでREADME.mdファイルを作成します。ファイルを作成して中身を何か入力すると、画面の状態が変化します(図7)。

図7:README.mdファイルの作成中
図7:README.mdファイルの作成中

 ファイルの編集中なので、ファイル名の脇に未保存であることを示す●が表示されるのは紹介済みとして、このほかに「U」という文字や[ソース管理]アイコンに「1」というバッジが表示されています。この「U」はUntrackedの略で「追跡されていない」という意味です。すなわちソース管理の対象になっていないので、後ほど管理対象にしてあげる必要があります。ソース管理アイコンのバッジの数字は、変化のあったファイルの個数で、この場合は1です。

 ここでファイルを保存して、[ソース管理]アイコンをクリックします。ソース管理ビューの表示で、先ほど[Branchの発行]となっていたボタンは[コミット]に変化しています(図8)。「変更」セクションがあり、そこにREADME.mdファイルが表示されています。追跡対象外であることを示す「U」の左にはいくつかのアイコンがあります。それぞれ左から、[ファイルを開く][変更を破棄][変更をステージ]となりますが、ここで重要なのは最後の[変更のステージ]です。ステージとは、変更のあったファイルをコミット対象にする、すなわちステージ(舞台)に載せることです。変更をコミットするには、まずステージに乗せるステージングが必要です。

図8:README.mdファイルの作成、保存後のソース管理ビュー
図8:README.mdファイルの作成、保存後のソース管理ビュー

[NOTE]Gitコマンドによる状態の確認

 本記事は基本的にGUIによるリポジトリ操作を紹介しますが、適宜CUIのGitコマンドを活用すると状態の把握などに便利です。例えばgit statusコマンドでは以下のようにコミットの状況や未追跡ファイルの情報、実行すべきコマンドなどが表示されます。このほかに、git logコマンドでコミット時のログなどを確認できます。

% git status
On branch main		mainブランチの情報

No commits yet		コミットされていない

Untracked files:	未追跡ファイル
  (use "git add <file>..." to include in what will be committed)
        README.md

nothing added to commit but untracked files present (use "git add" to track)

ファイルをステージングしてコミットする

 ここで、「変更」セクションの[変更のステージ]アイコンをクリックすると、「ステージされている変更」セクションが現れ、そこにREADME.mdファイルが移動します(図9)。このとき、「U」が「A」に変化している点に注目です。「A」はAddedの略でステージに追加されたという意味です。ファイル名をクリックすると、変更前の内容と変更後の内容が差分で「(インデックス)」と付記された読み取り専用のタブがエディタグループに追加されるので、どのような変更かを事前に確認できます。なお、いったんステージングしても、[変更のステージング解除]アイコンでステージングを解除できます。

図9:README.mdファイルのステージング
図9:README.mdファイルのステージング

 ここまで来れば、コミットできます。メッセージ入力欄に適当なコミットメッセージを入れて[コミット]をクリックします(図10)。メッセージは、コミットの理由を入れるのが基本ですが、ここでは最初のコミットとして「Initial commit」としておきました。

図10:README.mdファイルのコミット
図10:README.mdファイルのコミット

 コミットすると、何事もなかったかのようにファイル作成前、すなわちリポジトリに変更のない時点の状態に戻ります。「(インデックス)」と付いたエディタ画面は閉じてしまって構いません。

図11:README.mdファイルのコミット終了
図11:README.mdファイルのコミット終了

 なお、macOSでは⌘+[Enter]キー、Windowsでは[Ctrl]+[Enter]キーでメッセージをエディタで編集できます。キーを押すとCOMMIT_EDITMSGファイルが編集状態になるので、コミットメッセージを入力、編集後に保存してタブを閉じます。これで、ファイルの内容がコミットメッセージとして使用されます。

 また、[コミット]ボタンにはプルダウンがありますが、これは主にリモートリポジトリに関連したものなので、次回で紹介します。

[NOTE]修正コミット

 コミットしてしまったが、その内容を修正したいことがあります。改めて修正をコミットしなおしてもよいのですが、コミット履歴に無駄なものが残ることになります。コミットメッセージの修正とか、ファイルのステージングを漏らしたとか軽微な修正は、修正コミットで対応できます。修正コミットでは、直前のコミットの内容を修正するので、履歴に余計なものを残さずに済みます。手順としては、改めてステージング等をやり直したあと、コミットメッセージも必要なら書き換えて、ソース管理ビューの[ミートボールメニュー]アイコンから[コミット]-[コミット(修正)]を選択してください。

ファイルを修正する

 ファイルを修正してみましょう。README.mdファイルに適当に行を追加します。保存すると、今度はエクスプローラービューのファイル名の脇に「M」と表示されます。これはModifiedの略で、すなわち変更です。ソース管理ビューに切り替えると、「変更」セクションにREADME.mdファイルがありますが、同じく「M」と表示されます(図12)。ここで、新規作成時と同様に[変更をステージ]アイコンをクリックするとファイルがステージングされます。「ステージされている変更」セクションにREADME.mdファイルが移動すること、ファイル名をクリックしてエディタグループで変更内容を確認できるのは、新規作成時と同じです。

図12:README.mdファイルの修正
図12:README.mdファイルの修正

 ここでコミットメッセージ(ここでは「Modify file」)を入れて[コミット]ボタンをクリックすれば、修正内容がコミットされます(図13)。

図13:README.mdファイルの修正のコミット
図13:README.mdファイルの修正のコミット

[NOTE]タイムラインの確認

 セカンダリサイドバーを開き、「タイムライン」を展開すると、この時点までのリポジトリ操作を時系列で確認できます(図14)。確認できるのはファイルの保存やコミットの内容と実行者などの情報です。

図14:タイムライン
図14:タイムライン

コミットをキャンセルする

 コミットはキャンセルできます。いったんコミットしたけど、その後の作業がうまくいかないので元に戻したいなどの場合です。ソース管理ビューで、[ミートボールメニュー]アイコンをクリック、表示されるメニューから[コミット]-[前回のコミットを元に戻す]を選択します。すると、変更されたファイルがステージングされた時点に戻るので(図15)、[ステージングを解除]したり、解除後に[変更を破棄]することができます。

図15:コミットのキャンセル
図15:コミットのキャンセル

次のページ
ブランチとマージ

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

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

もっと読む

この記事の著者

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、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編 」他、著書多数

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

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

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

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

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

この記事をシェア

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

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング