今すぐ始められるVS Code入門！開発効率を爆上げしよう

今すぐ始められるVS Code入門！開発効率を爆上げしよう – インストールから実践、カスタマイズまで完全ガイド

はじめに：なぜ今すぐVS Codeを始めるべきなのか

現代のソフトウェア開発において、効率的で快適な開発環境は成功の鍵となります。コードを書く、デバッグする、バージョン管理を行う、テストを実行するなど、開発者が日常的に行う様々な作業をスムーズに行えるかどうかは、プロジェクトのスピードや品質に直結します。そして、その開発環境の核となるのが「コードエディタ」あるいは「統合開発環境（IDE）」です。

数あるコードエディタやIDEの中でも、現在世界で最も多くの開発者に愛用されているのが「Visual Studio Code」（通称 VS Code）です。Microsoftが開発しているにも関わらず、完全に無料でオープンソースであり、Windows、macOS、Linuxの主要なOSすべてで利用できます。軽量でありながら高機能、そして豊富なカスタマイズ性や拡張性を持っているため、フロントエンド開発からバックエンド開発、モバイルアプリ開発、さらにはデータサイエンスやシステム管理まで、あらゆる分野の開発者にとって手放せないツールとなっています。

VS Codeがこれほどまでに支持される理由はいくつかあります。

軽量かつ高速: 起動や動作が非常に軽快で、大規模なプロジェクトでも快適に編集できます。
強力なコード編集機能: シンタックスハイライト、入力補完（IntelliSense）、コード整形、リファクタリングなど、コードを書く上で役立つ機能が満載です。
統合ターミナル: エディタ内でコマンドライン操作ができるため、他のアプリケーションに切り替える手間が省けます。
デバッグ機能: 多くの言語に対応した強力なデバッグ機能が組み込まれています。
Git連携: バージョン管理システムGitとの連携が非常に強力で、コミット、プッシュ、プル、ブランチ操作などがVS Code上で行えます。
豊富な拡張機能: マーケットプレイスには数万もの拡張機能があり、機能を追加したり、特定の言語やフレームワークに対応させたり、テーマを変更したりと、自分好みにVS Codeをカスタマイズできます。
カスタマイズ性: エディタの見た目や動作、キーボードショートカットなど、あらゆる要素を細かく設定できます。

もしあなたが現在、別のエディタを使っている、あるいはこれから初めて本格的なコードエディタを使おうとしているなら、VS Codeは間違いなく最良の選択肢の一つです。このガイドでは、VS Codeを「今すぐ」始められるように、インストール方法から基本的な使い方、そして開発効率を劇的に向上させるための実践的な機能、さらに自分好みにカスタマイズする方法まで、約5000語をかけて徹底的に解説します。

この記事を読むことで、あなたはVS Codeの基本をマスターし、日々のコーディング作業をより快適に、より効率的に行えるようになるでしょう。さあ、VS Codeを使って開発効率を「爆上げ」し、より楽しく、より生産的な開発ライフをスタートさせましょう！

対象読者：
* プログラミング学習を始めたばかりで、どのエディタを使うか迷っている方
* 他のエディタからVS Codeへの移行を検討している方
* VS Codeを使っているが、基本的な機能しか知らない方
* VS Codeの便利な機能やカスタマイズ方法を知って、開発効率を向上させたい方

それでは、早速VS Codeの世界へ飛び込んでいきましょう！

第1章：VS Codeをインストールしよう – 開発環境の第一歩

開発効率爆上げの旅は、まずVS Codeをあなたのコンピュータにインストールすることから始まります。インストール自体は非常に簡単ですが、お使いのOSによって手順が若干異なります。ここでは、Windows、macOS、Linuxのそれぞれについて、インストール方法を詳しく解説します。

始める前に、お使いのコンピュータがVS Codeのシステム要件を満たしているか確認しましょう。

1.1 システム要件の確認

VS Codeは比較的要求スペックが低いですが、快適に動作させるためには以下の要件を満たしていることが推奨されます。

オペレーティングシステム:
- Windows: Windows 8.1以降 (64-bit推奨)
- macOS: macOS 10.11 (El Capitan) 以降
- Linux: Debian系 (Ubuntu, Debianなど)、Red Hat系 (Fedora, CentOSなど) のモダンなディストリビューション (glibc 2.17以降、libstdc++ 3.4.14以降、GTK+ 3.9以降が必要)
プロセッサ: 1.6 GHz 以上のプロセッサ (2コア以上推奨)
メモリ: 1 GB 以上のRAM (4 GB 以上推奨)
ストレージ: 200 MB 以上の空き容量
ディスプレイ: 1024 x 768 以上の解像度

最近のコンピュータであれば、これらの要件はほとんど満たしているはずです。

1.2 Windowsへのインストール

Windowsへのインストールは、インストーラーを実行するだけで非常に簡単です。

インストーラーのダウンロード:
- VS Codeの公式サイト（https://code.visualstudio.com/）にアクセスします。
- トップページに大きく表示されているダウンロードボタンをクリックします。Windows版が自動的に検出されるはずです。
- 通常は「User Installer」が推奨されます。これは管理者権限がなくてもインストールでき、ユーザーごとに設定が保存されます。「System Installer」はすべてのユーザーに対してインストールする場合に使用します。特別な理由がなければ「User Installer」を選択しましょう。32-bit版が必要な場合は、Other Downloadsから選択できますが、特別な理由がなければ64-bit版を選択してください。
- ダウンロードが開始されます。
インストーラーの実行:
- ダウンロードした .exe ファイル（例: VSCodeUserSetup-x64-1.xx.x.exe）をダブルクリックして実行します。
- 「使用許諾契約書の同意」画面が表示されます。内容を確認し、「同意する」を選択して「次へ」をクリックします。
- 「インストール先の指定」画面が表示されます。特に変更する必要がなければ、デフォルトのまま「次へ」をクリックします。
- 「スタートメニューフォルダーの指定」画面が表示されます。デフォルトのまま「次へ」をクリックします。
- 「追加タスクの選択」画面が表示されます。ここではいくつか便利なオプションを選択できます。
  - [✓] PATHへの追加 (要再起動): これにチェックを入れておくと、コマンドプロンプトやPowerShellから code . のように入力して、カレントディレクトリをVS Codeで開けるようになります。これは非常に便利なので、強く推奨します。 チェックを入れた場合は、インストール後にコンピュータを再起動するか、コマンドプロンプト等を再起動してください。
  - [✓] デスクトップにアイコンを作成する: お好みでチェックを入れてください。
  - [✓] サポートされているファイルの種類のエクスプローラーのコンテキストメニューに [Codeで開く] を追加する: エクスプローラーでファイルを右クリックした際に「Codeで開く」メニューが追加されます。便利なのでチェック推奨です。
  - [✓] サポートされているフォルダーのエクスプローラーのコンテキストメニューに [Codeで開く] を追加する: エクスプローラーでフォルダーを右クリックした際に「Codeで開く」メニューが追加されます。これも便利なのでチェック推奨です。
- 選択が完了したら「次へ」をクリックします。
- 「インストール準備完了」画面が表示されます。設定内容を確認し、「インストール」をクリックします。
- インストールが開始されます。完了するまでしばらく待ちます。
- インストールが完了すると、「Visual Studio Code を実行する」というチェックボックスが表示されます。すぐに起動したい場合はチェックを入れたまま「完了」をクリックします。

これでWindowsへのVS Codeのインストールは完了です。

1.3 macOSへのインストール

macOSへのインストールは、ダウンロードしたファイルをアプリケーションフォルダにドラッグ＆ドロップするだけです。

インストーラーのダウンロード:
- VS Codeの公式サイト（https://code.visualstudio.com/）にアクセスします。
- トップページに大きく表示されているダウンロードボタンをクリックします。macOS版が自動的に検出されるはずです。
- ダウンロードが開始されます。ダウンロードされるファイルは通常 .zip 形式です（例: VSCode-darwin-x64-1.xx.x.zip）。
ファイルの解凍と配置:
- ダウンロードした .zip ファイルをダブルクリックして解凍します。すると Visual Studio Code.app というファイルが作成されます。
- この Visual Studio Code.app を /Applications フォルダにドラッグ＆ドロップします。
起動とPATHの設定（オプション）:
- LaunchpadやFinderの「アプリケーション」フォルダから「Visual Studio Code.app」をダブルクリックして起動します。
- 初めて起動する際は、ダウンロード元に関するセキュリティ警告が表示されることがありますが、「開く」をクリックして進めてください。
- macOSでもWindowsと同様に、ターミナルから code . のようにVS Codeを起動できると便利です。VS Codeを開いた状態で、コマンドパレット（⇧⌘P または Shift+Cmd+P）を開き、「shell command install」と入力して表示される「Shell Command: Install ‘code’ command in PATH」を選択して実行します。パスワードを求められる場合がありますので入力してください。これでターミナルから code コマンドが使えるようになります。

