第1章: Visual Studio Codeとは

1.1 Visual Studio Codeの概要

Visual Studio Code（VS Code） は、Microsoft が提供する無料のソースコードエディタです。軽量でありながら高機能で、多くのプログラミング言語をサポートしているため、初心者からプロのエンジニアまで幅広く利用 されています。

主な特徴は以下のとおりです：

• 高速・軽量：起動が速く、動作が軽い
• 豊富な拡張機能：自分に合った機能を追加できる
• 多くのプログラミング言語に対応：シンタックスハイライトやオートコンプリートが充実
• デバッグ機能：ブレークポイントを設定し、コードの動きを確認できる

1.2 VS Codeを使うメリット

新人エンジニアが VS Codeを学ぶべき理由 を以下にまとめます。

① 無料で使える

VS Codeはオープンソースであり、すべての機能を 無料 で利用できます。他の多機能IDE（例: IntelliJ IDEA, PyCharm）は有料版があるため、コスト面でもVS Codeは魅力的です。

② 軽量で動作が速い

一般的なIDE（統合開発環境）は、動作が重くなることが多いですが、VS Codeは非常に軽量 です。そのため、低スペックなPCでも快適 に動作します。

③ 初心者でも使いやすい

VS Codeのインターフェースは直感的で、初心者でも迷わずに使い始められます。また、拡張機能を追加することで、プログラミング学習を効率よく進められます。

④ プログラミング言語のサポートが充実

デフォルトで多くの言語（Java, JavaScript, Python, C#, HTML, CSS など）に対応しており、追加の設定なしでコード補完やシンタックスハイライトが使えます。

⑤ 拡張機能で自由にカスタマイズ

VS Codeには数千以上の 拡張機能 があり、自分好みにエディタをカスタマイズできます。例えば：

• Live Server: HTMLやCSSの変更を即座にプレビュー
• Prettier: コードを自動フォーマット

⑥ Gitとの統合が便利

VS CodeにはGitが組み込まれている ため、GitHubやGitLabと連携してコードのバージョン管理が簡単にできます。GUIベースで操作できるので、初心者にも扱いやすいです。

⑦ デバッグ機能が充実

VS Codeには、ブレークポイントの設定や変数の確認 などのデバッグ機能があり、プログラムの動作を詳細に追跡できます。

次の章では、VS Codeの インストール方法 や 基本設定 について詳しく解説していきます。

第2章: VS Codeのインストールと基本設定

2.1 Windowsへのインストール

Visual Studio Code（VS Code）は、Windows / macOS / Linux の各OSに対応しています。以下にWindowsの手順を紹介します。

Windows でのインストール

1. 公式サイトにアクセス
   • Visual Studio Code 公式サイト にアクセスし、「Windows」版をダウンロード
2. インストーラーを実行
   • ダウンロードした .exe ファイルを開き、インストールウィザードに従って進める
3. ショートカットの作成（オプション）
   • 「デスクトップにショートカットを作成」にチェックを入れると便利
4. インストール完了後、起動
   • 「Visual Studio Code を開く」をクリック

2.2 初回起動と基本的な設定

VS Codeを開くと最初に表示される画面

初めて起動すると、以下のような画面が表示されます。

• 「ようこそ」画面（Welcome）
• 左側のサイドバー（エクスプローラー、検索、Git管理、デバッグ、拡張機能）
• エディタ画面
• 下部のステータスバー

「ようこそ」画面は [×] で閉じるか、設定で無効化 できます。

2.3 日本語化とフォント設定

日本語化の手順

1. 拡張機能のインストール
   • 左の「拡張機能（Extensions）」をクリック
   • 検索バーに Japanese Language Pack for Visual Studio Code と入力
   • 「インストール」ボタンを押す
2. 日本語に変更
   • 設定画面で "locale": "ja" を適用

フォントの設定

1. 設定を開く（Ctrl + , または Cmd + ,）
2. 検索バーに「editor.fontFamily」 と入力
3. 好みのフォントを指定（例: "Fira Code", "Consolas", "Meiryo"）
4. フォントを適用

