VS Codeでのファイルの作成と編集の第一歩：アクティビティーバーと［エクスプローラー］ビューを使ってみよう：Visual Studio Codeで快適Pythonライフ（1/2 ページ）
アクティビティーバーとサイドバーの関係、［エクスプローラー］ビューやコマンドパレットを使ったファイル操作の基本などについて見ていきます。
アクティビティーバーとサイドバー
Visual Studio Code（以下、VS Code）の画面構成については前回も軽く触れていますが、今回はその中でもアクティビティーバーとサイドバー、エディタという3つの部分を少し詳しく見てみます。
アクティビティーバーは、サイドバーに表示するビューを切り替えたり、サイドバー自体の表示／非表示を切り替えたりするのに使います。例えば、サイドバーに［エクスプローラー］ビューが表示されているときに、アクティビティーバーで［拡張機能］をクリックすると、サイドバーに［拡張機能］ビューが表示されます。
また、サイドバーに［エクスプローラー］ビューが表示されている状態で、アクティビティーバーで［エクスプローラー］をクリックすると、今度はサイドバーが非表示になります。
特に後者の方法でサイドバーを非表示するのは、エディタ領域を広げて、複数のファイルを見通しよく編集したいといったときによくお世話になることでしょう。
アクティビティーバーにはデフォルトで上から順番に以下のアイコン（インジケーターともいう）が表示されています（なお、［アカウント］と［管理］をクリックしたときにはサイドバーにビューが開くのではなく、メニューが表示されます）。
- ［エクスプローラー］：編集するファイルの選択、ファイルやフォルダの新規作成と削除など、基本的なファイル操作機能を提供
- ［検索］：フォルダ内にあるファイルを対象に検索と置換を実行
- ［ソース管理］：ソースコード管理機能へのインタフェース（デフォルトでGitをサポート）
- ［実行とデバッグ］：プログラムの実行とデバッグを行うためのインタフェース
- ［拡張機能］：拡張機能のインストール／アンインストールおよび有効化／無効化などを行う
- ［アカウント］：Microsoftアカウント／GitHubアカウントを利用して、VS Codeの設定を同期可能
- ［管理］：VS Codeの管理機能にアクセスするためのメニューが表示される
［拡張機能］と［アカウント］の間には何もない領域がありますが、ここには拡張機能を追加するなどしたときに、追加でアイコンが表示されることがあります。なお、これらはマウスでドラッグ＆ドロップすることで、順序を変更することも可能です。
アクティビティーバーに表示されているアイコンにマウスカーソルを合わせると、ショートカットキーが表示されることもあります。マウスなどに手を伸ばすよりも、キーボードで操作する方が好みという方はこれらを覚えておくのもよいでしょう。以下に主要なショートカットキーを示します（デフォルトの設定）。
| 表示したいビュー | ショートカットキー |
|---|---|
| ［エクスプローラー］ビュー | ［Ctrl］＋［Shift］＋［E］キー（Windows／Linux） ［Shift］＋［Command］＋［E］キー（macOS） |
| ［検索］ビュー | なし |
| ［ソース管理］ | ［Ctrl］＋［Shift］＋［G］キー（Windows／Linux） ［Shift］＋［Ctrl］＋［G］キー（macOS） |
| ［実行とデバッグ］ | ［Ctrl］＋［Shift］＋［D］キー（Windows／Linux） ［Shift］＋［Command］＋［D］キー（macOS） |
| ［拡張機能］ | ［Ctrl］＋［Shift］＋［X］キー（Windows／Linux） ［Shift］＋［Command］＋［X］キー（macOS） |
| サイドバーの表示／非表示の切り替え | ［Ctrl］＋［B］キー（Windows／Linux） ［Command］＋［B］キー（macOS） |
| アクティビティーバー／サイドバーに関連するショートカットキー | |
特に［Ctrl］＋［B］キー（Windows／Linux）または［Command］＋［B］キー（macOS）は、ファイル編集中にキーボードから手を放すことなく、サイドバーの表示／非表示を簡単に切り替えられるので、覚えておくと便利でしょう。
最後に、アクティビティーバーには以下の画像のように、通知が表示されることがよくあります。［エクスプローラー］であればファイルを編集した後、まだ保存していないファイルがあれば通知が行われますし、VS Codeのアップデートがあるときには［管理］に通知が行われるといった具合です。自分が把握していない事象が通知されているときには、通知があるアイコンにマウスカーソルを合わせてみるようにしましょう。
アクティビティーバーに表示された通知とその内容（macOS版VS Code）アクティビティーバーからのサイドバーのビューという流れはだいたい今見た通りです。そして、日常的なファイル編集では、サイドバーに表示される［エクスプローラー］ビューをよく使うことになります。そこで、以下ではこのビューについて見てみましょう。
［エクスプローラー］ビュー
前回も述べましたが、VS Codeでは個別のファイルをオープンして編集するのではなく、（何らかのプロジェクトを構成する）フォルダをオープンして、そのフォルダに含まれているファイルを編集するのが基本的な考え方になっています。そして、フォルダを中心としたファイル操作を行う際に利用するのが［エクスプローラー］ビューです。
フォルダの新規作成とオープン
フォルダを開く前の［エクスプローラー］ビューは次のような表示になっています。
フォルダをオープンするのか、それともリポジトリからコードをクローンするのかを選択できますが、ここでは新規にフォルダを作成して、そのフォルダをオープンすることにします。これを行うには、もちろん［フォルダーを開く］ボタンをクリックします。これにより、OSごとに固有のフォルダを開くダイアログが表示されるので、そこで新規にフォルダを作成して、そのフォルダをオープンすることになります。
ここでは「test」という名前のフォルダを新規に作成したものとして、［エクスプローラー］ビューがどんなものかを見ていくことにします。以下はWindows環境でこの操作を行っている例です。
これにより、［エクスプローラー］ビューには空のフォルダ「test」が表示されます。
［エクスプローラー］ビューに表示された「test」フォルダ上の画像では［エクスプローラー］ビューには［TEST］というビューと、［アウトライン］というビューが表示されています。［TEST］というのはもちろん、今オープンしたフォルダの名前で、ファイルやフォルダの追加や削除、移動などの操作はここで行います。［アウトライン］というのは、現在記述しているプログラムファイルのおおまかな構造を示すものです（これについては後で見てみましょう）。
これらに加えて、［エクスプローラー］というテキストの右側にある［…］ボタンをクリックすると、［開いているエディター］という項目があるのも分かります。
［開いているエディター］項目これをチェックすると、［エクスプローラー］ビューの表示が次のように変わります。
［開いているエディター］ビューが追加された［開いているエディター］には、その名の通り、現在エディタで開いているファイルやその他のページが表示されます。上の画像ではエディタ領域に［ようこそ］タブがあるので、［開いているエディター］にもこれが表示されたということですね。
このビューは、フォルダに多数のファイルが含まれていて、その中で現在編集中のファイルを探すといったときに役立つかもしれません。が、筆者個人としては［エクスプローラー］ビュー内の表示がガチャガチャすることがあるので、あまり好きではありません。そのため、この後は［開いているエディター］は非表示として話を進めます。
Copyright© Digital Advantage Corp. All Rights Reserved.
注目のテーマ
ITmediaはアイティメディア株式会社の登録商標です。