これでmacOSへのVS Codeのインストールは完了です。

1.4 Linuxへのインストール

Linuxにはいくつかのインストール方法があります。最も一般的なのは、ディストリビューションのパッケージマネージャーを使用する方法か、公式サイトから提供されているパッケージを使用する方法です。

公式サイトからのパッケージダウンロード:
- VS Codeの公式サイト（https://code.visualstudio.com/）にアクセスします。
- トップページに表示されているダウンロードボタンの下にある「.deb (Debian, Ubuntu)」「.rpm (Fedora, RHEL)」など、お使いのディストリビューションに合ったパッケージを選択してダウンロードします。
パッケージを使ったインストール:
- Debian/Ubuntu系 (.deb):
  - ダウンロードした .deb ファイルがあるディレクトリでターミナルを開きます。
  - 以下のコマンドを実行します（ファイル名はダウンロードしたものに合わせてください）。
    bash sudo dpkg -i code_1.xx.x_amd64.deb sudo apt --fix-broken install # 依存関係が不足している場合
  - または、GDebiパッケージインストーラーなどのGUIツールでファイルをダブルクリックしてインストールすることもできます。
- Fedora/RHEL系 (.rpm):
  - ダウンロードした .rpm ファイルがあるディレクトリでターミナルを開きます。
  - 以下のコマンドを実行します（ファイル名はダウンロードしたものに合わせてください）。
    bash sudo rpm -ivh code-1.xx.x-rpm-x86_64.rpm # または dnf を使用 (推奨) sudo dnf install code-1.xx.x-rpm-x86_64.rpm
パッケージリポジトリからのインストール（推奨）:
公式サイトのパッケージをインストールすると、Microsoftのリポジトリがシステムに追加されるため、今後のアップデートはパッケージマネージャーを使って簡単に行えるようになります。インストール後に sudo apt update && sudo apt upgrade (Debian/Ubuntu) や sudo dnf upgrade (Fedora/RHEL) といった通常のシステムアップデートコマンドでVS Codeも更新されます。
FlathubまたはSnapcraftからのインストール:
FlatpakやSnapを使用している場合は、それぞれのストアからVS Codeをインストールすることも可能です。例えばUbuntuならUbuntu SoftwareセンターからSnap版をインストールできます。
PATHの設定:
多くのLinuxディストリビューションでは、パッケージインストール時に自動的に code コマンドがPATHに追加されます。ターミナルを開いて code --version と入力し、バージョン情報が表示されれば設定されています。

これでLinuxへのVS Codeのインストールは完了です。

1.5 インストール後の確認と起動

インストールが完了したら、VS Codeを起動してみましょう。

Windows: スタートメニューから「Visual Studio Code」を探してクリックするか、もしPATHに追加していればコマンドプロンプトやPowerShellで code と入力してEnterキーを押します。
macOS: Launchpadまたはアプリケーションフォルダから「Visual Studio Code」をクリックします。Finderのスポットライト検索（⌘Space）で「Visual Studio Code」と入力して起動することもできます。
Linux: アプリケーションメニューから「Visual Studio Code」を探してクリックするか、ターミナルで code と入力してEnterキーを押します。

VS Codeが起動し、ウェルカムページが表示されればインストール成功です。お疲れ様でした！これで、開発効率を爆上げするための第一歩を踏み出しました。

第2章：VS Codeの基本画面と操作を理解する – エディタの全体像を掴む

VS Codeを起動すると、最初は少し情報量が多く感じるかもしれません。しかし、画面の各部分の役割と基本的な操作方法を理解すれば、すぐに慣れることができます。この章では、VS Codeのメインウィンドウの構成要素と、ファイル操作などの基本的な使い方を解説します。

2.1 メインウィンドウの構成要素

VS Codeのメインウィンドウは、主に以下の5つの領域に分かれています。

(画像は公式サイトより。実際の画面とは異なる場合があります。)

アクティビティバー (Activity Bar): ウィンドウの左端にある縦長のバーです。VS Codeの主要なビュー（エクスプローラー、検索、Source Control、実行とデバッグ、拡張機能など）を切り替えるアイコンが表示されています。下部には設定などを開く歯車アイコンがあります。
サイドバー (Sidebar): アクティビティバーで選択したビューの内容が表示される領域です。ファイルツリー、検索結果、Gitの変更履歴などがここに表示されます。表示/非表示は ⌘B (macOS) / Ctrl+B (Windows/Linux) で切り替えられます。
エディタ領域 (Editor Group): ウィンドウの中央にある最も広い領域です。開いているファイルの内容が表示され、ここでコードを編集します。複数のファイルをタブで切り替えたり、画面を分割して複数のファイルを同時に表示したりできます。
パネル (Panel): ウィンドウの下部に表示される領域です。ターミナル、出力、デバッグコンソール、問題（エラーや警告一覧）などを表示できます。表示/非表示は ^J (macOS) / Ctrl+J (Windows/Linux) で切り替えられます。
ステータスバー (Status Bar): ウィンドウの一番下にある横長のバーです。現在のプロジェクトのGitブランチ、エラーや警告の数、カーソルの位置、ファイルのエンコーディング、行末文字、使用している言語モードなどの情報が表示されます。クリックすることで設定を変更できる項目もあります。

これらの領域を理解することで、VS Codeがどのように情報を整理し、操作を受け付けているかが分かります。

2.2 基本的なファイル操作

コード編集の基本は、ファイルを開き、編集し、保存することです。

2.2.1 ファイル/フォルダを開く

ファイルを開く:
- メニューバーから ファイル(File) > ファイルを開く(Open File...) を選択し、開きたいファイルを選択します。
- ⌘O (macOS) / Ctrl+O (Windows/Linux) のショートカットも使えます。
- サイドバーのエクスプローラービューで、開きたいファイルをダブルクリックします。
フォルダ（プロジェクト）を開く:
- メニューバーから ファイル(File) > フォルダーを開く(Open Folder...) を選択し、開きたいプロジェクトのルートフォルダを選択します。
- ⇧⌘O (macOS) / Ctrl+K Ctrl+O (Windows/Linux) のショートカットも使えます（Ctrl+Kを押してからCtrl+Oを押します）。
- フォルダを開くと、そのフォルダ以下のファイルツリーがエクスプローラービューに表示されます。以降の開発作業は、このフォルダをワークスペースとして行うのが一般的です。プロジェクト作業は必ずフォルダを開いて行いましょう。

2.2.2 新しいファイルの作成と保存

新しいファイルを作成:
- メニューバーから ファイル(File) > 新しいファイル(New File) を選択します (⌘N (macOS) / Ctrl+N (Windows/Linux))。新しい空のタブがエディタ領域に表示されます。
- エクスプローラービューでフォルダを選択し、右クリックメニューから「新しいファイル(New File)」を選択するか、フォルダ名の右に表示されるファイルアイコンをクリックしてファイル名を入力します。
ファイルを保存:
- メニューバーから ファイル(File) > 保存(Save) を選択します (⌘S (macOS) / Ctrl+S (Windows/Linux))。
- 初めて保存する場合は、ファイル名と保存場所を指定するダイアログが表示されます。

2.2.3 ファイルの保存（手動保存、自動保存）

手動保存: 上記の ⌘S / Ctrl+S で現在のファイルを保存します。未保存のファイルは、タブのファイル名の横に丸いアイコンが表示されます。
自動保存: VS Codeには自動保存機能があり、有効にすると編集中のファイルを自動的に保存してくれます。これにより、保存し忘れを防ぎ、安心してコーディングに集中できます。自動保存の設定は、メニューバーの ファイル(File) > 自動保存(Auto Save) から変更できます。
- Off: 自動保存しない（デフォルト）
- AfterDelay: 指定した時間（デフォルト1000ms=1秒）経過後に自動保存
- OnFocusChange: VS Codeウィンドウから他のアプリケーションにフォーカスが移動したときに自動保存
- OnWindowChange: VS Codeウィンドウ自体が非アクティブになったときに自動保存
- 開発中は AfterDelay や OnFocusChange を設定しておくと非常に便利です。

2.3 タブとウィンドウ操作

複数のファイルを開いて作業する場合、タブやウィンドウの操作が重要になります。

2.3.1 タブの切り替えと閉じ方

タブの切り替え:
- エディタ領域の上部に表示されているタブをクリックして切り替えます。
- 最近使ったファイル順に切り替える: ⌃Tab (macOS) / Ctrl+Tab (Windows/Linux)。表示されるリストから選択できます。
- Ctrl (または Cmd) を押しながら P を押すと、最近開いたファイルや現在のワークスペース内のファイルを素早く検索して開くことができます。これは後述するコマンドパレットと似ていますが、ファイル検索に特化しています。
タブを閉じる:
- タブのファイル名の横にある「x」アイコンをクリックします。
- ⌘W (macOS) / Ctrl+W (Windows/Linux) で現在のタブを閉じます。
- ⌘K W (macOS) / Ctrl+K W (Windows/Linux) で開いているすべてのタブを閉じます（Cmd/Ctrl + K を押した後に W を押します）。

