はじめに

今回は、Visual Studio Code（以下、VSCode）をWindowsにインストールする手順を解説していきます。VSCodeの概要から説明していますが、いきなりインストール手順を読みたい方は、「2. インストール手順」まで飛んでください。

目次

1. VSCodeとは
2. インストール手順
- 2-1. 前提条件
- 2-2. 手順
3. VSCodeの初期設定
4. おわりに

1. VSCodeとは

VSCodeとは、Microsoftが開発・提供している無料のソースコードエディタです。Windowsのみならず、macOS / Linux など、さまざまなOSで動作します。

1-1. 特徴

VSCodeには、以下の特徴があります。

特徴	説明
軽量かつ高速	IDEより軽く、起動も速い
多言語対応	Python、C/C++、Javaなどに対応
拡張機能が豊富	Marketplaceから機能を追加できる
Git連携	コード管理をVSCode上で操作できる
デバッガ内蔵	ステップ実行やブレークポイントなどが可能
カスタマイズ性	テーマやキーバインドなど自由に設定可能

1-2. VSCodeに向いている人

VSCodeでの開発が向いているのは、以下のような人です。

Web開発者（HTML/CSS/JSとの相性抜群）
React Native や Flutter などモバイルアプリ開発者
プログラミング初心者（インストールが簡単で、初学者向け情報も豊富）
競技プログラミングや軽量なプロジェクトで素早くコードを書きたい人

1-3. Visual Studioとの違い

Microsoft社は「Visual Studio」という開発環境も広く提供していますが、Visual Studioとの違いは以下の通りです。

項目	VSCode	Visual Studio
提供元	Microsoft	Microsoft
用途	軽量エディタ	フル機能のIDE
対象	Web、スクリプト	.NET、C++、Windowsアプリ
動作	軽い	重い（多機能）
料金	無料	有料あり

VSCodeは「軽量エディタ」ですので他の開発環境に比べても始めやすいですし、拡張機能次第では「IDE並み」にもなる育てるツールとなっています。初心者から上級者まで、多くのプログラマにおすすめできる開発ツールです。

2. インストール手順

VSCodeのインストールする上での前提条件とインストール手順について説明します。

2-1. 前提条件

WindowsのPCでVSCodeをインストールする上で必要なPC環境について確認しましょう。

項目	必要条件	説明
OS	Windows 10 / 11	VSCodeは基本的にWindows 10 / 11での動作を前提としています。 ※ Windows 8.1以前はサポート対象外です。
ユーザ権限	ローカル管理者権限があるユーザ	インストール時に必要となります。
容量	インストールに必要な容量：300MB～400MB程度	拡張機能やプロジェクトが増えると数GBになる可能性があるので、ストレージには余裕があればあるほどよいです。

2-2. 手順

前提条件を満たしていることを確認できたら、以下の手順でVSCodeのインストールを行いましょう。

2-2-1. 公式サイトを開く

下記リンクをクリックし、VSCodeの公式サイトを開いてください。

Visual Studio Code（公式サイト）

2-2-2. 「Download for Windows」を押下する

公式サイトのホーム画面に配置されている、「Download for Windows」ボタンを押下してください。

下記画面に遷移すると、自動でVSCodeのセットアップ用アプリケーションのダウンロードが始まります。

2-2-3. VSCodeのセットアップ用アプリ実行

ダウンロードが完了すると、特にブラウザ側で保存先を指定していない場合は、デフォルトで「ダウンロード」フォルダにVSCodeのセットアップ用のアプリケーションが格納されます。
ダウンロードしたアプリを見つけることができたら、ダブルクリックで実行しましょう。

2-2-4. 使用許諾契約書の同意

セットアップ用のアプリケーションを開くと、最初に「使用許諾契約書の同意」のダイアログが表示されます。
使用許諾書を読んだうえで、「同意する」にチェックをして「次へ」を押下しましょう。

2-2-5. インストール先の指定

「インストール先の指定」のダイアログでは、VSCodeのアプリケーションを格納するフォルダを指定します。特に格納先にこだわりがなければ、デフォルトのパスのまま「次へ」を押下して大丈夫です。

2-2-6. スタートメニューフォルダの指定

「スタートメニューフォルダの指定」のダイアログでは、Windowsのスタートメニューに作られるショートカット（メニュー項目）をどのフォルダに作成するかを決めることができます。
特にこだわりがなければ、デフォルトのフォルダ名のまま「次へ」を押下して大丈夫です。

2-2-7. 追加タスクの選択

