特集
» 2017年09月08日 05時00分 公開

特集:Visual Studio Code早分かりガイド:Visual Studio Codeの使い方、基本の「キ」 (2/6)

[かわさきしんじ,Insider.NET編集部]

ウエルカムページ

 VS Codeを起動すると、以下のような[ようこそ]タブ(ウエルカムページ)が表示される(されないときに[ようこそ]タブを表示するにはメニューバーの[ヘルプ]−[ようこそ]を選択する)。ちなみに以下の画像はファイル/フォルダを何も開いていない状態だ。

ウエルカムページ ウエルカムページ

 ウエルカムページからは、VS Codeが持つ各種機能へ簡単にアクセスできる。例えば、左上の[開始]にはファイル/フォルダ/Gitリポジトリにあるファイル/フォルダを開いて編集を開始するためのリンクがあり、その下の[最近]には最近使用したフォルダが表示されている。[ヘルプ]にあるリンクをクリックすると、対応するVS CodeドキュメントやWebページがブラウザに表示される。右側には[カスタマイズ]欄と[学ぶ]欄があり、次のようなリンクが並んでいる。

  • [ツールと言語]: [拡張機能]ビューが開き、そこにJavaScript、Pythonなどの言語サポートを提供する拡張機能が一覧表示される
  • [キーボード ショートカットをインストールします]: [拡張機能]ビューが開き、そこにキーバインドを好みのテキストエディタ(Vimなど)と同じものに変更するための拡張機能が一覧表示される
  • [配色テーマ]: コマンドパレットに現在インストールされている配色テーマが一覧表示される(好みのテーマを選択可能)
  • [すべてのコマンドの検索と実行]: VS Codeの全機能にアクセス可能なコマンドパレットが表示される
  • [インターフェイスの概要]: VS Codeのウィンドウ左端にあるアクティビティーバーなどの名称や機能などがざっくりと紹介される
  • [対話型プレイグラウンド]: VS Codeの基本的な使い方を学習するタブが表示される(ただし、英語)

 今も述べたが、VS Codeはコマンドパレットを使うことでキーボードからだけで全ての機能にアクセスできる、いわば「キーボード指向」なエディタという特性を持つが、ウエルカムページを使うことで、マウスでも快適にこれらの機能にアクセスできるようになっている。

 次に、実際にVS Codeを利用している画面と、そのUI構成を見てみよう。

VS Codeの画面構成

 VS Codeで本稿を編集している様子を以下に示す(ファイルやフォルダをオープンする方法については後述する)。なお、以下の画像は筆者が日常的に使用している設定のウィンドウだ(画面のカラー設定、行末での折り返し、ファイル/フォルダの隣のアイコン表示など)。