2.3.2 エディタ領域の分割 (Split Editor)

複数のファイルを同時に見ながら作業したい場合に便利なのが、エディタ領域の分割機能です。

分割:
- 開いているタブを右クリックし、「分割(Split)」を選択します。左右または上下に分割できます。
- エディタ領域の右上にある分割アイコンをクリックします。
- ⌘\ (macOS) / Ctrl+\ (Windows/Linux) で現在のタブを右側に分割します。
分割解除: 分割されたエディタ領域の右上にある分割解除アイコンをクリックするか、該当するタブを閉じることで解除できます。
グループの移動: 分割されたエディタ領域間でタブをドラッグ＆ドロップして移動できます。
グループ間の移動: ⌘K ⌘← / ⌘K ⌘→ (macOS) や Ctrl+K Ctrl+← / Ctrl+K Ctrl+→ (Windows/Linux) でフォーカスしているエディタグループを移動できます。

2.4 コマンドパレットを使ってみよう

VS Codeの最も強力な機能の一つが「コマンドパレット」です。メニューをたどらなくても、VS Codeのほぼすべてのコマンドや機能に素早くアクセスできます。

開き方: ⇧⌘P (macOS) / Ctrl+Shift+P (Windows/Linux)
使い方: コマンドパレットを開くと、検索ボックスが表示されます。実行したいコマンドの一部を入力すると、候補が絞り込まれて表示されます。リストから目的のコマンドを選択してEnterキーを押すと実行されます。
ファイルを開く: > を削除してファイル名を入力すると、ワークスペース内のファイルを検索して開くモードになります（前述の Ctrl+P / Cmd+P と同じ機能）。
よく使うコマンドの例:
- Format Document: ファイルの整形
- Install Extensions: 拡張機能のインストール
- Open Settings: 設定画面を開く
- Change Language Mode: 言語モードの変更（シンタックスハイライトなどが変わる）
- Git: Commit All: Gitのコミットを実行

コマンドパレットを使いこなすことは、VS Codeでの作業効率を大幅に向上させる鍵となります。迷ったらとりあえずコマンドパレットを開いてみましょう。

この章では、VS Codeの基本的な画面構成とファイル操作、そして強力なコマンドパレットについて学びました。これらの基本をマスターすれば、VS Codeでのコーディング作業がスムーズに行えるようになります。

第3章：コード編集の基本機能をマスターする – 効率的な入力と修正

VS Codeが開発者に愛される大きな理由の一つが、その優れたコード編集機能です。手入力の量を減らし、正確性を高め、コードの可読性を向上させるための様々な機能が搭載されています。この章では、これらの基本編集機能をマスターし、コーディング効率を向上させる方法を学びます。

3.1 シンタックスハイライトとIntelliSense (入力補完)

シンタックスハイライト: 開いているファイルの言語（例えばJavaScript, Python, HTMLなど）を自動的に認識し、キーワード、変数、文字列、コメントなどを色分けして表示する機能です。これにより、コードの構造が一目で分かりやすくなり、可読性が向上します。VS Codeは非常に多くの言語のシンタックスハイライトに対応しています。
IntelliSense (入力補完): コードを入力している最中に、候補となるキーワード、関数名、変数名などを表示し、入力を補完してくれる機能です。これはVS Codeの最も便利な機能の一つです。
- 開き方: 通常は入力中に自動的に候補が表示されます。手動で候補を表示したい場合は ⌃Space (macOS) / Ctrl+Space (Windows/Linux) を押します。
- 機能:
  - 単語補完: 入力中の単語と同じものがファイル内にあれば候補として表示します。
  - 言語固有の補完: 宣言済みの変数、関数、クラス、モジュールなどが候補として表示されます。多くの言語では、オブジェクトやライブラリのメソッドやプロパティもドット(.)などを入力した際に候補表示されます。
  - ドキュメント表示: 候補の横や上に、その項目に関する短いドキュメントや型情報が表示されることがあります。
- IntelliSenseの機能は、使用している言語やインストールしている拡張機能によって大きく強化されます。例えば、JavaScript/TypeScriptでは標準で強力なIntelliSenseが利用できますが、PythonやPHPなどの言語では、それぞれの言語サポート拡張機能をインストールすることで、より賢い補完が可能になります。

3.2 コードスニペットの活用

スニペットとは、よく使うコードの定型文を短いキーワードで入力し、展開する機能です。例えば、HTMLで ! と入力してTabキーを押すと、基本的なHTML5のひな形が一瞬で生成される、といった具合です。

VS Codeは多くの言語に標準で便利なスニペットを用意しています。
スニペットは通常、キーワードを入力して候補に表示されたらTabキーまたはEnterキーで展開します。
自分でよく使うコードパターンをスニペットとして登録することも可能です（後述の第6章で解説）。

スニペットを使いこなすことで、繰り返し入力する定型コードの手間を省き、コーディング速度を大幅に向上させることができます。

3.3 複数カーソル編集で一括修正

複数箇所に同時にカーソルを置いて、一度に入力や削除を行う機能です。同じ単語やコードパターンを複数箇所で変更したい場合に非常に強力です。

カーソルを追加: ⌥Click (macOS) / Alt+Click (Windows/Linux) で、クリックした場所に新しいカーソルを追加します。
同じ単語すべてにカーソルを追加: カーソルを合わせたい単語にカーソルを置いて、⇧⌘L (macOS) / Ctrl+Shift+L (Windows/Linux) を押すと、ファイル内のその単語すべてにカーソルが置かれます。
次に一致する単語にカーソルを追加: カーソルを合わせたい単語にカーソルを置いて、⌘D (macOS) / Ctrl+D (Windows/Linux) を押すと、次に同じ単語が出現する場所にカーソルが追加されます。繰り返し押すと、順次追加されます。
カーソルが複数ある状態でキーボード操作やテキスト入力を行うと、すべてのカーソル位置で同じ操作が行われます。

複数カーソル編集は、変数のリネームや、特定のパターンを持つ行を一括で編集したい場合に絶大な威力を発揮します。

3.4 矩形選択（ブロック選択）

通常の選択は行単位や連続したテキストですが、矩形選択は縦方向にブロックとしてテキストを選択する機能です。

選択方法:
- ⌥Shift+ドラッグ (macOS) / Shift+Alt+ドラッグ (Windows/Linux) でマウスをドラッグします。
- ⌥⇧↑ / ⌥⇧↓ (macOS) / Ctrl+Shift+Alt+↑ / Ctrl+Shift+Alt+↓ (Windows/Linux) で選択範囲を縦に拡張します。

矩形選択は、例えばCSVファイルで特定の列だけを選択・編集したい場合や、コードブロックの先頭に特定の文字を一括で挿入したい場合などに便利です。

3.5 コードの自動整形 (Format Document)

書式がバラバラなコードは読みにくく、エラーの原因にもなりかねません。VS Codeには、コードを自動的に整形（インデント、スペース、改行などを調整）する機能があります。

実行方法:
- ⇧⌥F (macOS) / Shift+Alt+F (Windows/Linux) のショートカットキーを押します。
- コマンドパレット (⇧⌘P / Ctrl+Shift+P) を開いて「Format Document」と入力して実行します。
- コードを右クリックし、メニューから「ドキュメントのフォーマット(Format Document)」を選択します。
デフォルトフォーマッター: 言語によっては、VS Code標準のフォーマッターが用意されています。
外部フォーマッターとの連携: Prettier, ESLint (with formatter plugin), Black, autopep8など、人気の外部フォーマッターを拡張機能としてインストールし、VS Codeのデフォルトフォーマッターとして設定することで、より強力でカスタマイズ可能なコード整形が可能になります（後述の第5章、6章で解説）。
保存時の自動整形: 設定でファイルを保存する際に自動的に整形を実行するように設定することも可能です (editor.formatOnSave 設定)。これはチーム開発など、コードの書式を統一したい場合に非常に便利です。

3.6 コメントアウト

コードの一部を一時的に無効化したり、説明を加えたりするためにコメントを使用します。

行コメント: 現在の行または選択範囲を、その言語の行コメント記法でコメントアウトします。
- ⌘/ (macOS) / Ctrl+/ (Windows/Linux)
- もう一度同じショートカットを押すとコメントアウトが解除されます。
ブロックコメント: 選択範囲を、その言語のブロックコメント記法でコメントアウトします（対応している言語のみ）。
- ⇧⌥A (macOS) / Shift+Alt+A (Windows/Linux)

3.7 コードの折りたたみ (Folding)

長いコードファイルでは、関数やクラス、制御構造（if文, for文など）のブロックを折りたたんで表示し、コード全体の構造を把握しやすくする機能があります。