2.4 テーマとUIカスタマイズ

テーマを変更する

1. Ctrl + Shift + P（または Cmd + Shift + P）を押して「コマンドパレット」を開く
2. 「Color Theme」と入力し、好きなテーマを選択
3. ダークモード / ライトモードを切り替え

UIをカスタマイズする

• アイコンテーマの変更（ファイルアイコンを見やすく）
• サイドバーの配置変更（左・右に移動可能）
• ターミナルの配置を調整（下・右に配置可能）

2.5 よく使う基本設定（settings.json）

VS Codeの設定は settings.json で管理できます。

1. 設定を開く（Ctrl + , または Cmd + ,）
2. 「settings.jsonを開く」 をクリック
3. 以下のような設定を追加

{
  "editor.fontSize": 14,            // フォントサイズ
  "editor.tabSize": 2,              // タブのスペース数
  "editor.wordWrap": "on",          // 画面幅で自動改行
  "editor.minimap.enabled": false   // ミニマップを非表示
}

次の章では 「VS Codeの基本操作」 について詳しく解説します。

第3章: 基本的な操作

3.1 エディタの基本操作（ファイルの作成・保存・開く）

ファイルの作成

VS Codeで新しいファイルを作成する方法は以下の通りです。

方法1: メニューから作成

1. [ファイル] → [新しいファイル] を選択
2. エディタに空のファイルが開く
3. [Ctrl + S]（Cmd + S） で名前をつけて保存

ファイルの保存

VS Codeでファイルを保存するには：

• [Ctrl + S] で現在のファイルを保存
• [Ctrl + Shift + S] で別名で保存

保存しないままVS Codeを閉じると、未保存のファイルが復元される ことがあります。

ファイルの開き方

方法1: メニューから開く

1. [ファイル] → [開く] をクリック
2. 開きたいファイルを選択

方法2: 最近開いたファイルを開く

• [Ctrl + P]を押してファイル名を入力すると、最近開いたファイルがリストに表示される。

3.2 タブとウィンドウの管理

タブの操作

• 新しいタブを開く → Ctrl + N
• タブを閉じる → Ctrl + W
• すべてのタブを閉じる → Ctrl + Shift + W
• 開いているタブの切り替え
  • Ctrl + Tab（前のタブへ）
  • Ctrl + Shift + Tab（次のタブへ）

複数ウィンドウの管理

VS Codeでは複数のウィンドウを開いて作業できます。

• 新しいウィンドウを開く
  • Ctrl + Shift + N
• ウィンドウを閉じる
  • Ctrl + Shift + W

3.3 コマンドパレットの活用

コマンドパレットは、あらゆる機能を素早く呼び出せるツール です。

コマンドパレットを開く

• Windows Ctrl + Shift + P

よく使うコマンド

• ファイルを開く: > Open File
• 設定を開く: > Preferences: Open Settings
• 拡張機能をインストール: > Extensions: Install
• テーマを変更: > Preferences: Color Theme

3.4 ショートカットキーの活用

以下は、VS Codeを効率的に使うための基本ショートカットです。

Visual Studio Code (VSCode) で Java 開発を行う際に便利なショートカットキーの一覧を紹介します。

基本操作

コード編集

デバッグ

ターミナル

Java特有のショートカット

このショートカットを活用することで、VSCode での Java 開発がよりスムーズになります！

次の章では 「ファイル・フォルダーの管理」 について解説します。

第4章: ファイル・フォルダーの管理

4.1 ワークスペースの概念

ワークスペースとは？

VS Codeでは、ワークスペース（Workspace） という概念を使って、複数のファイルやフォルダーをまとめて管理できます。

• 単一のファイルを開いて作業（例: index.html を単体で編集）
• フォルダーを開いて管理（例: プロジェクト全体を管理）
• マルチルートワークスペース（複数のフォルダーをひとつのワークスペースにまとめる）