VS Codeの画面構成 VS Codeの画面構成
左からアクティビティーバー、サイドバー、エディタ。画面最下部にはステータスバーが表示されている。エディタの下にあるのはパネルといい、ここではVS Codeに統合されたターミナルとしてPowerShellが表示されている。この他にもデバッグ用のパネル、タスク(定型処理を自動化したもの)用のパネルなど、多くの種類のパネルが用意されている。

 簡単に説明しておくと、アクティビティーバーはサイドバーに表示する要素を選択したり、サイドバーの表示/非表示を切り替えたりするために使用する。サイドバーにはファイルを操作するための「エクスプローラー」やファイルから横断的に検索を行う「検索」など、何らかの処理を行うためのUI要素が表示される。これを「ビュー」と呼ぶ。エディタはプログラマーが作業を行うための主要な領域だ。

 なお、VS Codeではエディタを「エディタグループ」という論理的なグループにまとめることができる(エディタグループは最大3つまで作成可能)。各エディタグループにはファイルをタブ形式に表示できる。ステータスバーにはさまざまな情報が表示される。

 ウィンドウ右下のパネル部分にはPowerShell(Windows)、シェル(macOS/Linux)、デバッグ時のデバッグ情報、タスク実行時の出力など、さまざまなパネルを表示できる。なお、Windowsでは統合ターミナルで使用するシェルをPowerShell/コマンドプロンプト(cmd.exe)/Bash on Ubuntu on WindowsのBash/Git Bashから選択できるようになっている。

 以下では、それぞれについて少し詳しく見ていこう。

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

 VS Codeのウィンドウ左端にはアクティビティーバーがある。ここでその隣にあるサイドバーにどの「ビュー」を表示するかを選択する。例えば、アクティビティーバーで[エクスプローラー]アイコンをクリックすると、サイドバーには[エクスプローラー]ビューが表示されるといった具合だ。他には、検索を行う[検索]ビュー、Git関連の操作を行う[ソース管理]ビュー、デバッグ関連の情報が表示される[デバッグ]ビュー、拡張機能関連の操作を行う[拡張機能]ビューを切り替えて表示できる。

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

 アクティビティーバーの最下部にはVS Codeのアップデートがリリースされた際に、そのことを通知するアイコンも用意されている。以前はウィンドウ上部にメッセージが表示されていたが、これがプログラマーにとっては煩わしく感じられることがあったので、より控えめな形で通知を行うようになったとのことだ。また、既にインストールしている拡張機能が更新された場合も同様に、アクティビティーバーの[拡張機能]アイコンで通知が行われる。

 [エクスプローラー]ビューではファイルやフォルダのオープン/クローズ、サブフォルダのブラウズを行えるので、これだけで取りあえずのファイル操作が行えるようになっている。また、サイドバーの表示/非表示もアクティビティーバーで切り替えられる(例えば、[エクスプローラー]ビューがサイドバーに表示されている状態で、これに対応するアイコンをアクティビティーバーでクリックするとサイドバーが非表示になる)。

 上記画面では[エクスプローラー]に[開いているエディター]と[VSCODE]という2つの項目が表示されている。[開いているエディター]にはユーザーが現在開いているエディタ(タブ)がエディタグループごとに表示される。これに対して、[VSCODE]という項目はVS Codeで現在オープンしているフォルダの「VSCode」を表していて、その下にはVSCodeフォルダにあるフォルダ(.vscode/test)やファイル(.vscodeフォルダの下のsettings.jsonファイルやhogehoge.txt/vscode.txt/vsctest.cs/vsctest.jsの各ファイル)が表示されている。

 VS Codeでまだフォルダを開いていない場合には以下の画面のように[フォルダーを開く]ボタンがあるので、これをクリックするとフォルダをオープンするダイアログが表示される。

[フォルダーを開く]ボタン [フォルダーを開く]ボタン

エディタ

 前述の通り、VS Codeでは実際に編集を行うファイルやウエルカムページなどを表示した1つ1つのタブのことを「エディタ」と呼び、それらを論理的なグループにまとめたもののことを「エディタグループ」と呼ぶ。また、本家VSでもおなじみのプレビューエディタ機能もある。本稿ではエディタグループであることを強調したい場合には「エディタグループ」に、通常は単に「エディタ」と表示することにする。以下に複数のエディタグループに表示されている複数のエディタを示す。

タブ表示されているエディタ(ファイル)とエディタグループ タブ表示されているエディタ(ファイル)とエディタグループ

 上の画像で薄い赤と薄い水色で表示されているのがエディタグループだ。上部にはタブ形式でエディタ(ファイル)が表示されている。[エクスプローラー]ビューの[開いているエディター]欄にはエディタグループごとに現在開いているエディタ(ファイル)が表示されることにも注意しよう。例えば、上の画面の[左]と[右]の2つのエディタグループが表示されている(以下に示すように3つのエディタグループを表示した場合には[左][中央][右]となる)。

 エディタグループは同時に3つまで画面に表示可能だ(以下の画面)。分割表示するには、エディタグループの右上にある[エディターの分割]ボタンをクリックするか、[エクスプローラー]ビューで表示したいファイルを右クリックしてコンテキストメニューから[横に並べて開く]を選択する。

