SHOEISHA iD

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

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

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

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

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

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

ブランチとマージ

 コミットまで済ませたところで、Gitの特徴的な機能であるブランチの操作に移ります。ブランチ(branch)とは、「枝」のことです。これまで、ブランチは「main」だけでした。実際の開発では、作業内容を直接mainブランチにコミットすることはせず、別のブランチで問題ないと確認した上で「マージ」するのが基本です。ここからは、ブランチの作成や移動、マージとコンフリクトの解決を見ていきます。

ブランチを作成する

 ブランチを作成します。ブランチを作成すると、作成元のブランチ(ここではmain)と同じ内容のブランチとなります。ソース管理ビューの[ミートボールメニュー]アイコンから[ブランチ]-[ブランチの作成]を選択します。コマンドパレットに新しいブランチ名を入力して[Enter]キーを押します。ここでは、ブランチ名を「work」としました。作成後、ステータスバーのブランチ表示が「work」となっているのを確認してください(図16)。

図16:ブランチの作成
図16:ブランチの作成

 以降の作業は、このworkブランチに対するものとなります。どのような変更もmainブランチには影響を与えないので、失敗を気にせず作業できます。例として、著作権情報を格納するLICENSEファイルを作成してみます。GitHubでリポジトリを作成するとライセンス基準に応じて自動生成されるファイルですが、ここでは中身も適当とします。ステージング、コミットまでを、紹介した手順で実行してください。

ブランチをチェックアウトする

 ここで「チェックアウト」します。チェックアウトとは、宿泊施設などで部屋を引き払うことですが、この場合は現在のリポジトリから別のリポジトリに移動することをいいます。ソース管理ビューの[ミートボールメニュー]アイコンから[チェックアウト先...]を選択し、表示される選択肢から「main」を選択します。これでmainブランチにチェックアウトされます(ステータスバーも確認してください)。開いていたLICENSEファイルも、存在しないとして赤線で取り消されている点にも注目です。

図17:ブランチのチェックアウト
図17:ブランチのチェックアウト

ブランチをマージする

 mainブランチに戻ったので、workブランチの作業内容をマージしましょう。マージ(merge)とは、あるブランチの変更を他のブランチに取り込むことです。マージにより、workブランチの作業内容をmainブランチにも反映できるわけです。ソース管理ビューの[ミートボールメニュー]アイコンから、[ブランチ]-[ブランチをマージ...]を選択します。コマンドパレットにマージ元候補のブランチ一覧が表示されるので、workを選択します。すると、workブランチで追加したLICENSEファイルが取り込まれ、ファイルもテキストエディタに表示されるようになります。

図18:ブランチのマージ
図18:ブランチのマージ

マージのコンフリクトを解決する

 ここで、マージで起きがちなコンフリクトの解決を試してみます。コンフリクト(conflict)とは「競合」や「衝突」といった意味で、マージ元のブランチとマージ先のブランチにそれぞれ変更が発生してしまっている状態を指します。コンフリクトが発生すると、どの変更を採用するかを決めなければなりません。これを、mainブランチとworkブランチの双方に修正を加えて、それを解決する過程で見ていきましょう。

 まず、workブランチにチェックアウトしておきます。README.mdファイルに1行追加し、ステージング、コミットまで実行します(図19)。

図19:README.mdファイルの変更(workブランチ)
図19:README.mdファイルの変更(workブランチ)

 このままmainブランチにチェックアウトし、mainブランチの方でもREADME.mdファイルに修正を加えてステージング、コミットします。

図20:README.mdファイルの変更(mainブランチ)
図20:README.mdファイルの変更(mainブランチ)

 workブランチをmainブランチにマージします。想定通り「マージの競合があります。」と指摘されます(ファイル名も赤くなり「!」が付きます)。[Gitログを開く]でログを確認してもよいですが、ここではVSCodeの用意した手段でコンフリクトを解消してみましょう。[変更の表示]をクリックします(図21)。

図21:マージ競合の発生
図21:マージ競合の発生

 README.mdファイルのタブが赤くなり、「!」が表示されています(図21)。エディタ画面では背景に色が付いた箇所に、現在の変更(緑色。HEADと表示されている。mainブランチ)と入力側の変更(青色。workブランチ)が表示され、競合が発生していることを示しています。

図22:競合が発生している状態
図22:競合が発生している状態

 [マージ エディターで解決]をクリックしてみましょう。「マージ: README.md !」というタブがエディタグループに現れ、3分割されたテキストエディタが表示されます。「受信中」がマージ元(workブランチ)、「現在のマシン」がマージ先(mainブランチ)、「結果」は現在の作業内容です。オレンジ色の太い枠が競合の発生している部分で、そこにある[受信中を受け入れる][現在のマシンを受け入れる][組み合わせを受け入れる]をクリックすることで、それぞれworkブランチ、mainブランチ、main+workブランチの内容で「結果」を置き換えることができます。ここでは、3番目を選択してみました(図23)。

図23:マージエディター
図23:マージエディター

 [マージの完了]をクリックすれば、マージとコンフリクトの解消は終了です。メッセージ(「Merge branch 'work'」と入力されている)を確認してコミットしましょう(図24)。

図24:マージ結果のコミット
図24:マージ結果のコミット

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

今回登場のショートカットキー
機能 macOS Windows
コミットメッセージの編集 ⌘+[Enter] [Ctrl]+[Enter]

まとめ

 今回は、VSCodeにおけるソース管理機能として、Gitの連携機能について見てきました。Gitのソース管理の仕組みについての知識は必要ですが、コマンドをタイプすることなくGUIでソース管理できるのは便利ではないでしょうか。

 次回は、今回の続きとして、GitHub連携によるリモートリポジトリとのやり取り、そしてソース管理をさらに便利にする拡張機能を幾つか紹介します。

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

  • 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 Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook <個人紹介> WINGSプロジェクト所属のテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。

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

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

この記事をシェア

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

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング