初心者にもわかる「VSCode」の導入から基本操作まで解説

VSCode（Visual Studio Code）とはMicrosoft社が提供を行うコードエディターです。

多くのプログラミング言語に対応しており、無料で使用することができます。今回はVSCodeの導入から基本的な操作方法について解説を行います。

VSCodeとは？

Visual Studio CodeとはMicrosoft社が提供を行うコードエディターで、通称VSCodeと呼ばれます。

VSCodeはオープソースソフトウェアであり、誰でも無料で使用することができます。特徴として多言語に対応している点や、OSを問わず使用できる点、多彩な拡張機能などが挙げられます。エディターにはさまざまな種類がありますが、その中でも現役エンジニア達から支持の高いエディターがVSCodeです。日本語に対応していることもあり、初心者の方にも扱いやすいエディターなため、本記事を参考に導入してみてください。

【Mac】インストール方法

まずはMacOSへのインストール方法について解説を行います。

OSがWindowsの方は「【Windows】インストール方法」をご覧ください。

1. 公式サイトにアクセス

公式サイトにアクセスを行い、「Visual Studio Codeをダウンロードする」を押下します。

2.ダウンロード

右側にあるMacを選択し、ダウンロードを行います。

3. zipファイルの展開

ダウンロードされたzipファイルを展開し、アプリケーションをアプリケーションフォルダに移動します。

4. VSCodeを開く

アプリケーションフォルダからVSCodeを起動を行い、インストールは終了です。

【Windows】インストール方法

続いてWindowsOSでのインストール方法について解説を行います。

1. 公式サイトにアクセス

公式サイトにアクセスを行い、「Visual Studio Codeをダウンロードする」を押下します。

2. ダウンロード

インストーラーのダウンロードを行い、展開をします。

3. 使用許諾契約書の同意

使用許諾契約書の内容を確認し、「同意する」にチェックし、次へ進みます。

4. インストール先の指定

インストールを行うフォルダを指定します。

5. スタートメニューフォルダーの指定

プログラムのショートカットを作成するフォルダを指定します。

6. 追加タスクの選択

お好みでインストール時に実行する追加タスクの選択を行います。

7. 起動

インストール終了後にアイコンをクリックし、起動を行います。

※この時右下に言語パックインストールの案内が表示されるので「インストールして再起動」を選択します。

手動による日本語化方法

通常は初回起動時に言語パックインストールの案内が表示されるのですが、環境によっては案内が通知されない場合があります。その場合は手動による日本語化を行います。

1. 拡張機能への移動

起動が行えたらアクティビティバーより拡張機能アイコンを選択します。

2. 言語パックのインストール

検索窓に「Japanese」と入力すると「Japanese Language Pack for Visual Studio Code」が表示されるので「Install」を選択します。

4. 再起動

インストール後に再起動を行うことで日本語化が完了致します。

各部名称

インストールが完了したため、使う上で必要となるVSCodeの各部名称について解説を行います。

キャプションバー

キャプションバーには編集中のファイル名やワークスペースが表示されます。

WindowsOSの場合はこのキャプションバーにメニューも統合され表示が行われます。MacOSではOSのメニューバーにメニューが統合されます。このキャプションバーにはファイル名などの他に、以下のショートカットアイコンが4つ表示されます。

• プライマリサイドバーを切り替える（⌘B）
• パネルの切り替え（⌘J）
• セカンダリサイドバーを切り替える（⌥⌘B）
• レイアウトのカスタマイズ

アクティビティバー

一番左側にある、ファイルや虫眼鏡などのアイコンが表示されているバーがアクティビティバーです。

ファイルの新規作成や拡張機能のインストール、インストールされた拡張機能の操作をする際に使用します。初期の状態では上から順に以下の機能が並んでいます。

• エクスプローラー（⇧⌘E）
• 検索（⇧⌘F）
• ソース管理（^⇧G）
• 実行とデバッグ（⇧⌘D）
• 拡張機能（⇧⌘X）
• アカウント
• 管理

プライマリサイドバー

アクティビティバーの横にあるのがプライマリサイドバーです。プライマリサイドバーにはアクティビティバーで選択をした機能が表示されます。作業を行う際はエクスプローラーを表示しておく使用頻度の高いバーになります。

セカンダリサイドバー

セカンダリサイドバーはプライマリサイドバーの補助的な役割を担います。初期状態ではプライマリサイドバー内にある「タイムライン」や「アウトライン」をセカンダリサイドバーに移動して表示することができます。

セカンダリサイドバーはキャプションバーに表示されている「セカンダリサイドバーを切り替える」アイコンを押すか、⌥⌘Bを押すことで表示することができます。表示されたサイドバーにタイムラインやアウトラインをドラッグすることでセカンダリサイドバー内で表示することができます。

エディター

VSCodeのメインであるエディターになります。エクスプローラーで選択をしたファイルがエディター内に表示され、ファイルの編集を行うことができます。

パネル

パネルでは以下の機能を切り替えて使用することができます。

• 問題
• 出力
• デバッグコンソール
• ターミナル

ファイル編集中に発生している問題をリアルタイムで確認したり、ターミナルによるコマンド操作を行うことができます。

ステータスバー

ステータスバーには左から順に以下の情報が表示されます。

• Gitブランチ名
• GitHubへの発行ボタン
• 問題の発生状況
• カーソル位置
• 設定されたインデント数
• 文字コード
• 改行コード
• プログラミング言語
• フィードバッグ

基本的な使い方

VSCodeの概要について理解ができた所で、ファイルの作成、保存方法について解説を行います。

※今回説明を行う上で「Insiders版」を使用しており、Stable版と一部表記に違いがあることがございます。

1. フォルダーを開く

エクスプローラーに移動し、フォルダを開くより任意のフォルダを開きます。

2. ファイルを作成する

新しいファイルを選択し、ファイル名と拡張子を入力します。

3. Emmet機能を使う

Emmetとは、簡単な記載でHTMLやCSSを補完入力できるツールです。例えばHTML5のひな型を入力したい場合は、**!**を入力後にTABキーを入力します。

4. ファイルの保存

変更が完了し、ファイルを保存する場合は「ファイル」から「ファイルの保存」を選択するか⌘Sで保存ができます。

まとめ

VSCode（Visual Studio Code）とはMicrosoft社が提供を行うコードエディターです。

VSCodeはオープンソースソフトウェアで誰でも無料で使用することができます。主な特徴として多言語に対応している点やOSを問わず使用出来る点などが挙げられます。数あるコードエディターの中でも現役エンジニアから高い支持を得るVSCodeは扱いやすさから初心者向けのコードエディターとも言えます。今回は導入方法と各部名称、基本的な操作について解説を行いましたが、VSCodeには便利な拡張機能が沢山用意されています。ご利用になる開発環境に合わせて拡張機能をインストールすることで、自分専用にカスタマイズをすることができ、作業効率を高めることができます。