行番号の左側にある小さな矢印をクリックすると、そのブロックを折りたたんだり展開したりできます。
メニューバーの 表示(View) > エディターの折りたたみ(Editor Folding) から様々な折りたたみ/展開操作を選択できます。
ショートカットキー:
- すべて折りたたむ: ⌘K ⌘0 (macOS) / Ctrl+K Ctrl+0 (Windows/Linux)
- すべて展開する: ⌘K ⌘J (macOS) / Ctrl+K Ctrl+J (Windows/Linux)
- 現在のカーソル位置のブロックを折りたたむ/展開する: ⌘⌥[ / ⌘⌥] (macOS) / Ctrl+Shift+[ / Ctrl+Shift+] (Windows/Linux)

3.8 検索と置換 (ファイル内、プロジェクト全体)

特定の文字列を探したり、別の文字列に置き換えたりする機能は、コード編集において必須です。

ファイル内検索・置換:
- ⌘F (macOS) / Ctrl+F (Windows/Linux) でファイル内検索バーが表示されます。
- 検索バーの左にあるアイコンをクリックするか、⌘⌥F (macOS) / Ctrl+H (Windows/Linux) で置換用の入力ボックスも表示されます。
- 検索オプション: 大文字/小文字を区別、単語単位で検索、正規表現を使用などがあります。
プロジェクト全体検索・置換:
- アクティビティバーの虫眼鏡アイコン（検索ビュー）をクリックするか、⇧⌘F (macOS) / Ctrl+Shift+F (Windows/Linux) でプロジェクト全体検索ビューを開きます。
- 検索ボックスに検索したい文字列を入力すると、ワークスペース内のすべてのファイルから一致する箇所が表示されます。
- 検索ボックスの下にある矢印アイコンをクリックすると置換用の入力ボックスが表示されます。
- 検索対象から除外したいファイルやフォルダがある場合は、「除外するファイル」の欄にパターンを入力します（例: **/node_modules/**）。
- 置換は、ファイルごとに個別に実行するか、すべての検索結果に対して一括で実行することも可能です。

ファイル内検索とプロジェクト全体検索・置換を使いこなすことで、大規模なコードベースでも目的のコードを素早く見つけ出し、効率的に修正できます。

この章で紹介した機能は、VS Codeが提供する編集機能のほんの一例ですが、これらをマスターするだけでも日々のコーディング作業は劇的に効率化されます。積極的にショートカットキーを活用し、これらの機能を習慣的に使うようにしましょう。

第4章：開発効率を爆上げする実践機能 – VS Codeの真価

VS Codeは単なるコードエディタではなく、開発プロセス全体をサポートするための強力な機能を統合しています。ターミナル、デバッグ、バージョン管理（Git）といった、開発に不可欠なツールとの連携がスムーズに行えることが、VS Codeの大きな強みであり、開発効率を「爆上げ」する鍵となります。

4.1 統合ターミナルを使おう

外部のターミナルアプリケーションを使う代わりに、VS Code内に組み込まれたターミナルを使うことで、エディタとコマンドライン作業をシームレスに行えます。

4.1.1 ターミナルの開き方と基本操作

開き方:
- メニューバーから ターミナル(Terminal) > 新しいターミナル(New Terminal) を選択します (⌃ + @ または Ctrl+@ がショートカットとして設定されていることが多いですが、環境によって異なる場合があります。最も確実なのは ^J (macOS) / Ctrl+J (Windows/Linux) でパネルを開き、ドロップダウンから「ターミナル」を選択することです）。
- コマンドパレット (⇧⌘P / Ctrl+Shift+P) を開いて「Create New Integrated Terminal」と入力して実行します。
場所: デフォルトではパネルの下部に表示されますが、設定で右側などに表示場所を変更することも可能です。
シェル: VS Codeは、お使いのOSのデフォルトシェル（WindowsならPowerShellやCommand Prompt、macOS/LinuxならBashやZshなど）を使用します。設定で別のシェルに変更することも可能です。
閉じる: ターミナル内で exit コマンドを実行するか、ターミナル右上にあるゴミ箱アイコンをクリックします。

4.1.2 複数のターミナルを管理する

複数のコマンド（例えば、開発サーバーの起動とログの監視、またはフロントエンドとバックエンドのサーバー同時起動など）を同時に実行したい場合、複数のターミナルインスタンスを開くことができます。

ターミナルパネルの右上にある「+」アイコンをクリックすると、新しいターミナルタブが開きます。
タブのドロップダウンリストから、開いているターミナルインスタンスを切り替えられます。
ターミナルを分割して表示することも可能です。

4.1.3 VS Codeタスクとの連携（簡単な紹介）

VS Codeのタスク機能を使うと、ビルド、テスト実行、リンティングなどの外部ツールコマンドをVS Code内から実行できます。統合ターミナルは、これらのタスクを実行するための主要な場所として利用されます。タスクの設定方法は少し高度になりますが、プロジェクトごとに定型的なコマンドを登録しておくと非常に便利です。コマンドパレットで「Run Task」と入力すると、定義済みのタスクを実行できます。

4.2 デバッグ機能を活用する

コードに潜むバグを見つけ出し、修正する作業は開発において非常に重要です。VS Codeに統合されたデバッグ機能は、多くのプログラミング言語に対応しており、効率的なデバッグを可能にします。

4.2.1 デバッグの概念と流れ

デバッグの基本的な流れは以下のようになります。

ブレークポイントの設定: コードの実行を一時停止したい場所に目印（ブレークポイント）を設定します。
デバッグの開始: デバッガーを起動し、コードの実行を開始します。
ステップ実行: ブレークポイントで停止したら、コードを1行ずつ実行したり（ステップオーバー）、関数の中に入ったり（ステップイン）、関数から抜けたり（ステップアウト）しながら、プログラムの動作を追跡します。
変数の確認: 実行を停止した時点での変数の値を確認し、予期せぬ値になっていないかなどを調べます。
デバッグコンソール: デバッグ中に式を評価したり、ログ出力を確認したりします。
問題の特定と修正: これらの情報をもとにバグの原因を特定し、コードを修正します。
デバッグの再開/停止: 修正後、デバッグを再開するか、デバッグセッションを停止します。

4.2.2 ブレークポイントの設定と解除

エディタ領域で、ブレークポイントを設定したい行の行番号の左側の余白をクリックします。赤い丸が表示されれば設定完了です。
再度クリックすると解除されます。
デバッグビュー（アクティビティバーの虫アイコン）で、設定済みのブレークポイント一覧を確認・管理できます。

4.2.3 デバッグの開始とステップ実行

デバッグの開始:
- アクティビティバーの虫アイコン（実行とデバッグビュー）をクリックします。
- デバッグする環境（言語やフレームワーク）を選択または設定します。初めての場合は「launch.json ファイルを作成します」をクリックして設定ファイルを作成する必要があります（後述）。
- 画面上部の緑色の再生ボタン（または F5 キー）をクリックしてデバッグを開始します。
ステップ実行: デバッグ中に表示されるデバッグコントロールバー（通常、エディタ領域の上部）を使用します。
- 続行 (Continue): 次のブレークポイントまで実行を再開します (F5)。
- ステップオーバー (Step Over): 現在の行を実行し、次の行に進みます。関数呼び出しの場合は、関数の中には入らずに関数全体の実行結果を待ちます (F10)。
- ステップイン (Step Into): 現在の行を実行し、関数呼び出しの場合はその関数の中に入ります (F11)。
- ステップアウト (Step Out): 現在の関数から抜け出し、呼び出し元に戻ります (⇧F11 / Shift+F11)。
- 再起動 (Restart): デバッグセッションを再起動します (⇧⌘F5 / Ctrl+Shift+F5)。
- 停止 (Stop): デバッグセッションを終了します (⇧F5 / Shift+F5)。

4.2.4 変数の確認、ウォッチ、呼び出しスタック

デバッグビューの左側には、デバッグ中のプログラムの状態を確認するための便利なセクションがあります。

変数 (Variables): 現在のスコープ（ローカル変数、グローバル変数など）にある変数のリストとその値が表示されます。値を展開してオブジェクトや配列の中身を確認できます。
ウォッチ (Watch): 特定の変数や式を登録しておき、実行が停止するたびにその値を確認できます。デバッグ中に常に監視したい変数がある場合に便利です。右クリックメニューから「ウォッチに追加」を選んだり、ウォッチセクションの「+」ボタンで式を直接入力して追加したりできます。
呼び出しスタック (Call Stack): 現在実行が停止している位置が、どの関数の呼び出しを経て到達したかを示します。これにより、プログラムの実行経路を追跡できます。
ブレークポイント (Breakpoints): 設定済みのブレークポイント一覧が表示されます。ここで一時的に無効にしたり、条件付きブレークポイントを設定したりできます。

4.2.5 Launch Configurationの作成（簡単な例）

デバッグを開始するためには、通常「Launch Configuration」と呼ばれる設定が必要です。これは .vscode/launch.json ファイルに記述され、どのプログラムを、どのような引数で、どのようなデバッガーを使って起動するかなどを定義します。

デバッグビューで「launch.json ファイルを作成します」をクリックすると、デバッグ環境を選択するドロップダウンが表示されます。例えばNode.js開発であれば「Node.js」を選択すると、基本的な launch.json ファイルが自動生成されます。

json { // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Launch Program", "program": "${file}" // 現在開いているファイルをデバッグする } ] }

この例は、現在アクティブなNode.jsファイルをデバッグするための最小限の設定です。"program" の値を特定のファイルパスに変更したり、"args" でコマンドライン引数を渡したり、"env" で環境変数を設定したりと、様々なカスタマイズが可能です。

VS Codeのデバッグ機能は非常に強力です。使いこなすことで、デバッグ時間を大幅に短縮し、開発効率を劇的に向上させることができます。

4.3 Git連携でバージョン管理を効率化

Gitは、ソフトウェア開発における最も一般的なバージョン管理システムです。VS CodeはGitとの連携機能が非常に強力で、ほとんどのGit操作をVS Code上で行うことができます。これにより、コマンドラインとエディタを行き来する手間が省け、バージョン管理が非常にスムーズになります。

前提: VS CodeのGit連携機能を利用するには、システムにGitがインストールされている必要があります。まだインストールしていない場合は、公式サイトからダウンロード・インストールしてください。

4.3.1 ソース管理パネルの概要

アクティビティバーの3つの丸が繋がったアイコン（ソース管理ビュー）をクリックすると、Gitの操作パネルが表示されます。

変更 (CHANGES): Gitが追跡しているファイルの中で、変更があったファイル一覧が表示されます。
- 変更がステージングされていないファイル (Changes)
- ステージングされているファイル (Staged Changes)
- 未追跡のファイル (Untracked Changes)
各ファイルの右クリックメニューから、変更の破棄、ファイルのオープン、ステージングなどの操作ができます。
ファイル名をクリックすると、差分ビューが表示され、現在のファイルと最後のコミットからの変更内容を比較できます。

4.3.2 変更の追跡とステージング

VS Codeでフォルダを開くと、VS CodeはそのフォルダがGitリポジトリであるかどうかを自動的に検出し、ソース管理ビューにその状態を表示します。
ファイルを編集すると、そのファイルは「変更 (CHANGES)」リストに表示されます。
変更をコミットするためには、まずその変更を「ステージング」する必要があります。
- 変更されたファイル名の横にある「+」アイコンをクリックすると、そのファイルがステージングされます。
- CHANGESヘッダーの「+」アイコンをクリックすると、すべての変更を一括でステージングできます。
ステージングされたファイルは「ステージングされた変更 (STAGED CHANGES)」リストに移動します。

4.3.3 コミットの実行

変更をステージングしたら、コミットメッセージを入力してコミットを実行します。
ソース管理ビューの上部にあるテキストエリアにコミットメッセージを入力します。
メッセージ入力欄の上にあるチェックマークアイコンをクリックするか、⌘Enter (macOS) / Ctrl+Enter (Windows/Linux) でコミットを実行します。
ドロップダウンメニューから、ステージングされた変更のみをコミット (Commit Staged)、すべての変更をコミット (Commit All)、変更をコミットしてプッシュ (Commit All and Push) などを選択できます。

4.3.4 リモートリポジトリとの連携（プッシュ、プル）

リモートリポジトリ（GitHub, GitLab, Bitbucketなど）との間で変更をやり取りすることも、VS Code上で行えます。

ステータスバーの左端に現在のブランチ名と、ローカルとリモートのコミット数の差が表示されます（例: main ↔ 1 はローカルが1コミット進んでいる状態）。ここをクリックするとプッシュ/プルなどの操作が選択できます。
ソース管理ビューの右上にある三点リーダーメニュー (…) をクリックすると、より詳細なGit操作メニューが表示されます。ここから「プッシュ (Push)」「プル (Pull)」「フェッチ (Fetch)」などの操作を選択できます。
初めてのリポジトリでリモートが設定されていない場合は、「リポジトリを公開 (Publish Repository)」というボタンが表示され、GitHubなどに簡単に公開できます。

4.3.5 ブランチ操作（作成、切り替え）

ブランチの作成や切り替えもVS Codeから簡単に行えます。

ステータスバーのブランチ名をクリックすると、ブランチ操作メニューが表示されます。「新しいブランチの作成 (Create new branch…)」や既存のブランチ一覧からの切り替えができます。
ソース管理ビューの三点リーダーメニュー (…) > ブランチ (Branches) からも同様の操作が可能です。

4.3.6 GitLens拡張機能の紹介（補足）

VS Codeの標準Git連携は非常に便利ですが、さらに強力なGit機能を求めるなら「GitLens」という拡張機能がおすすめです。コードの各行に最終変更者やコミット情報が表示されたり、Gitの履歴を詳細に追跡したりと、開発効率をさらに向上させることができます（第5章でも再掲します）。

4.4 EmmetでHTML/CSS入力を高速化

Emmetは、HTMLやCSSのコード入力を劇的に高速化するためのツールです。短い略記法（Abbreviation）を入力し、Tabキーなどを押すと、それが対応する長いコードに展開されます。VS CodeにはEmmetが標準で組み込まれており、HTML、CSS、SCSS、Lessなどのファイルで使用できます。

4.4.1 Emmetとは？

例えば、HTMLで div.container>h1+p と入力してTabキーを押すと、以下のように展開されます。

“`html

“`

CSSで m10+p20 と入力してTabキーを押すと、

css margin: 10px; padding: 20px;

のように展開されます。

これはほんの一例ですが、Emmetを使うことで、手入力を大幅に減らし、マークアップ作業の速度を格段に上げることができます。

4.4.2 基本的な記法と展開

Emmetの基本的な記法には以下のようなものがあります。

要素: 要素名（div, p, a, img など）
クラス: 要素名に続いて . とクラス名（例: div.item, p.text-center）。要素名を省略すると div になります（例: .container は <div class="container"></div>）。
ID: 要素名に続いて # とID名（例: div#header, p#greeting）。要素名を省略すると div になります（例: #main は <div id="main"></div>）。
階層構造:
- >: 子要素（例: ul>li>a）
- +: 兄弟要素（例: h1+p+img）
- ^: 親要素に戻る（例: div>p>span^a は <div><p><span></span></p><a></a></div> となる）
複数要素: * と個数（例: ul>li*5 は <li> が5つ並ぶリスト）。
テキスト: {} で囲む（例: h1{Hello VS Code}）。
属性: [] で囲み、属性名と値を = で指定（例: a[href="#"]{Link}, img[src="path/to/img.png" alt="Image"]）。
連番: $ を使うと要素名や属性値に連番を挿入できます（例: ul>li.item-$*3 は <li class="item-1"></li><li class="item-2"></li><li class="item-3"></li>）。

CSSでのEmmet記法も非常に豊富で、プロパティ名の略記（m → margin, p → padding, d → display など）と値の指定を組み合わせることで素早く入力できます。

4.4.3 チートシートと応用

Emmetの記法は非常に多岐にわたります。最初は基本的なものから始め、慣れてきたら公式のチートシートなどを参考に、より複雑な記法を試してみるのがおすすめです。Emmetをマスターすることで、特にHTMLとCSSのコーディング速度が劇的に向上し、開発効率爆上げを実感できるでしょう。

この章で解説した統合ターミナル、デバッグ機能、Git連携、Emmetは、VS Codeの強力な機能のごく一部ですが、これらを使いこなすことで、開発ワークフロー全体が非常にスムーズになり、生産性を大きく向上させることができます。

第5章：拡張機能を活用してVS Codeを強化する – 無限の可能性

VS Codeの最大の魅力の一つは、その豊富な拡張機能エコシステムです。拡張機能を使うことで、VS Codeの機能を特定の言語やフレームワークに対応させたり、新しい機能を追加したり、見た目をカスタマイズしたりと、無限の可能性が広がります。この章では、拡張機能の基本的な使い方と、開発効率をさらに高めるためのおすすめ拡張機能をいくつか紹介します。

5.1 拡張機能の探し方とインストール

拡張機能ビューを開く: アクティビティバーの四角が組み合わさったアイコン（拡張機能ビュー）をクリックします (⇧⌘X (macOS) / Ctrl+Shift+X (Windows/Linux) のショートカットも使えます)。
検索: 拡張機能ビューの上部にある検索ボックスに、探したい拡張機能の名前や機能に関連するキーワード（例: Python, React, formatter, theme など）を入力します。
拡張機能の選択とインストール: 検索結果から目的の拡張機能を見つけたら、クリックして詳細を表示します。提供元、説明、評価、インストール数、レビューなどを確認し、インストールを判断します。問題なさそうであれば、「Install」ボタンをクリックします。
インストールが完了すると、「Install」ボタンが「Manage」や「Uninstall」に変わります。拡張機能によっては、インストール後にVS Codeの再起動が必要な場合があります。

5.2 おすすめ拡張機能カテゴリと具体例

VS Codeの拡張機能は非常に多岐にわたりますが、ここでは開発効率向上に直結するいくつかのカテゴリと、それぞれのおすすめ拡張機能をいくつか紹介します。

5.2.1 言語サポート系

特定のプログラミング言語のシンタックスハイライト、IntelliSense（入力補完）、デバッグ、コードジャンプなどの機能を強化します。

Python: 公式の「Python」拡張機能。Microsoftが提供しており、Pylance (高速な言語サーバー)、デバッグ、テスト、リント、フォーマットなどの機能を提供します。
JavaScript/TypeScript: VS Code自体がJavaScript/TypeScriptに強く対応していますが、「JavaScript and TypeScript Nightly」など、最新機能を先取りできる拡張機能もあります。フレームワーク固有のサポート（例:「Volar」(Vue 3)、「Angular Language Service」）も重要です。
PHP: 「PHP Intelephense」や「PHP Debug」など。PHPの強力な補完やデバッグを可能にします。
Java: 「Extension Pack for Java」。Java開発に必要な複数の拡張機能（Language Support, Debugger, Maven, Gradleなど）をまとめてインストールできます。
C++: 「C/C++ Extension Pack」。Microsoft提供のC/C++言語サポート、デバッグなどの機能を提供します。
Markdown: 「Markdown All in One」。Markdownの編集を効率化（プレビュー、目次作成、ショートカットなど）。

5.2.2 Linter & Formatter系

コードの品質チェック（Linter）と自動整形（Formatter）を行う拡張機能です。チーム開発でコードスタイルを統一したり、エラーを早期に発見したりするのに役立ちます。

Prettier – Code formatter: 多くの言語（JavaScript, CSS, HTML, JSONなど）に対応した人気フォーマッター。設定を共有しやすく、チーム開発におすすめです。
ESLint: JavaScript/TypeScriptのLinter。コードの記述ミスや潜在的な問題を検出します。Formatter機能も兼ねる設定も可能です。
Black Formatter: Pythonの人気のFormatter。設定項目が少なく、素早くコードスタイルを統一できます。
autopep8: PythonのAnother Formatter。
stylelint: CSS/SCSS/Lessなどのスタイルシート用Linter。

5.2.3 テーマ & アイコン系

VS Codeの見た目を変更し、作業のモチベーションを高めたり、視認性を向上させたりします。

Material Icon Theme: エクスプローラービューのファイルやフォルダのアイコンを、ファイルの種類に合わせて見やすいアイコンに変更します。
One Dark Pro: 人気のエディタ Atom のデフォルトテーマをVS Codeに移植したもの。
Dracula Official: 暗いテーマの定番。
ayu: 異なるスタイル（Dark, Mirage, Light）を持つテーマ。

5.2.4 Git連携強化系 (GitLens再掲)

前述のGit連携をさらに強化する拡張機能です。

GitLens — Git supercharged: コードの各行の変更履歴（著者、コミットメッセージ、変更日時など）をインラインで表示したり、強力なコミット履歴ビューを提供したりします。Gitを深く使うなら必須と言える拡張機能です。

5.2.5 開発効率化系 (Live Server, Path IntelliSense, Dockerなど)

特定の開発ワークフローを効率化したり、他のツールとの連携を強化したりする拡張機能です。

Live Server: HTMLファイルなどを保存するたびにブラウザ表示を自動的にリロードしてくれるローカル開発サーバー。フロントエンド開発で非常に便利です。
Path IntelliSense: ファイルパスを入力する際に、パスの補完候補を表示してくれます。特にHTMLやCSSで画像パスなどを指定する際に便利です。
Docker: Dockerfileのシンタックスハイライト、コマンド補完、コンテナ管理など、Docker開発をサポートします。
Remote – SSH: リモートサーバーにSSH接続し、ローカルのVS Codeからリモート上のファイルを直接編集・デバッグできるようにします。非常に強力です。
Peacock: VS Codeウィンドウごとに異なる色を設定し、複数のプロジェクトを開いている際に区別しやすくします。

5.2.6 その他の便利ツール

Settings Sync: 設定、キーボードショートカット、インストール済みの拡張機能などをGitHub Gist経由で同期し、複数の環境で同じVS Code環境を利用できるようにします。（VS Code自体にAccount Sync機能が組み込まれたため、基本的にはそちらを使用します。）
Todo Tree: コード内の TODO: や FIXME: といったコメントを抽出し、一覧表示してくれます。

これらの拡張機能はほんの一例です。あなたの開発する言語やフレームワーク、個人的な好みに合わせて、様々な拡張機能を試してみてください。新しい拡張機能を発見することも、VS Codeを使いこなす楽しみの一つです。

5.3 拡張機能の管理と設定

インストールした拡張機能は、拡張機能ビューの「Installed」セクションで確認できます。

無効化/アンインストール: 各拡張機能のギアアイコン（または右クリックメニュー）から、一時的に無効化したり、完全にアンインストールしたりできます。問題が発生した場合、最近インストールした拡張機能を無効化してみると原因特定に役立つことがあります。
設定: 多くの拡張機能は、VS Codeの設定画面 (⌘, / Ctrl+,) から詳細な設定を行うことができます。例えば、Prettierの設定や、特定の言語サポート拡張機能のLintルールの設定などです。

拡張機能を賢く選び、適切に管理・設定することで、VS Codeはあなたのための最強の開発環境へと進化します。

第6章：VS Codeをさらに使いこなすためのカスタマイズ – 自分だけの開発環境

VS Codeは非常に柔軟なカスタマイズが可能です。エディタの見た目から、ショートカットキー、さらにはコードスニペットまで、自分好みに設定することで、開発体験はさらに快適になり、効率も向上します。この章では、VS Codeのカスタマイズ方法を詳しく見ていきます。

6.1 設定画面を開く (Settings)

VS Codeのあらゆる設定は、設定画面から行います。

開き方:
- メニューバーから コード(Code) (macOS) または ファイル(File) (Windows/Linux) > 基本設定(Preferences) > 設定(Settings) を選択します。
- アクティビティバーの一番下にある歯車アイコンをクリックし、「設定(Settings)」を選択します。
- 最も速い方法: ⌘, (macOS) / Ctrl+, (Windows/Linux) のショートカットキーを使います。
設定画面はGUIで操作できますが、内部的にはJSONファイル（settings.json）で管理されています。設定画面の右上にあるファイルアイコンをクリックすると、直接 settings.json ファイルを編集することもできます。GUIとJSONエディタは同期しているので、使いやすい方を選んでください。

6.2 ユーザー設定とワークスペース設定の違い

VS Codeの設定には、以下の2種類があります。

ユーザー設定 (User Settings): お使いのコンピュータ上のすべてのVS Codeインスタンス、すべてのワークスペースに適用される設定です。フォントサイズやテーマ、一般的なエディタの動作など、自分自身の開発環境全体に関わる設定はこちらで行います。
ワークスペース設定 (Workspace Settings): 現在開いているフォルダ（ワークスペース）のみに適用される設定です。プロジェクト固有の設定（例: インデントスタイル、特定のLinter/Formatterの設定パス、プロジェクト用のタスク設定など）はこちらで行います。ワークスペース設定は .vscode/settings.json ファイルとしてワークスペースフォルダ内に保存されるため、チームメンバーとプロジェクト固有の設定を共有するのに便利です。

設定画面の上部にあるタブで、「User」と「Workspace」を切り替えることができます。通常はユーザー設定で全体的な好みを設定し、特定のプロジェクトでそれを上書きしたい場合のみワークスペース設定を使用します。

6.3 よく使う設定項目の例

設定画面には非常に多くの項目がありますが、開発効率に直結する代表的な設定項目をいくつか紹介します。検索バーで設定項目のキーワードを入力して探すことができます。

6.3.1 エディタの見た目 (フォント、タブサイズ、テーマ、アイコンテーマ)

Editor: Font Family: エディタで使用するフォントを指定します。プログラミングに適した等幅フォント（例: Fira Code, Source Han Code JP, Ricty Diminishedなど）を設定すると、コードが読みやすくなります。フォント名のリストをカンマ区切りで指定し、最初のフォントが見つからない場合は次が使われます。
Editor: Font Size: フォントサイズをピクセル単位で指定します。
Editor: Tab Size: タブ文字の幅（表示上のスペース数）を指定します。多くのプロジェクトで標準的な4に設定されていることが多いです。
Editor: Insert Spaces: タブキーを押したときに、タブ文字を挿入するか、指定したタブサイズ分のスペースを挿入するかを決定します。多くの言語やプロジェクトでスペースを使用するのが一般的です（true に設定）。
Workbench: Color Theme: VS Code全体の配色テーマを選択します。ダークテーマやライトテーマなど、多くの選択肢があります。インストールしたテーマ拡張機能もここに表示されます。
Workbench: File Icon Theme: エクスプローラービューのファイルアイコンのテーマを選択します。インストールしたアイコンテーマ拡張機能がここに表示されます。

6.3.2 エディタの動作 (自動保存、Whitespace表示、ミニマップ)

Files: Auto Save: 前述の自動保存機能の設定です (off, afterDelay, onFocusChange, onWindowChange)。開発効率を上げるには afterDelay がおすすめです。
Editor: Render Whitespace: 半角スペースやタブ文字を表示するかどうか。all に設定すると、隠れている空白文字が表示され、インデントのずれなどに気づきやすくなります。
Editor: Minimap Enabled: エディタの右側にコード全体の縮小版（ミニマップ）を表示するかどうか。コード内の位置を素早く移動したい場合に便利です。
Editor: Word Wrap: 行がエディタ幅を超えたときに折り返すかどうか (on, off, wordWrapColumn など)。長い行が多い場合に設定すると、横スクロールの手間が省けます。

6.3.3 ファイル関連 (エクスプローラーの表示、新規ファイル設定)

Files: Exclude: エクスプローラービューや検索対象から除外するファイル/フォルダパターンを設定します（例: **/.git, **/node_modules）。プロジェクトに関係ないファイルが大量にある場合にリストをすっきりさせられます。
Files: Associations: 特定の拡張子を持つファイルを、別の言語モードとして開くように関連付けを設定できます。