4.2 フォルダーを開く・管理する方法

フォルダーを開く

方法1: メニューから開く

1. [ファイル] → [フォルダーを開く] をクリック
2. 開きたいプロジェクトフォルダーを選択
3. VS Codeにフォルダーが表示される

方法2: ショートカットキー

• WindowsCtrl + K, Ctrl + O

フォルダー内のファイルを開く

フォルダーを開いた後、左の エクスプローラー（Explorer） でファイルを選択すると、エディタで編集できます。

4.3 ファイルエクスプローラーの活用

エクスプローラー（Explorer）とは？

左側にある ファイルエクスプローラー は、フォルダーやファイルの管理に便利な機能です。

エクスプローラーでできること

4.4 マルチルートワークスペースの使い方

マルチルートワークスペースとは？

通常は 1つのフォルダー = 1つのワークスペース ですが、マルチルートワークスペースを使うと 複数のフォルダーを1つのウィンドウで管理 できます。

マルチルートワークスペースの設定方法

1. [ファイル] → [フォルダーをワークスペースに追加] を選択
2. 追加したいフォルダーを選択
3. [ファイル] → [ワークスペースとして保存] で .code-workspace ファイルを保存
4. 次回から .code-workspace を開くだけで、設定したフォルダーが開く

次の章では 「拡張機能（Extensions）の活用」 について詳しく解説します。

第5章: 拡張機能（Extensions）の活用

5.1 拡張機能のインストールと管理

拡張機能とは？

Visual Studio Code（VS Code）は、拡張機能を追加することで 機能を自由にカスタマイズ できます。例えば：

• コードの自動補完を強化（Java, JavaScriptなど）
• デバッグ機能の向上
• コードフォーマットを自動化（Prettier など）

拡張機能のインストール

拡張機能は 「拡張機能ビュー」 からインストールできます。

方法1: UIからインストール

1. 左側の「拡張機能」アイコン（Ctrl + Shift + X）をクリック
2. 検索バーにインストールしたい拡張機能の名前を入力
3. 「インストール」ボタンをクリック

方法2: コマンドパレットを使う

1. Ctrl + Shift + Pを押す
2. 「Extensions: Install Extensions」と入力
3. インストールしたい拡張機能を選択

拡張機能の管理

5.2 よく使うおすすめ拡張機能

以下の拡張機能は、VS Codeをより便利にする ための定番ツールです。

① プログラミング全般

② Javaプログラミング向け

③ フロントエンド開発向け

5.3 Live Serverで簡単なWebプレビュー

Live Server は、HTMLファイルをリアルタイムでプレビューできる便利な拡張機能です。

Live Serverのインストール

1. 拡張機能（Ctrl + Shift + X）を開く
2. "Live Server" を検索し、インストール

Live Serverの使い方

1. HTMLファイルを開く
2. 右下の「Go Live」ボタンをクリック
3. ブラウザでページが自動更新される

次の章では 「コードの記述と補助機能」 について詳しく解説します。

第6章: コードの記述と補助機能

6.1 シンタックスハイライトとインデント

シンタックスハイライトとは？

VS Codeは、コードの構文（シンタックス）を 色分け して表示します。これにより、コードの可読性が向上 し、エラーを発見しやすくなります。

設定のカスタマイズ方法

1. Ctrl + Shift + Pでコマンドパレットを開く
2. Preferences: Color Theme を検索
3. 好みのカラーテーマを選択（例: Dark+, Light+）

インデントの自動設定

VS Codeでは、コードのインデント（字下げ）を自動で調整できます。

設定ファイル（settings.json）で統一

{
  "editor.tabSize": 2,
  "editor.insertSpaces": true
}

6.2 オートコンプリートとコード補完

オートコンプリートとは？

VS Codeは、コードを入力するときに候補を表示 してくれます。これを IntelliSense と呼びます。

オートコンプリートの使い方

• Ctrl + Spaceで補完候補を表示
• 変数名や関数名を途中まで入力すると候補が表示

6.3 IntelliSenseの基本

