Codeで本稿を編集している様子を以下に示す(ファイルやフォルダをオープンする方法については後述する)。以下の画像は筆者が日常的に使用している設定のウィンドウだ(画面のカラー設定、行末での折り返し、ファイル/フォルダのアイコン表示など)。左からアクティビティーバー、サイドバー、エディタ。画面最下部にはステータスバーが表示されている。Codeに統合されたターミナル(ここではコマンドプロンプト)が表示されている。この他にもデバッグ用のパネル、タスク(定型処理を自動化したもの)を実行した際の出力を表示するパネルなど、多くの種類のパネルが用意されている。簡単に説明しておくと、アクティビティーバーはサイドバーに表示する要素を選択したり、サイドバーの表示/非表示を切り替えたりするために使用する。サイドバーにはファイルを操作するための「エクスプローラー」やファイルから横断的に検索を行う「検索」など、何らかの処理を行うためのUI要素が表示される。これを「ビュー」と呼ぶ。エディタはプログラマーが作業を行うための主要な領域だ。Codeではエディタを「エディタグループ」という論理的なグループにまとめることができる。各エディタグループにはファイルをタブ形式に表示できる。ステータスバーにはさまざまな情報が表示される。ウィンドウ右下のパネル部分にはPowerShell(Windows)、シェル(macOS/Linux)、デバッグ時のデバッグ情報、タスク実行時の出力など、さまざまなパネルを表示できる。Bashから選択できるようになっている。以下では、それぞれについて少し詳しく見ていこう。Codeのウィンドウ左端にはアクティビティーバーがある。ここでその隣にあるサイドバーにどの「ビュー」を表示するかを選択する。アクティビティーバーで[エクスプローラー]アイコンをクリックすると、サイドバーには[エクスプローラー]ビューが表示されるといった具合だ。他には、検索を行う[検索]ビュー、Gitをはじめとするソースコード管理システム関連の操作を行う[ソース管理]ビュー、デバッグで使用する[デバッグ]ビュー、拡張機能関連の操作を行う[拡張機能]ビューを切り替えて表示できる。Codeのアップデートがリリースされた際に、そのことを通知するアイコンも用意されている。インストールしている拡張機能が更新された場合も同様に、アクティビティーバーの[拡張機能]アイコンで通知が行われ(て、デフォルトの設定では、自動的にアップデートが適用され)る。拡張機能によっては、ここに独自にカスタムアイコンを表示し、それがクリックされるとサイドバーにカスタムビューを表示するものもある。FUNCTIONS]ビューサイドバーの表示/非表示もアクティビティーバーで切り替えられる(例えば、[エクスプローラー]ビューがサイドバーに表示されている状態で、これに対応するアイコンをアクティビティーバーでクリックするとサイドバーが非表示になる)。[エクスプローラー]ビューではファイルやフォルダのオープン/クローズ、サブフォルダのブラウズを行える。1.18以降では「複数のフォルダをルート」として[エクスプローラー]にファイルやフォルダを表示できる。これを「マルチルートワークスペース」と呼ぶ(後述)。Codeではなく)VSで1つのソリューションに複数のプロジェクトを格納して、ソリューションエクスプローラーに表示するのと似ている。先ほど見た画面では[エクスプローラー]ビューに[開いているエディター]と[VSCODE]という2つの項目が表示されている。[開いているエディター]にはユーザーが現在開いているエディタ(タブ)がエディタグループごとに表示される。Codeで現在オープンしているフォルダの「VSCode」を表していて、その下にはVSCodeフォルダにあるフォルダやファイルが表示されている。Codeでまだフォルダを開いていない場合には以下の画面のように[エクスプローラー]ビューに[フォルダーを開く]ボタンが表示される。これをクリックするとフォルダをオープンするダイアログが表示される。Codeでは実際に編集を行うファイルやウエルカムページなどを表示した1つ1つのタブのことを「エディタ」と呼び、それらを論理的なグループにまとめたもののことを「エディタグループ」と呼ぶ。本家VSでもおなじみのプレビューエディタ機能もある。本稿ではエディタグループであることを強調したい場合には「エディタグループ」と、通常は単にエディタと表示することにする。以下に複数のエディタグループに表示されている複数のエディタを示す。タブ表示されているエディタ(ファイル)とエディタグループ上の画像で薄い赤/水色/緑/茶色で表示されているのがエディタグループだ(合計4つ)。各エディタグループの上部にはタブが表示されている。[エクスプローラー]ビューの[開いているエディター]欄にはエディタグループごとに現在開いているエディタが表示されることにも注意しよう。上の画面では[グループ1]〜[グループ4]の4つのエディタグループが表示されている。1.25では上に示したようなグリッド形状でのエディタのレイアウトが可能となっている(1.24でプレビュー機能として導入され、1.25で正式導入)。以前はエディタグループは最大で3つまでだったが、この制限も取れている。layout」を参照されたい。Codeの[表示]メニューには、どんなレイアウトにするかを選択する項目もある。エディタグループを分けて、エディタを表示するにはタブが表示されている領域の右端にある[エディターの分割]ボタンをクリックするか、[エクスプローラー]ビューで表示したいファイルを右クリックしてコンテキストメニューから[横に並べて開く]を選択するのが簡単だ。あるエディタグループから、タブをドラッグ&ドロップする方法もある。1.25なら縦横に自由にレイアウトしたりも可能だ。縦/横を切り替えるには、[エクスプローラー]ビューの[開いているエディター]にある切り替え用のボタンを使うのが簡単だ(コマンドパレットを使用してもよい)。縦横のレイアウトを切り替えるボタンファイルやタブをドラッグ&ドロップすることにより、[エクスプローラー]ビューから任意のエディタグループで開いたり、現在開いているファイルをエディタグループ間で移動したりできる(あるいは、Windowsエクスプローラーなどの外部プログラムからファイルをドロップもできる)。[エクスプローラー]ビューで複数のファイルやフォルダを選択して、それらをエディタにドラッグ&ドロップすることでまとめて開くことも可能だ。Codeのウィンドウ間でのファイルやタブのドラッグ&ドロップも可能になっている。エディタの右端には通常のスクロールバーとその脇に「ミニマップ」と呼ばれるUIが表示されている。これはファイルの内容のおおまかなイメージと、エディタに現在どの部分が表示されているかを示すものだ。大きなサイズのプログラムコードを編集しているときに、ファイルにおける現在のカーソル位置をイメージしたり、ミニマップをスクロールしてファイル内を移動するときに目当ての位置を把握しやすくなったりする。ミニマッププレビューエディタ機能についても触れておこう。これは[エクスプローラー]ビューでシングルクリックしたファイルを「プレビューエディタ」に一時的に表示する機能だ。あるファイルをプレビューエディタに表示しているときに、別のファイルを[エクスプローラー]ビューで「シングルクリック」すると、今度はそのファイルがプレビューエディタに表示される。[エクスプローラー]ビューでファイルをダブルクリックするか、プレビューエディタのタブをダブルクリックすると、それが通常のエディタに表示される。プレビューエディタのタブにはイタリック体でファイル名が、通常のエディタのタブには通常書体でファイル名が表示される。[エクスプローラー]ビューでファイルをクリックしたときの挙動に違和感を覚えたら、タブに表示されているファイル名の書体を確認して、ファイルがどちらのエディタに表示されているかを確認してみよう。通常のエディタとプレビューエディタ[vscode.txt]タブは通常のエディタ(通常書体)。[hogehoge.txt]タブはプレビューエディタ(イタリック体)。[エクスプローラー]ビューでの表示も同様なことに注意。幾つものファイルの内容を連続して確認したいときにはプレビューエディタを使うと、タブを幾つも開いて後でそれを閉じたりしないで済む。逆に「このファイルはエディタで常に開いておきたい」というときには、それをダブルクリックすることで、一時的に確認するファイルとは独立して、通常のエディタに表示しておける。単独のエディタとエディタグループの使い分けについては、ファイルの内容を並べて参照したいときにはエディタグループを使うことがまず挙げられる。後は、自分の作業内容に応じて、論理的にファイル(エディタ)をグルーピングしたいときには、特定のエディタグループにタブを開いていくといった使い方が考えられる(例えば、このグループにはHTMLファイルを、別のグループにはJavaScriptファイルを表示するなど)。Codeの画面表示とは直接は関係ないが、先ほど少し触れた「マルチルートワークスペース」についても簡単に触れておこう。マルチルートワークスペースとは、「1つのウィンドウに複数のプロジェクト(プロジェクトフォルダ)をまとめて表示できる」機能のこと。特定のフォルダから木構造でプロジェクトが展開されているフォルダ構成であれば木構造の頂点(ルート)となるフォルダを開いてワークスペースとすればよいが、そうではなく個別のプロジェクトフォルダを論理的に1つの「ワークスペース」として管理するための機能だ。Codeに複数のフォルダをルートとして追加するには、[ファイル]メニューの[ワークスペースにフォルダーを追加]を選択するか、[エクスプローラー]ビューを右クリックしてコンテキストメニューから[ワークスペースにフォルダーを追加]を選択するか、コマンドパレットで「workspace」などと入力して[ワークスペース:ワークスペースにフォルダーを追加]を選択してから追加するフォルダを指定するか、Windowsエクスプローラーから直接フォルダを[エクスプローラー]ビューにドラッグ&ドロップする。-add」に続けてワークスペースに追加するフォルダを複数指定してもよい。実際に複数のフォルダを追加したところを以下に示す。マルチルートワークスペースマルチルートワークスペースからフォルダを削除するには、削除したいフォルダを[エクスプローラー]ビューで右クリックしてコンテキストメニューから[ワークスペースからフォルダーを削除]を選択すればよい。コマンドパレットで「workspace」などと入力して[ワークスペース:ワークスペースからフォルダーを削除]を選択し、削除対象のフォルダを指定してもよい。[エクスプローラー]ビューにフォルダを追加してマルチルートワークスペースにすると、[ファイル]メニューの[フォルダーを閉じる]が[ワークスペースを閉じる]に変わる。ワークスペースを閉じる際には、そのフォルダ構成を保存するかを問い合わせるダイアログが表示される。マルチルートワークスペースを恒常的に使用するのであれば、名前を指定して「.code-workspace」拡張子を持つファイルを保存しておこう。その後は、Windowsエクスプローラーでそのファイルをダブルクリックすれば、マルチルートワークスペースを読み込んでくれる。既存のプロジェクトを、現在開発中のプロジェクトで参照したい場合などには、マルチルートワークスペースは便利に使えるだろう。次に、ステータスバーやコマンドパレット、その他、知っておくと便利なウィンドウを幾つか紹介しよう。メールマガジンをご購読ください。申し込みページへITmediaはアイティメディア株式会社の登録商標です。