6.3.4 ターミナル設定

Terminal > Integrated: Default Profile: Windows, Linux, macOS: 統合ターミナルで使用するデフォルトのシェルを指定できます。

6.3.5 言語固有の設定

多くの設定項目は、言語ごとに異なる値を設定できます。設定画面の上部で言語を選択するか、settings.json で言語固有の設定ブロックを記述します。例えば、Pythonファイルだけインデントサイズを2にしたい場合などです。

json "[python]": { "editor.tabSize": 2 }

6.4 キーボードショートカットの確認とカスタマイズ (Keyboard Shortcuts)

VS Codeを効率的に使う上で、キーボードショートカットは非常に重要です。VS Codeには膨大な数のショートカットが用意されており、また自由にカスタマイズできます。

開き方:
- メニューバーから コード(Code) (macOS) または ファイル(File) (Windows/Linux) > 基本設定(Preferences) > キーボードショートカット(Keyboard Shortcuts) を選択します。
- コマンドパレット (⇧⌘P / Ctrl+Shift+P) を開いて「Open Keyboard Shortcuts」と入力して実行します。
- ショートカット: ⌘K ⌘S (macOS) / Ctrl+K Ctrl+S (Windows/Linux)。
キーボードショートカット画面では、コマンドとそのショートカットキーの一覧が表示されます。コマンド名やキーバインドで検索できます。
特定のコマンドのショートカットを変更したい場合は、そのコマンドを右クリックして「キーバインドの変更(Change Keybinding…)」を選択し、新しいショートカットキーを入力します。
同じショートカットキーが複数のコマンドに割り当てられている場合は警告が表示されます。
画面の右上にあるファイルアイコンをクリックすると、keybindings.json ファイルを直接編集できます。