IntelliSenseとは？

VS Codeの IntelliSense は、以下の機能を提供します：

• コード補完（オートコンプリート）
• 変数や関数の型情報の表示
• 関数の引数やドキュメントの表示

IntelliSenseの活用

次の章では 「デバッグ機能」 について詳しく解説します。

第7章: デバッグ機能

7.1 デバッガの基本概念

デバッグとは？

デバッグ（Debug）は、プログラムの バグ（エラー）を特定し、修正する作業 です。
VS Codeには 強力なデバッグ機能 があり、ブレークポイントやステップ実行 を使ってエラーの原因を効率的に調査できます。

7.2 ブレークポイントの設定と変数ウォッチ

ブレークポイントとは？

ブレークポイントを設定すると、プログラムの実行を指定した箇所で一時停止 し、変数の値を確認できます。

ブレークポイントの設定方法

1. コードの行番号をクリック（赤い●が表示される）
2. プログラムを実行すると、その行で停止 する

変数ウォッチ（値の確認）

プログラムを停止させた後、変数の値を確認できます。

7.3 ステップ実行とログ出力

ステップ実行とは？

ステップ実行を使うと、プログラムを1行ずつ実行 して、動作を細かく確認できます。

可能

次の章では 「ターミナルの活用」 について詳しく解説します。

第8章: ターミナルの活用

8.1 VS Code内蔵ターミナルの使い方

ターミナルとは？

ターミナル（Terminal）は、コマンドライン（CLI）を操作できるツール です。
VS Codeには 内蔵ターミナル があり、コード編集とコマンド実行を1つのウィンドウで行えます。

ターミナルを開く

8.2 コマンドラインの基本操作

よく使うコマンド

8.3 ターミナルのカスタマイズ

デフォルトのシェルを変更

VS Codeのターミナルは、デフォルトのシェル（PowerShell, Bash, Zsh など）を変更できます。

手順

1. Ctrl + Shift + Pを開く
2. 「Terminal: Select Default Profile」を検索
3. 好みのシェルを選択
   • Windows: Git Bash / PowerShell

ターミナルの外観をカスタマイズ

設定 (settings.json) を変更すると、ターミナルのフォントやカラーを変更可能。

{
  "terminal.integrated.fontSize": 14,
  "terminal.integrated.cursorStyle": "block"
}

次の章では 「設定とカスタマイズ」 について詳しく解説します。

第9章: 設定とカスタマイズ

9.1 設定（settings.json）を編集する

VS Codeの設定とは？

VS Codeでは、エディタの動作を細かくカスタマイズできます。
主な設定方法は以下の2つです。

1. GUI（グラフィカルインターフェース）から設定
   • Ctrl + ,で設定画面を開く
   • チェックボックスやドロップダウンで設定を変更
2. settings.json を直接編集
   • より詳細なカスタマイズが可能

settings.json の開き方

1. Ctrl + Shift + Pを押す
2. 「Preferences: Open Settings (JSON)」を検索して選択
3. settings.json ファイルが開く

よく使うカスタマイズ設定

{
  "editor.fontSize": 14,        // フォントサイズ
  "editor.tabSize": 2,          // タブのスペース数
  "editor.wordWrap": "on",      // 画面幅で自動改行
  "editor.minimap.enabled": false, // ミニマップ（右側の小さいプレビュー）を非表示
  "files.autoSave": "afterDelay"  // 自動保存を有効にする
}

9.3 よく使う便利な設定オプション

① ファイルの自動保存

変更を自動で保存する

"files.autoSave": "afterDelay"

② 行番号のカスタマイズ

行番号を常に表示する

"editor.lineNumbers": "on"

③ 余計なスペースを自動削除

行末の不要なスペースを自動で削除

"files.trimTrailingWhitespace": true

④ コードフォーマットの自動適用

ファイルを保存すると自動で整形

"editor.formatOnSave": true

IT企業向け新人研修おすすめ資料　無料公開中 (saycon.co.jp)