Zenn
🎃

ETロボコンにおける開発環境 - Git関連のVSCode拡張機能を使う

2024/02/25に公開
開発環境
VS Code 拡張機能
etロボコン
tech

はじめに

この記事では、ETロボコン参加者がVisual Studio Code (VSCode) 上でGitを簡単に操作するための拡張機能を導入する方法を解説します。Source Treeなど他のツールを使っている方は、これによりVSCodeだけでGit操作が完結します。また、コマンドラインのみでGitを使っていた方には、より直感的な操作が可能になります。是非試してみてください。

想定読者

  • ETロボコンに参加する開発者
  • VSCodeを使用して開発する方

ETロボコンとは？

そもそも、ETロボコンとは何か？ということですが、ETロボコンは、2002年から開始されたソフトウェア重視のロボットコンテストであり、組込み技術者の育成を目的としています。このコンテストは、その長年にわたる開催と貢献により、経済産業大臣賞を受賞しています。

詳細は、下記を参照してください。
https://www.etrobo.jp/

ETロボコンにおける開発環境

前提として、ETロボコンの開発環境の概要は、以下の通りとなります。

  • WSL上のUbuntuを使用
  • 統合開発環境としてVisual Studio Codeを採用
  • プログラミング言語はC++/C
  • Unityで動作するシミュレータを利用
  • 実機はRaspberry Pi + SPIKE上で動作

これらの環境は、基本的に主催者から提供されます。

概要説明

まずは、Git

プロジェクトのソース管理にGitを使用します。GitHubを利用するのが、最も簡単な方法ですが、会社等からのアクセスが制限がある場合は、社内のGitLabを利用するか、自分たちでGitサーバを設置しましょう。

この記事は、既にGitサーバ環境が設定され、リポジトリがPC上にクローンされていることを前提としています。

フォルダ構成

etrobo
|-- workspace
|  |-- 開発プロジェクトフォルダ

ここで、etrobo2023フォルダがGitで管理される開発プロジェクトフォルダとなります。

導入する拡張機能

VSCodeでGit操作を容易にするため、以下の3つの拡張機能を導入します。

  • Git History
  • Git Graph
  • Git Lens

これらを導入することで、Source Tree等の外部ツールは不要になります。

導入手順

VSCodeにGitリポジトリを認識させる

VSCodeは自動的にGitリポジトリを認識します。左側のGitアイコンを選択すると、「SOURCE CONTROL REPOSITORIES」に認識されたリポジトリが表示され、「etrobo2023」を選択することでGit操作が可能です。

基本設定

VSCodeのTERMINALで以下のコマンドを実行して、Gitのユーザー名とメールアドレスを設定します。

git config --global user.name "Your Name"
git config --global user.email "youremail@example.com"
git config --global credential.helper store

Git History の導入

Git Historyを導入すると、プロジェクトの変更履歴を簡単に追跡できるようになります。VSCodeの拡張機能マーケットから「Git History」を検索し、インストールしてください。

使い方

ソースファイルを右クリックし、「Git View File History」を選択すると、そのファイルのコミット履歴が表示されます。

さらに、コミットを選択することで、そのコミットに含まれるファイルに対して、表示、作業フォルダとの比較、前のコミットとの比較、Historyの表示の操作ができます。

以下は、前のコミットとの比較です。

Git Graph の導入

Git Graphを導入すると、リポジトリのコミット履歴をグラフィカルに表示できるようになります。VSCodeの拡張機能マーケットから「Git Graph」を検索し、インストールしてください。

使い方

左のバーのGitを選んで、「SOURCE CONTROL REPOSITORIES」で対象のレポジトリを選択し、「SOURCE CONTROL」 で、「View Git Graph (git log)」 のアイコンを選択すると、右側にGraph表示されます。

Graph上の行を選択すると、さらに詳細な情報が表示されます。ここから、さらにファイルの差分表示も可能です。

Git Lens の導入

Git Lensは、コードエディタ内で直接、コミット履歴や変更点などを確認できるようにする強力な拡張機能です。VSCodeの拡張機能マーケットから「Git Lens」を検索し、インストールしてください。

使い方

ソースコード上にカーソルを合わせると、その行の履歴や、誰がいつ編集したかなどの情報が表示されます。これにより、変更履歴を簡単に追跡でき、コードの理解が深まります。

おわりに

VSCode上でGitの操作を完結させることは、開発の生産性を向上させる素晴らしい方法です。これらの拡張機能を利用することで、Gitの使い方にさらに習熟し、開発プロセスを加速させることができます。ぜひ、これらの拡張機能を導入して、より効率的な開発環境を構築してください。

Discussion