よく使う操作にはショートカットを覚え、さらに自分にとって使いやすいようにカスタマイズすることで、マウスの使用頻度を減らし、コーディング速度を大きく向上させることができます。

6.5 ユーザー定義スニペットを作成する

前述のコードスニペットは非常に便利ですが、VS Codeに標準で用意されていない、自分自身がよく使うコードパターンもあるでしょう。VS Codeでは、ユーザー定義スニペットを作成して、自分のワークフローに合わせてカスタマイズできます。

開き方:
- メニューバーから ファイル(File) > 基本設定(Preferences) > ユーザースニペットの構成(Configure User Snippets) を選択します。
- コマンドパレット (⇧⌘P / Ctrl+Shift+P) を開いて「Configure User Snippets」と入力して実行します。
スニペットを設定したい言語（例: javascript.json, html.json など）を選択するか、すべての言語に適用する global.code-snippets を選択します。選択すると、対応する .code-snippets ファイルがエディタで開きます。
このJSONファイルの中に、スニペットの定義を記述します。定義はJSONオブジェクトの形式で行います。

json { "Print to console": { // スニペットの名称 (候補リストに表示される) "prefix": "log", // 展開するためのキーワード (これを入力してTabを押す) "body": [ // スニペットの内容 (文字列の配列) "console.log('$1');", // $1 は展開後にカーソルが置かれる位置 "$2" // $2 は次のカーソル位置 ], "description": "Logs output to console" // スニペットの説明 } }

prefix: スニペットを展開するためのキーワード。複数指定可能。
body: 展開されるコード。文字列の配列で、各要素が行に対応します。
- $ で始まる記法は、展開後のカーソル位置やタブストップを指定できます。
- $1, $2, … はタブストップ（Tabキーで順に移動できる位置）。
- ${1:placeholder} のようにすると、初期値（placeholder）を設定できます。
- $0 または $TM_SNIPPET_END はスニペット展開完了後に最終的にカーソルが置かれる位置。
- ${CLIPBOARD} はクリップボードの内容を挿入します。
description: スニペットの説明。IntelliSenseの候補リストに表示されます。

ユーザー定義スニペットを作成することで、繰り返し入力するボイラープレートコードや複雑な構文も一瞬で挿入できるようになり、コーディング速度が大幅に向上します。最初は簡単なものから試してみて、徐々に自分専用のスニペットライブラリを構築していくのがおすすめです。

VS Codeのカスタマイズオプションは非常に豊富です。時間をかけて自分の好みに合わせて設定を調整し、ショートカットを覚え、スニペットを作成することで、VS Codeはあなたの最も強力な開発ツールとなるでしょう。

第7章：トラブルシューティングとよくある質問 – つまずきやすいポイントを解決

VS Codeは安定していますが、開発環境は様々な要素（OS、他のソフトウェア、拡張機能など）が組み合わさっているため、時には予期せぬ問題が発生することもあります。また、初心者の方がよく疑問に思う点もあります。この章では、VS Code使用時によくある問題とその解決策、そしてよくある質問について解説します。

7.1 VS Codeが重い、動作が遅い

大規模なプロジェクトを開いたときや、特定の操作を行ったときにVS Codeの動作が遅くなることがあります。

原因と対策:
- 多くのファイルを開いている、または巨大なファイルを開いている: 不要なファイルやタブを閉じます。巨大なファイルを扱う際は、一時的にそのファイルだけを開くなどの工夫をします。
- 多くの拡張機能がインストールされている、または特定の拡張機能がリソースを消費している: 最近インストールした拡張機能を無効化したり、使用頻度の低い拡張機能をアンインストールしたりしてみます。特にLintやFormatをリアルタイムで行う拡張機能は、設定によっては負荷が高い場合があります。拡張機能ビューの右上にある「…」メニュー > 「拡張機能のプロセス情報を表示(Show Running Extensions)」から、各拡張機能が使用しているCPUやメモリを確認できます。
- ファイル監視がリソースを消費している: Gitリポジトリやnode_modulesなど、多くのファイルがあるフォルダを開いている場合に発生しやすいです。.vscode/settings.json で files.watcherExclude 設定を使って、監視対象から特定のフォルダを除外できます。
- 検索やGit操作など、特定の操作で重くなる: 大規模な検索やGit操作は一時的に負荷が高まります。処理が完了するまで待つか、必要に応じて操作範囲を絞ります。
- VS Code自体の問題: VS Codeや使用している言語サーバーなどがクラッシュしている可能性があります。VS Codeを再起動します。
- VS Codeのバージョンが古い: 不具合が修正されている可能性があります。VS Codeを最新バージョンにアップデートします。
- システムのスペック不足: お使いのコンピュータのメモリやCPUが不足している場合、根本的な解決にはハードウェアの増強が必要になることがあります。

7.2 拡張機能がうまく動作しない

インストールした拡張機能が期待通りに動かない、エラーが出る、他の機能と干渉するといった場合があります。

原因と対策:
- インストールが不完全: 拡張機能を一度アンインストールし、再度インストールしてみます。VS Codeの再起動も試します。
- 他の拡張機能との競合: 複数の似た機能を持つ拡張機能（例: 複数のFormatterやLinter）がインストールされていると競合することがあります。競合しそうな拡張機能を一時的に無効化し、問題が解決するか確認します。
- 拡張機能自体のバグ: 拡張機能にバグが含まれている可能性があります。拡張機能のマーケットプレイスのページで、評価やレビューを確認したり、GitHubリポジトリなどで既知の問題が報告されていないか確認したりします。問題が深刻な場合は、別の代替拡張機能を探すか、作者に報告します。
- 設定が正しくない: 拡張機能は設定画面から様々なオプションを設定できるものが多いです。ドキュメントを確認し、設定が正しく行われているか確認します。ワークスペース設定がユーザー設定を上書きしている可能性も考慮します。
- 言語環境やパスの問題: 例えばPython拡張機能がPythonインタープリターを見つけられない、Formatterの実行ファイルにパスが通っていない、などの場合があります。VS Codeの出力パネル（表示(View) > 出力(Output)）で、拡張機能からのログやエラーメッセージを確認します。

7.3 設定変更が反映されない

設定を変更したのに、エディタの動作や見た目が変わらない場合があります。

原因と対策:
- 設定の種類が違う: 変更した設定がユーザー設定なのか、ワークスペース設定なのかを確認します。ワークスペース設定が開いているフォルダのみに適用されることを理解しておきましょう。場合によってはワークスペース設定がユーザー設定を上書きしています。
- ファイルの種類が違う: 言語固有の設定を変更した場合、その設定はその言語のファイルを開いているときにのみ適用されます。
- 設定項目名が間違っている: 直接 settings.json を編集した場合、設定項目名やJSONの構文が間違っている可能性があります。設定画面（GUI）で項目を探して設定するか、JSON編集時のエラー表示を確認します。
- VS Codeの再起動が必要: 一部の設定変更は、VS Codeを再起動しないと反映されない場合があります。
- 拡張機能による上書き: インストールしている拡張機能が、その設定項目を上書きしている可能性があります。拡張機能の設定を確認してみましょう。

7.4 ターミナルで日本語が文字化けする/パスが通らない

統合ターミナルで日本語が正しく表示されなかったり、インストールしたはずのコマンドが実行できなかったりすることがあります。

原因と対策:
- 文字コードの問題: ターミナルの文字コード設定が、使用しているOSやシェルの文字コードと合っていない可能性があります。VS Codeのターミナル設定 (terminal.integrated.defaultProfile.* など) や、シェルの設定を確認します。特にWindowsでは、VS Codeのターミナルで文字コードをUTF-8に設定すると解決することが多いです（設定 terminal.integrated.profiles.windows の各プロファイルで "args": ["/k", "chcp 65001"] を追加するなど）。
- PATH設定の問題: 新しくインストールしたコマンド（例: Node.js, Python, Gitなど）にシステムのPATHが通っていないか、VS Codeが起動時に読み込むPATHが最新でない可能性があります。VS Codeを再起動したり、コンピュータを再起動したりすると解決することがあります。システムの環境変数設定自体を確認・修正する必要がある場合もあります。
- シェルの問題: 使用しているシェル（PowerShell, Bash, Zshなど）自体の設定やバージョンに問題がある可能性があります。VS Codeのターミナル設定で別のシェルを試してみたり、シェルの設定ファイル（.bashrc, .zshrc, profile など）を確認してみます。

7.5 ファイルエンコーディングの問題

ファイルを開いたときに文字化けしたり、保存したファイルが他のエディタで文字化けしたりすることがあります。

原因と対策:
- エンコーディングの不一致: ファイルが保存された際のエンコーディング（文字コード、例: UTF-8, Shift-JIS, EUC-JPなど）と、VS Codeが開く際に自動検出したエンコーディングが異なっている場合に発生します。
- 解決方法: ステータスバーの右下にあるエンコーディング表示（通常は UTF-8 などと表示されています）をクリックし、「エンコーディング付きで再度開く(Reopen with Encoding)」を選択して、正しいエンコーディングを選び直します。ファイルを開くたびに文字化けする場合は、files.encoding 設定でデフォルトのエンコーディングを指定するか、言語固有の設定で指定します。
- 保存時のエンコーディング指定: 正しいエンコーディングで保存し直したい場合は、ステータスバーのエンコーディング表示をクリックし、「エンコーディング付きで保存(Save with Encoding)」を選択して、適切なエンコーディングを選んで保存します。

7.6 LinterやFormatterが期待通りに動かない

保存時に自動整形されない、エラーが表示されない、あるいは誤ったエラーが表示されるなどの問題です。

原因と対策:
- 拡張機能がインストールされていない: 使用したい言語やフレームワークに対応したLinter/Formatter拡張機能がインストールされているか確認します。
- 設定が有効になっていない: 設定 (editor.formatOnSave, eslint.enable など) が正しく有効になっているか確認します。ワークスペース設定で無効にされている可能性も考慮します。
- 必要なツールがインストールされていない: LinterやFormatter本体（例: eslint, prettier, black コマンド）がシステムにインストールされているか、プロジェクトの依存関係（package.json など）に含まれているか確認します。VS Code拡張機能は、これらの外部ツールを実行しているだけの場合が多いです。
- 設定ファイルが見つからない/誤りがある: Linter/Formatterの設定ファイル（例: .eslintrc.js, .prettierrc.json, pyproject.toml など）がプロジェクトの適切な場所に存在し、内容に誤りがないか確認します。
- 出力パネルの確認: VS Codeの出力パネルで、ドロップダウンから「ESLint」「Prettier」「Python (LSP)」などを選択し、関連するエラーメッセージやログが出力されていないか確認します。

7.7 Git連携でエラーが出る

Git操作（コミット、プッシュ、プルなど）でエラーが発生することがあります。

原因と対策:
- Gitが正しくインストールされていない/PATHが通っていない: システムにGitコマンドがインストールされ、VS Codeがそれを認識できるか確認します。
- 認証情報が設定されていない: リモートリポジトリへのアクセスに必要な認証情報（ユーザー名、パスワード、SSHキーなど）が正しく設定されていない可能性があります。コマンドラインで git push など同じ操作を行い、エラーメッセージから原因を特定します。
- リポジトリの状態が不正: .git フォルダの内容が破損しているなど、リポジトリ自体の状態に問題がある可能性があります。コマンドラインで git status などを行い、リポジトリの状態を確認します。
- コンフリクト: プルやプッシュ時にコンフリクト（変更の衝突）が発生している可能性があります。VS Codeのソース管理ビューでコンフリクトしているファイルを確認し、手動で解決する必要があります。
- VS CodeのGit機能のバグ: まれにVS CodeのGit連携機能にバグがある場合があります。VS Codeを再起動するか、コマンドラインで同じ操作を実行して問題を切り分けます。

7.8 その他よくある質問

日本語化したい: VS Codeを日本語化するには、「Japanese Language Pack for Visual Studio Code」という公式拡張機能をインストールします。インストール後にVS Codeを再起動すると日本語になります。
新しい言語を書きたい: 書きたい言語に対応した拡張機能をインストールします。多くの場合、言語名で検索すれば公式またはコミュニティ製の拡張機能が見つかります。
ダークテーマ/ライトテーマを変えたい: 設定 (⌘, / Ctrl+,) で「Color Theme」を検索して変更します。拡張機能ビューで「theme」と検索すると、新しいテーマをたくさん見つけられます。

もし上記で解決しない問題に直面した場合は、VS Codeの公式ドキュメントを参照したり、Stack OverflowなどのQ&Aサイトで質問したり、GitHubのリポジトリでissueを検索・報告したりすることを検討しましょう。

まとめ：VS Codeマスターへの道は続く

この記事では、VS Codeを「今すぐ始める」ために必要な、インストール方法から基本的な画面構成と操作、コード編集の効率化機能、ターミナルやデバッグ、Git連携といった実践的な機能、そして開発効率を爆上げするための拡張機能の活用や自分好みのカスタマイズ方法、さらにはよくあるトラブルシューティングまで、幅広く詳細に解説しました。

VS Codeは、軽量でありながら非常に高機能で柔軟なコードエディタです。シンタックスハイライトやIntelliSenseによる快適な入力、複数カーソル編集やEmmetによる高速化、統合ターミナルやGit連携によるスムーズなワークフロー、そして強力なデバッグ機能は、あなたの開発作業を劇的に効率化し、より快適なものにしてくれるでしょう。

しかし、VS Codeの真価は、その豊富な拡張機能と高いカスタマイズ性にあります。この記事で紹介できたのは、数ある拡張機能や設定オプションのごく一部に過ぎません。あなたの開発する言語やフレームワーク、そして個人のワークフローに合わせて、VS Codeを自由にカスタマイズしていくことで、あなたにとって最適な開発環境を構築できます。

今日学んだ基本を活かし、積極的にVS Codeを使い込んでみてください。分からないことや、もっと便利にしたいと感じることがあれば、まずはコマンドパレットを開いて関連するコマンドを探してみたり、拡張機能マーケットプレイスでキーワード検索してみたりすることをおすすめします。公式ドキュメントも非常に充実しています。

VS Codeの学習は一度で終わりではありません。日々進化するVS Code本体や新しい拡張機能、そしてあなた自身の成長に合わせて、常に最適な開発環境を追求していくことが、「開発効率を爆上げ」し続けるための鍵となります。

さあ、このガイドを手に、今日からVS Codeを使った開発の旅を始めましょう！快適で生産的なコーディングライフがあなたを待っています。