MENU

IBM iユーザーに捧げるVisual Studio Code入門|Visual Studio CodeでGitを利用する◎特集 Part4

text:小川 誠 ティアンドトラスト

 

Gitに関する基本的な解説は、「Gitの基礎知識 ~ よく使用する用語の解説と基本機能 | IBM iユーザーに捧げるGit入門 ❷」に詳しいので、ここではVSCodeと Gitの連携部分を見ていこう。

必須の拡張機能とGitの導入

まずVSCodeでGitを利用する場合、必須と言ってよい拡張機能が2つある。GitLensとGit Graphである。事前にこれをインストールする。

次にGitを導入する。VSCode のアクティビティバーでGitアイコンをクリックした際、サイドバーに「有効なGitインストールが検出されませんでした」と表示された場合は、ここでインストールしよう。

サイドバー下部に表示されている「gitをインストール」リンクをクリックすると、ブラウザが立ち上がり、Gitのページ(https://git-scm.com )が表示されるので、インストール・ファイルをダウンロードしてインストールする。この手順も数多くネットで紹介されているので、そちらを参照してほしい。

VSCode が起動していたら、ここで再起動しておく。

リポジトリの作成

続いてFFRPGSRCフォルダに、Gitのリポジトリを作成する。アクティビティバーでGitのアイコンをクリックして表示されるページで、「リポジトリを初期化する」をクリックする。

これでFFRPGSRCフォルダ内に.gitフォルダが作成される。リポジトリの作成は、このワンアクションのみである。

サイドバーには、今作成したリポジトリにまだ登録されていないファイルの一覧が表示される。アクティビティバーのGitアイコンには、変更ファイルの数が右下に表示されるので、サイドバーに別の情報が表示されていたとしても、コミットしていないファイルがあるかどうかはこれで確認できる(図表1)。

図表1 変更ファイルの確認

今回はGitのインストール直後で、コミットするユーザーを特定する情報が未登録なので、ここで登録しておこう。

ステータスバーに表示されているGit Graphをクリックして、Git Graphを表示し(Error が表示されるはずなので、Dismissボタンをクリックして閉じる)、右上のギア・アイコンをクリックする。

するとRepository Settingsが表示されるので、「+Add User Details」をクリックし、名前とメール・アドレスを入力してから「Set User Details」をクリックし、登録を完了する(図表2、Repository Settingsは×で閉じる)。Git Graphはいったん閉じておく。

図表2 ユーザーネームとメールアドレスを入力

変更をコミットするには、まずステージングエリアに追加する必要があるが、これは各ファイルにカーソルを合わせると表示されるプラス記号(+)をクリックして、1つずつ追加するか、もしくは変更と表示されている行をポイントして表示されるプラス記号ですべての変更ファイルを追加する。その結果、図表3のようになるはずだ。

図表3 変更ファイルをステージングエリアに追加

それではコミットしてみよう。Gitはコミット時に必ずコミットメッセージを指定する必要があるので、メッセージを入力後、上部のチェックマークをクリックする。

コミットの状態はGit Graphで確認できるので、再度表示してみよう(図表4)。

図表4 コミットの状態を確認

最初のコミット直後なので、ブランチはmasterもしくはmainだけが存在している。青丸が現在チェックアウトされているコミットである。これはステータスバーの左側でも確認可能なので、自分がどのブランチで作業しているかはこれらの情報で確認しよう。

VSCodeでのGitの基本操作

それでは、Gitを使った日常操作を簡単に説明しよう。

ソースコードの修正

アクティビティバーの最上段にあるエクスプローラー・アイコンをクリックし、c:\FFRPGSRCフォルダを表示する。続いてhelloword.rpgleをクリックして編集モードで開き、ソースを変更する(今回はdsplyのメッセージにiMagazineという文字列を追加)。

修正が完了したら、Ctrl+Sで保存する。この時点でSFTPを使用して、IBM iにソースがプッシュされる。

保存が完了すると、アクティビティバーのGitアイコンの右下に1が表示される。これは、Git にコミットしていない変更ファイルが1つあることを意味する。このアイコンをクリックする(図表5)。

図表5 Gitにコミットしていない変更ファイルが1つある

修正したhelloworld.rpgleが表示されていることを確認できる。

変更部分の確認

次に、どの部分が修正されたかを確認してみよう。サイドバーに表示されているhelloworld.rpgleをクリックすると、エディタ部にコードの比較が表示される(図表6)。

図表6 修正前・後のコードを比較

左側が修正前、右側が修正後のコードである。dsplyメッセージ内にiMagazine という文字列が追加されていることを確認できる。

変更部分の確認は頻繁に行うので、使い方をぜひ覚えておきたい。確認できたら、タブ横の×をクリックして閉じる。

コミット前に修正を破棄

いろいろと修正したものの、それらの変更をすべて破棄したいというケースもあるだろう。前回のコミット以降に変更した箇所であれば、ファイル単位でその変更を破棄することが可能だ。

プラス記号の左側のアイコンをクリックすると、「helloworld.rpgleの変更を破棄しますか?」と確認メッセージが表示される。ここで破棄ボタンをクリックすることで、変更前の状態に戻せる。ただしこの破棄は元に戻せないので、注意して操作する。

コミット

それでは再度dsplyメッセージを変更して、今度はコミットしてみよう。コミット後にGit Graphを表示すると、コミットが2つあるのがわかる。下に行くほど過去のコミットになる(図表7)。

図表7 Git Graphで2つのコミットを表示

ここでわかるのは、masterブランチは最新のコミットを表しており、ワークツリーにチェックアウトされているのもmasterブランチである(青丸)ということだ。

Git Graph

Git Graph はコミットの歴史を表示するだけでなく、さまざまな情報を確認したり、Git の操作を行うこともできる。たとえば前回のコミットから変更されたファイル一覧を表示する場合は、コミットメッセージをクリックすればよい。

いつ、誰がコミットしたか、その時のコミットメッセージ、変更されたファイル名がここですべて確認できる(図表8)。

図表8 変更内容を表示

またファイル名をクリックすれば、変更箇所の確認も可能である。

初期コミットの状態をチェックアウトしたい場合は、初期コミット行で右クリックして、表示されるメニューでCheckoutを選択する。初期コミットはブランチがないが、それでもチェックアウトするかと聞いてくるので 「Yes,Checkout」をクリックする。

チェックアウトが完了すると、ステータスバーの左側が初期コミットのハッシュIDの先頭の一部になっている。またGit Graphでも、初期コミットの前に青丸が表示される(図表9)。

図表9 チェックアウトを完了

実際のコードが戻っているかどうかは、helloworld.rpgleをエディタで開けば確認できる。

master ブランチをチェックアウトする場合は、Git Graphでmasterブランチを右クリックし、Checkout Branchをクリックする。

今回は確認のためにブランチでないコミットをチェックアウト(detached HEAD)したが、この状態のままでファイルの修正およびコミットすると、ブランチがないコミットとなるので注意が必要だ。

リポジトリのクローン

次に、リモートリポジトリをクローンする方法を紹介しよう。「特集 IBM iユーザーに捧げるGit入門」で使用したリポジトリcontoslack をローカルにクローンしてみる。このリポジトリは公開していないので、ここでは手順だけを確認してほしい。

最初に「表示」-「コマンドパレット」をクリックしてコマンドパレットを表示し、Git Clone と入力して表示されたGit:クローンをクリックする。

リポジトリ URL(http://xxx.xxx.xxx.xxx/gitlab/imagazine/contoslack.git)を指定して、Enterキーを押す。

フォルダの選択ウィンドウが表示されるので、c:\を選択する。その後リモートリポジトリにアクセスするためのユーザー名とパスワードを要求する画面が表示されたら、指示に従い入力する。

クローンが成功したら、右下にメッセージが表示されるので、「開く」もしくは「新しいウィンドウで開く」をクリックする。図表10のように表示されたら、完了である。

図表10 クローンを完了

次に、クローンしたリポジトリをGit Graphで確認してみよう。ステータスバーのGit Graphをクリックすると、コミットが2つあることを確認できる(図表11)。

図表11 Git Graphで2つのコミットを確認

ブランチはmasterとhotfix-108の2つがあること、現在masterがチェックアウトされていることを確認できる。ただし、hotfix-108はリモートにしか存在していない(origin/hotofix-108)。

それでは、hotofix-108 をチェックアウトしてみよう。origin/hotofix-108 で右クリックし、checkout Branch を選択すると、図表12のような確認画面が表示される。

図表12 確認画面

ブランチ名は変更せず、Checkout Branchボタンをクリックしてチェックアウトする(図表13)。

図表13 チェックアウト

チェックアウトと同時に、ブランチ表記がorigin/hotfix-108から、hotfix-108 | origin に変わったのが確認できる。これは、ローカルとリモート(origin)の両方にブランチが存在していることを意味する。

それでは、hotfix-108で変更した箇所をエディタで表示してみよう。変更したのは AccessTokenの値だが、その行にカーソルを置くと、右側にうっすらと表示されている文字がある(図表14)。

図表14 GitLensの1機能

3カ月前に「#108 対応」というコミットメッセージでコミットされたことがエディタに情報として表示されている。

実はこれを表示しているのは、最初にインストールしたGitLens拡張機能である。GitLensはそのほかにも、さまざまな機能を提供している。

このようにVSCodeでも、IBM iのソースコードをGitでバージョン管理できる。早く開始すれば、それだけ変更履歴が蓄積されていく。まだバージョン管理していないなら、1日も早く開始するように推奨する。

 

著者|
小川 誠氏

ティアンドトラスト株式会社
常務取締役

1989年、エス・イー・ラボ入社。その後、1993年にティアンドトラストに入社。システム/38 から IBM i まで、さまざまな開発プロジェクトに参加。またAS/400 、IBM i の機能拡張に伴い、他プラットフォームとの連携機能開発も手掛ける。IBM i 関連の多彩な教育コンテンツの作成や研修、セミナーなども担当。2021年6月から現職。

[i Magazine・IS magazine]

新着