VSCodeを使う

はじめに

この記事ではVSCodeの説明とインストールの方法を説明します。

VSCodeとは

Visual Studio Code（以下VSCode）とは、マイクロソフト社のプログラマ向けテキストエディタです。プログラム作業を支援するためのさまざまな機能が備わっており、機能拡張によってさらに強化することもできます。

VSCodeの長所と短所

長所

プログラム作業に必要な機能がひとつにまとまっている点、不足している機能も機能拡張によって補える点が長所といえます。

たとえばこのサイトはDocusaurusで作られており、

• マークダウン記法で原稿を書く
• 原稿をHTMLファイルに変換する
• HTMLファイルをウェブサーバーにアップロードする

という一連の作業が発生します。これらの作業をすべてVSCodeで完結させることができます。

短所

多機能がVSCodeの長所ではありますが、一芸に秀でた専用アプリには及ばない面もあります。たとえばマークダウン記法で原稿を書くだけであればVSCodeよりもTyporaがおすすめです。

また、多機能ゆえの使いこなしの難しさも短所といえます。

VSCodeの画面構成

VSCodeは多機能ゆえに画面UIデザインがMS-Wordやメモ帳などの古典的な画面UIデザインからかけ離れており、とっつきにくい印象があります。しかし各UI要素の意味がわかれば印象も変わるでしょう。

1. (中央部)エディタ

テキストを編集する画面。

2. (上端)タイトルバー

コマンドセンターと呼ばれる特殊な検索窓が配置されている。これは多機能すぎるVSCodeの機能を検索するためにある。

3. (右側)サイドバー

フォルダ内ファイル一覧、ファイル検索結果一覧、等、プロジェクトに関する情報を表示する画面。右端のアイコンで表示内容を切り替える。

4. (下側)パネル

構文エラーの指摘、ターミナル機能によるCLIプログラムの制御、等、プログラム作業の支援に関する情報を表示する画面。

5. (下端)ステータスバー

テキストカーソル位置、テキストエンコード形式、等、編集中のファイルに関する情報を表示する欄。

VSCodeのわかりづらい概念

「コマンドセンター」

タイトルバーに配置されている検索窓は、インターネット検索でも文字列検索でもありません。これは「コマンドセンター」と呼ばれるUI要素で、多機能すぎるVSCodeの機能を検索するためにあります。

「プロジェクト」

VSCodeでは、ファイルを開く前にまずフォルダを開くよう、ことあるごとに要求されます。

ウェブサイト開発やプログラム開発では開発テーマごとにフォルダを用意しそこに関係するファイルをまとめて入れておくことが一般的なので、VSCodeもそれを前提に設計されているためです。

VSCodeでは開発テーマに関係するファイル一式を「プロジェクト」、ファイル一式の収められたフォルダを「プロジェクトフォルダ」と呼んでいます。これはただそう呼んでいるだけでなく、プロジェクトごとに異なるVSCodeの設定を保存し、プロジェクトフォルダを開くことで自動的に設定が切り替わるようになっています。

「ワークスペース」

開発テーマに関係するファイル一式が複数のフォルダに分散されている場合に備え、VSCodeには「ワークスペース」という機能があります。プロジェクトとほぼ同じ概念ですが、ひとつのフォルダに限定されません。

「Git」

プログラマ以外にはほぼ縁のない存在である「Git」。Gitとはサーバー上で動くファイル変更履歴管理システムです。WindowsにもMacOSにもファイル変更履歴機能がありますがこれらは個人作業を前提としています。サーバー上にあって複数人で共同編集されるファイルの変更履歴を管理するためにGitは開発されました。

VSCodeにはGitクライアント機能が内蔵されています。（FTPクライアントを使ってFTPサーバーにファイルをアップロードするのと同様に）Gitクライアント機能を使ってGitサーバーにファイルをアップロードできます。

VSCodeのインストール

Windows版VSCodeはMicrosoft Storeから入手できます。Linux版とMac版は配布ページからダウンロードできます。

手順

1. ダウンロードページを開く https://code.visualstudio.com/download
2. Windows版/Linux版/Mac版から自分のPC環境に合ったVSCodeを選んでダウンロードする
3. ダウンロードした.exeファイル（または.zipファイル）を開く
4. Windowsの場合はインストーラ画面の指示に従いインストールする。Macの場合は解凍されたアプリをApplicationフォルダに入れる

VSCodeの日本語化

インストール直後のVSCodeはメニュー表記等がすべて英語表記になっています。設定の変更でVSCodeを日本語化できます。

1. VSCode起動
2. タイトルバーにある検索窓に>Configと入力（冒頭の>記号を忘れずに）
3. 検索結果より「Configure Display Language」クリック
4. 言語一覧より「Install additional languages」クリック
5. 左サイドバーより「Japanese Language Pack for Visual Studio Code」をクリック
6. 「Install」クリック
7. 画面右下の「Restart Now」ボタンをクリック（VSCodeが再起動する）
8. 了

おわりに

VSCodeは基本的にはプログラマ向けのアプリですが、機能拡張によってその他の用途でも便利に使えるようになります。テキストエディタを使っているときに「このような機能があればよいのに」と思った時は、是非VSCodeの機能拡張を探してみてください。