エディタグループを3つ表示したところ エディタグループを3つ表示したところ
ここではサイドバーの[エクスプローラー]ビューを非表示にしている。上述した通り、サイドバーの表示/非表示の切り替えにはアクティビティーバーのアイコンを使用する。

 ファイルやタブをドラッグ&ドロップすることにより、[エクスプローラー]ビューから任意のエディタグループで開いたり、現在開いているファイルをエディタグループ間で移動したりできる(あるいは、Windows Explorerなどの外部プログラムからファイルをドロップもできる)。

 また、あるエディタグループの右上にある[…]ボタンをクリックしてコンテキストメニューから[開いているエディターを表示]を選択すると、そのグループで開かれているファイルが後述するコマンドパレットに表示される。

[開いているエディターを表示]を選択するとコマンドパレットにエディタが一覧表示される [開いているエディターを表示]を選択するとコマンドパレットにエディタが一覧表示される

 エディタグループは横に分割しても表示できる(これまでに見てきたのは「縦レイアウト」=縦に分割)。簡単にこれを行うには、[エクスプローラー]ビューの[開いているエディター]欄にある[エディター グループの縦レイアウト]ボタン/[エディター グループの横レイアウト]ボタンをクリックする(同一のボタンでトグル動作する)。

エディタグループのレイアウトを切り替える
レイアウトが切り替ったところ エディタグループのレイアウトを切り替える

 最後にプレビューエディタ機能についても触れておこう。これは[エクスプローラー]ビューでシングルクリックしたファイルを「プレビューエディタ」に一時的に表示するという機能だ。

 あるファイルをプレビューエディタに表示しているときに、別のファイルを[エクスプローラー]ビューでシングルクリックすると、今度はそのファイルがプレビューエディタに表示される。[エクスプローラー]ビューでファイルをダブルクリックするか、プレビューエディタのタブをダブルクリックすると、それが通常のエディタに表示される。プレビューエディタのタブにはイタリック体でファイル名が、通常のエディタのタブには通常書体でファイル名が表示される。[エクスプローラー]ビューでファイルをクリックしたときの挙動に違和感を覚えたら、タブに表示されているファイル名の書体を確認して、ファイルがどちらのエディタに表示されているかを確認してみよう。

通常のエディタとプレビューエディタ 通常のエディタとプレビューエディタ
[vscode.txt]タブは通常のエディタ(通常書体)。[hogehoge.txt]タブはプレビューエディタ(イタリック体)。[エクスプローラー]ビューでの表示も同様なことに注意。

 幾つものファイルの内容を連続して確認したいときにはプレビューエディタを使うと、タブを幾つも開いて後でそれを閉じたりしないで済む。逆に「このファイルはエディタで常に開いておきたい」というときには、それをダブルクリックすることで、一時的に確認するファイルとは独立して、通常のエディタに表示しておける。

 タブとエディタグループの使い分けについては、ファイルの内容を並べて参照したいときにはエディタグループを使うことがまず挙げられる。後は、自分の作業内容に応じて、論理的にファイル(エディタ)をグルーピングしたいときには、特定のエディタグループにタブを開いていくといった使い方が考えられる(例えば、このグループにはHTMLファイルを、別のグループにはJavaScriptファイルを表示するなど)。なお、タブ表示は無効化することもでき(VS Codeの設定でworkbench.editor.showTabsをfalseにする)、そのようにした場合にはエディタグループに表示されるファイルは1つだけとなる。

 VS Code 1.10から「ミニマップ」機能がプレビューとして利用できるようになっている。ミニマップとはスクロールバーにファイル全体の内容をおおまかに表示するというものだ。VS Code 1.14からはデフォルトでこれが有効になっている。

ミニマップ ミニマップ

 次に、ステータスバーやコマンドパレット、その他、知っておくと便利なウィンドウを幾つか紹介しよう。

Copyright© 1999-2017 Digital Advantage Corp. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

この記事に関連するホワイトペーパー

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。