「追加タスクの選択」のダイアログでは、VSCodeインストール時に実行する追加タスクを選択することができます。各項目の意味と推奨度について下記にまとめました。

オプション	説明	推奨
デスクトップ上にアイコンを作成する	デスクトップにショートカットを作る	任意（使いたければ）
PATHへの追加（コマンドラインから「code」コマンドを使えるようにする	ターミナルやコマンドプロンプトから `code .` でVSCodeを起動可能になる	強く推奨
エクスプローラーのファイルコンテキストメニューに「Codeで開く」追加	ファイルを右クリック→「Codeで開く」が出るようになる	推奨
エクスプローラーのディレクトリコンテキストメニューに「Codeで開く」追加	フォルダを右クリック→「Codeで開く」が出るようになる	推奨
サポートされているファイルの種類のエディターとして登録する	`.html` や `.js` などのファイルをダブルクリックしたときにVSCodeで開くようになる	任意（既定のエディタにしたいなら）

私の場合は、全選択して「次へ」を押下しました。
ここは各オプションの意味を理解しているのであれば皆様のお好みで大丈夫ですが、少なくとも「PATHへの追加」はチェックしておいたほうが良いと思います。特にこだわりがなければ、オプション全選択で問題ないです。

2-2-8. インストール準備完了

「インストール準備完了」のダイアログでは、これまで設定した「インストール先」、「スタートメニューフォルダ」、「追加タスク」の内容が表示されます。表示されている内容に間違いがなければ、「インストール」ボタンを押下しましょう。

2-2-9. インストール開始

「インストール」ボタン押下後、すぐにインストールが開始されます。インストール完了を待ちましょう。
私の環境では数秒でインストールが終わりましたが、完了時間については回線の速度によって差はあると思います。

2-2-10. インストール完了

「インストール完了」のダイアログが表示されたら、VSCodeのインストール完了となります。
デフォルトで「Visual Studio Codeを実行する」のチェックボックスにチェックが付いていますが、この後VSCodeの初期設定も行いますので、チェックをつけたまま「完了」ボタンを押下してください。

3. VSCodeの初期設定

VSCodeをインストールしたら、まず最初に行ったほうがいいVSCodeの初期設定のやり方について解説します。

3-1. Get Started画面

初回起動時にVSCodeを開くと「Get Started with VSCode」というタイトルの画面を表示しますが、本記事ではこれには触れません。必要であればテーマ変更やチュートリアルなどをこの画面から行えます。

3-2. VSCodeのUIを日本語化する

VSCodeは初期状態だと英語UIとなっていますので、日本語で表示したい方は下記の手順で日本語化してください。

3-2-1. 拡張機能アイコンを選択

左のサイドバーから「拡張機能（四角いブロックのアイコン）」をクリックしてください。

3-2-2. 「Japanese Languatge Pack」を検索

拡張機能アイコンをクリックすると開かれる検索ボックスで、「Japanese Language Pack」と入力してください。

3-2-3. 「Japanese Language Pack for Visual Studio Code」をインストール

一覧から「Japanese Language Pack for Visual Studio Code」を選択し、「install」ボタンをクリックしてください。

3-2-4. VSCodeを再起動する

「Japanese Language Pack for Visual Studio Code」のインストールが完了すると、右下に下記画像のようなメッセージが表示されるので「Change Language and Reset」ボタンを押下し、VSCodeを再起動しましょう。

3-2-5. 日本語化完了

VSCodeの自動再起動後、下記画像のようにUIが日本語で表示されていれば日本語化完了です。

3-3. VSCodeのテーマを変更する

VSCode では、見た目のテーマ（配色）を自由に変更することができます。
目に優しい配色に変更することで、長時間のコーディングも快適になります。
以下の手順でテーマを変更できるので、試してみてください。

3-3-1. 設定アイコンをクリック

画面左下の歯車アイコンをクリックします。

3-3-2. 配色テーマ

設定メニューを開いたら、「テーマ」＞「配色テーマ」を選択してください。

3-3-3. 好みのテーマを選択

「配色テーマ」を選択すると、VSCode上部の検索ボックスの候補に配色テーマのリストが表示されるので、自分のお好みの配色テーマを選択してください。

3-3-4. テーマ変更完了

例として、私は「Soralized Light」を選択してみました。

すると、VSCodeの配色が明るく、落ち着いた色になりました。

配色選びは自由ですので、各自お好みのテーマを探してみてください。

3-4. フォントサイズと表示の調整

