【VS Code】第1回「VS Codeをインストールし、画⾯操作のイメージをつかもう」

はじめに

Visual Studio Code（以下VS Code）をIBM i の開発で使う時代がやってきました。そもそも、VS Codeは開発だけでなく、⾊々な業務のシーンで使える便利なエディターです。

開発者から愛され、⽀持されているVS Codeを使って、IBM i エンジニア⼈⽣をより楽しくできたらと思い、本連載のタイトルをつけました。初めてVS Codeを触る⽅向けに、1つずつご説明していきたいと思いますので、どうぞお付き合いください。

※本記事を印刷してご覧になりたい場合は、iWorld会員向けに公開しているPDF版「VS Codeをインストールし、画⾯操作のイメージをつかもう」をご利用ください。

１．VS Codeをインストールする

最初の⼀歩はツールのインストールから、ということで、早速VS Codeをインストールします。
VS Codeインストールリンクにアクセスし、使⽤しているPCのOSに合わせてインストーラーをダウンロードしてください。

Windowsユーザーの場合

インストーラー（例︓VS CodeUserSetup-x64-1.90.0.exe）をダブルクリックして、インストールを開始します。
使⽤許諾契約書を確認後、「同意する」を選択し、「次へ」をクリックします。

デスクトップ上にアイコン作成をする場合は追加でチェックを⼊れてください。
「次へ」をクリックします。

インストール準備完了の画⾯で、「インストール」をクリックします。

インストール完了です。

２．VS Codeのセットアップ⽅法

VS Codeの⽇本語化

早速インストールしたVS Codeを開いてみます。
デスクトップ上にアイコンを作成している⽅は、アイコンをダブルクリックしてください。
デスクトップ上にアイコン作成していない方は、Windowsのアプリ検索から「Visual Studio Code」を検索して起動してください。
以下が初回開く画⾯です。（VS Codeのバージョンによって異なる可能性がございます）

英語表記となっているため、触りづらさを感じる⽅が多いと思います。そこで、最初に、⽇本語拡張機能をインストールしましょう。

拡張機能とは

拡張機能とは、VS Codeにさまざまな機能を追加できる無償のプラグイン群のことです。
Visual Studio Marketplace（要 Microsoftアカウントによるログイン）から⼊⼿ができます。
拡張機能は、VS Code上からもインストールができます。

上の画像中で、四角で囲んである「Extensions」のアイコンをクリックします。
下の画像中で、四角で囲んである検索バーに「Japanese」を⼊⼒し、検索バーの下に表示される検索結果を確認します。
「Japanese Language Pack for Visual Studio Code」が表示されたら「Install」ボタンをクリックしてください。

VS Codeを再起動するアナウンスがポップアップで表⽰されます。「Change Language and Restart」ボタンをクリックしてください。

ただ、実際には、再起動と書かれていたにも関わらず起動しません。

改めてVS Codeを起動して、⽇本語化されたことを確認します。

Japanese Language Pack for Visual Studio Codeの他に「VS Code-icons」もインストールしておきます。

拡張機能名	拡張機能概要
Japanese Language Pack for Visual Studio Code	VS Codeの⽇本語対応
VS Code-icons	ファイル、フォルダーにリアルなアイコンが使われます。

３．画⾯構成を理解する

VS Codeの主な領域について確認をします。全画⾯構成でなく主要なところのみピックアップしています。
本連載の中で必要な画⾯構成部分は、その都度追加で説明いたします。

アクティビティバー、サイドバー

規定値で、⼀番左側にあるアイコンのエリアはアクティビティバーという名称です。
サイドバーはアクティビティバーに対応する機能が表⽰されます。

エクスプローラー

エクスプローラーは、VS Codeで開いているフォルダーのファイルを表⽰できます。
アクティビティバーで、エクスプローラーをクリックします。

「フォルダーを開く」を選択します。
今回は、Windows PCのCドライブ直下にある、iWorld というフォルダーを選択します。

「新しいファイル」のアイコンをクリックします。

「test.text」と⼊⼒してファイルを作成します。

検索

フォルダー全体から⽂字列検索が可能です。また、⽂字の⼀括置換もできます。
以下の画像では、iWorldというフォルダーの中から⽂字列の検索をしています。

エディター

右側のエリアがエディター領域です。
今回はテキストファイルを作成しましたが、IBM i のソース編集もこのエリアで⾏います。

ステータスバー

⼀番下のエリアです。このエリアは、拡張機能の使⽤状況によって増減します。
利⽤⾔語、⽂字コードの確認、カーソルのポジション等が確認できます。

４．VS Codeの知っておきたいワークスペースを理解する

説明編

VS Codeには以下の概念があります。

ウィンドウ

VS Codeを⽴ちあげたときの全体のエリアのことです。

ワークスペース

こちらが少々難しく、公式ドキュメントの記載の翻訳は以下の通りです。
「VS Code ウィンドウ (インスタンス) で開かれる 1 つ以上のフォルダーのコレクションです。」
（公式ドキュメント「What is a VS Code “workspace”?」より）

ワークスペースの種類

Single-folder workspaces
1つのフォルダーをVS Codeのワークスペースとする場合は、フォルダーをVS Codeで開くだけです。
ワークスペース固有の設定（グローバルユーザー設定ではなく）等、このフォルダー固有の構成、設定を追加できます。
Multi-root workspaces
複数の異なるフォルダーを同じワークスペースの⼀部として構成することができる機能です。

実践編

Single-folder workspacesの作り⽅

すでに開いているC:\iWorldというウィンドウで、ワークスペースの保存をするだけです。
「ファイル」メニューにある「名前を付けてワークスペースを保存」をクリックし、ワークスペースを保存します。

保存先のフォルダーに「.code-workspace」という拡張⼦のファイルができています。

Single-folder workspacesの作り⽅

「C:\iWorld2」というフォルダーを作成しておき、新しいウィンドウで開きます。
「ファイル」メニューにある「フォルダーをワークスペース」に追加をクリックします。

「C:\iWorld3」を追加します。

「ファイル」メニューにある「名前を付けてワークスペースを保存」をクリックして、ワークスペースを保存します。

「iWorld2.code-workspace」の中⾝を確認すると、「C:\iWorld2」と「C:\iWorld3」がマルチワークスペース化されたことがわかります。

ワークスペースは、Single-folder workspacesを使って慣れていき、開発のワークフローによってMulti-root workspacesを試すことをお勧めします。本連載は、Single-folder workspacesを利⽤する前提で執筆しておりますが、念のため、Multi-root workspacesも紹介させていただきました。

５．コマンドパレットを理解する

コマンドパレットとは

VS Codeの特徴の1つで、コマンドパレットはF1キー（すべてのOSで共通しています。または Windows／LinuxではCtrl ＋ Shift ＋ Pキー、macOSではCtrlでなく、Command ＋ Shift ＋ P）をクリックすると、VS Codeの上部に開かれるボックス状のUIのことです。