VSCodeは、デフォルトのままだとフォントがやや小さく感じる場合があります。
作業を快適に行うために、フォントサイズやエディタの表示スタイルを調整しておきましょう。

3-4-1. 現状のテキストの表示確認

VSCodeの初期画面で「Ctrl + N」を同時に押すと、新しいテキストファイルが下記のように表示されます。
空のテキストファイルには、矢印で示しているテンプレートの指示文字が表示されますので、この文字列の大きさが見やすいか、行の高さやフォントに問題はないか確認しましょう。

3-4-2. 設定アイコンをクリック

テキストの確認ができたら、画面左下の歯車アイコンをクリックします。

3-4-3. 設定を開く

「設定」サブメニューをクリックして、設定を開いてください。

3-4-4. フォントを開く

設定のサイドメニューから、「テキストエディター」＞「フォント」をクリックして、フォントの設定を開いてください。

3-4-5. フォントサイズの設定

Font Sizeに自分の好みのフォントサイズを数字で入力しましょう。
多くの人にとって見やすいのは、14～16くらいかと思われます。

3-4-7. テキストエディターを開く

設定のサイドメニューからテキストエディターを選択してください。

3-4-8. Line Heightを設定する

行の高さを設定するために、自分の好みに合わせてLine Heightの値を入力しましょう。
デフォルトは 0（自動）ですが、22〜26 などにすると詰まりすぎを防げます。

3-4-9. テキストの表示調整完了

ここまでできたら、手順3-4-1で作成した空のテキストファイルを確認しましょう。
自分の設定したフォントサイズと行の高さが反映されていると思います。
（画像だと変化が見えにくいですが、自分でやってみると結構変わるのがわかると思います。）
もし確認して、もっとフォントサイズを大きくしたい、行間の幅を広げたい、などと思いましたら先ほどの設定手順に戻って自分の好みの値に再設定してみてください。

3-5. その他やっておくと便利な設定（任意）

設定しておくと便利な機能を下記にまとめました。
このあたりは設定するかしないかの好みが分かれるところでもありますので、設定したいと思った方は設定画面から該当の設定項目を検索して推奨値を入力してみてください。

設定項目	説明	推奨値・例
`editor.formatOnSave`	保存時に自動整形	`true`（※Prettierなどと併用）
`files.autoSave`	自動保存のタイミング	`"onWindowChange"` や `"afterDelay"`
`editor.tabSize`	インデント幅	`2` または `4`（プロジェクトに応じて）
`editor.renderWhitespace`	半角スペースやタブを可視化	`"all"` or `"boundary"`
`editor.wordWrap`	長い行の折り返し	`"on"`（デフォルトは `"off"`）
`editor.minimap.enabled`	右側のミニマップ表示	`false` にするとすっきり表示
`explorer.confirmDelete`	ファイル削除時の確認ダイアログ	`true`（安全のため）

3-6. おすすめの拡張機能（任意）

VSCodeの拡張機能は、開発環境を自分好みにカスタマイズするうえで欠かせません。
しかし、使用する言語などによって必要な拡張機能も大きく変わってくると思いますので、インストールを強制しませんが、最低限入れておくと便利な拡張機能を以下にまとめました。

拡張機能名	説明	備考
`Prettier - Code formatter`	コードの自動整形をしてくれる	`formatOnSave`と併用推奨
`Material Icon Theme`	ファイル・フォルダにわかりやすいアイコンが付く	デフォルトアイコンより視認性が高い
`Bracket Pair Colorizer 2`	括弧に色を付けて対応関係を見やすくする	ネストが多いコードで便利
`Path Intellisense`	パスの補完（`import`など）を自動で提案してくれる	ファイル構造が複雑なプロジェクト向け
`Auto Rename Tag`	HTMLなどのタグを同時に編集してくれる	開閉タグを両方一緒に変えてくれる
`GitLens`	Gitの履歴・差分を見やすく表示してくれる	チーム開発やGit管理を使う人向け

4. おわりに

ここまでで、VSCodeのインストールから初期設定までの一連の流れをご紹介しました。

VSCodeの導入記事はすでに多く存在しますが、本記事では「特定のプログラミング言語に依存しない汎用的な使い方」に絞って、初心者の方でも迷わないよう、できるだけ丁寧にまとめてみました。

今後、特定の言語やプロジェクトに応じてさらに設定を追加していくことになるかと思いますが、まずは本記事で紹介した内容をベースに、自分なりの環境を整えてみてください。

もし不明点や誤りがありましたら、コメントにてご指摘・ご意見いただけると嬉しいです。