· FabLab Westharima Team · ドキュメント  · 23 min read

Visual Studio Code 完全ガイド：インストールから実践まで（2025年版）

VSCodeのインストールから実践的な使い方まで初心者向けに解説。日本語化、おすすめ拡張機能、ショートカットキー、AI統合など2025年版の最新情報。

目次

文書作成やちょっとした作業で、どんなツールを使っていますか？私は長い間、シンプルなメモ機能ばかり使っていました。しかし、本格的なエディタであるVisual Studio Code（VSCode）を使い始めてから、作業効率が劇的に変わりました。

この記事では、2025年10月時点の最新情報をもとに、VSCodeのインストールから実践的な使い方まで、初心者の方にもわかりやすく解説します。プログラミングやWeb制作だけでなく、Markdownでのドキュメント作成など、幅広い用途で活用できる強力なツールです。

Visual Studio Codeとは？

Visual Studio Code（VSCode）は、Microsoftが開発した無料のコードエディタです。「無料なのに高機能」というのが最大の特徴で、世界中の開発者から圧倒的な支持を得ています。

VSCodeが選ばれる5つの理由

  1. 完全無料：商用利用も含めて、すべての機能が無料で使えます
  2. 軽量で高速：起動が速く、大きなファイルもサクサク動作します
  3. 豊富な拡張機能：6万以上の拡張機能で、自分好みにカスタマイズ可能
  4. マルチプラットフォーム：Windows、Mac、Linuxすべてで動作します
  5. アクティブなコミュニティ：困ったときの情報が豊富で、解決策が見つかりやすい

私が特に気に入っているのは、HTMLやMarkdownを書いているときのコード補完機能です。途中まで入力するだけで候補を表示してくれるので、タイプミスが激減しました。さらに拡張機能のCode Spell Checkerを使えば、リアルタイムにスペルチェックもしてくれるので、英単語のミスも防げます。

インストール方法（所要時間：約5分）

alt text

Windowsの場合

  1. VSCode公式サイトにアクセスします
  2. 「Download for Windows」ボタンをクリック
  3. ダウンロードされたVSCodeUserSetup-x64-x.xx.x.exeを実行
  4. セットアップウィザードが起動したら「次へ」をクリック
  5. 使用許諾契約書に同意して「次へ」
  6. 重要：「追加タスクの選択」画面で以下にチェックを入れることをおすすめします
    • ☑ デスクトップ上にアイコンを作成する
    • ☑ エクスプローラーのファイル コンテキスト メニューに [Code で開く] アクションを追加する
    • ☑ エクスプローラーのディレクトリ コンテキスト メニューに [Code で開く] アクションを追加する
    • ☑ サポートされているファイルの種類のエディターとして、Codeを登録する
  7. 「インストール」ボタンをクリック
  8. インストール完了後、「Visual Studio Codeを実行する」にチェックを入れて「完了」

ポイント：コンテキストメニューに追加しておくと、フォルダを右クリックして「Codeで開く」が選べるようになり、とても便利です。

Macの場合

  1. VSCode公式サイトにアクセスします
  2. 「Download for Mac」ボタンをクリック（Appleシリコン/Intel、どちらも自動判別されます）
  3. ダウンロードされたVSCode-darwin-universal.zipを解凍
  4. 解凍されたVisual Studio Code.appを「アプリケーション」フォルダにドラッグ＆ドロップ
  5. Launchpadまたはアプリケーションフォルダから「Visual Studio Code」を起動

Mac特有の設定：初回起動時に「開発元を確認できないため開けません」と表示された場合は、右クリック（またはControlキー + クリック）→「開く」で起動できます。

初期設定：日本語化（必須）

インストール直後のVSCodeは英語表示です。日本語化の手順は簡単で、約1分で完了します。

  1. VSCodeを起動
  2. 左側のアクティビティバーから「拡張機能」アイコン（四角が4つ重なったアイコン）をクリック
    • ショートカット：Windows Ctrl + Shift + X / Mac ⌘ + Shift + X
  3. 検索バーに「Japanese」と入力
  4. 「Japanese Language Pack for Visual Studio Code」（発行元：Microsoft）を見つけて「Install」をクリック
  5. 右下に「Change Language and Restart」というボタンが表示されるのでクリック
  6. VSCodeが再起動し、日本語表示になります

もしボタンが表示されなかった場合は、手動で再起動すれば日本語化されます。

VSCodeの画面構成を理解しよう

VSCodeを開くと、一見複雑に見えるかもしれませんが、基本的な構成を覚えればすぐに慣れます。

主要な画面要素

1. メニューバー（最上部） ファイル、編集、表示などの基本メニューが並んでいます。

2. アクティビティバー（左端の縦長バー） 主要な機能に素早くアクセスできます：

  • エクスプローラー：ファイルとフォルダの管理
  • 検索：プロジェクト全体から文字列を検索
  • ソース管理：Gitによるバージョン管理
  • 実行とデバッグ：プログラムの実行とデバッグ
  • 拡張機能：機能を追加するプラグイン管理

3. サイドバー（アクティビティバーの隣） アクティビティバーで選択した内容が表示されます。

4. エディタエリア（中央の大きな領域） 実際にコードを書く場所です。タブで複数ファイルを開けます。

5. パネル（下部） ターミナル、出力、問題、デバッグコンソールなどが表示されます。

  • 表示/非表示の切り替え：Windows Ctrl + J / Mac ⌘ + J

6. ステータスバー（最下部） 現在の状態を表示します：

  • 行番号と列番号
  • 文字コード（UTF-8など）
  • 改行コード（LF、CRLFなど）
  • ファイル形式（HTML、Markdownなど）
  • Git情報（ブランチ名など）

alt text

知っておくと便利なショートカットキー

最初から全部覚える必要はありませんが、以下のショートカットだけでも覚えておくと作業効率が大幅に向上します。

基本操作

機能WindowsMac
コマンドパレットを開くCtrl + Shift + P⌘ + Shift + P
ファイルを開くCtrl + O⌘ + O
新しいファイルCtrl + N⌘ + N
保存Ctrl + S⌘ + S
すべて保存Ctrl + K S⌘ + K S
閉じるCtrl + W⌘ + W

表示切り替え

機能WindowsMac
サイドバー表示切替Ctrl + B⌘ + B
パネル表示切替Ctrl + J⌘ + J
ターミナル表示切替Ctrl + @⌃ + @

編集操作

機能WindowsMac
行のコピーShift + Alt + ↓Shift + Option + ↓
行の移動Alt + ↑/↓Option + ↑/↓
複数行選択Ctrl + Alt + ↑/↓⌘ + Option + ↑/↓
コメント切替Ctrl + /⌘ + /

私の実体験：最初は「ショートカット覚えるの面倒だな」と思っていましたが、Ctrl + S（保存）とCtrl + B（サイドバー切替）だけでも覚えたら、マウス操作が激減して快適になりました。

初心者におすすめの拡張機能7選

VSCodeの真価は拡張機能にあります。便利に使える拡張機能をいくつか紹介しています。

重要：拡張機能をインストールする際は、必ず正しい発行元を確認してください。偽物の拡張機能が出回った事件が実際に発生しており、セキュリティ上のリスクがあります（詳細は表の後で解説します）。

拡張機能名用途おすすめポイント使い方・設定
Prettier - Code formatterコードを自動整形保存時に自動でコードを綺麗に整えてくれる。インデントや改行の統一が自動化され、可読性が向上1. インストール後、Ctrl + ,で設定を開く
2. 「Format On Save」を検索してチェック
Live ServerHTMLファイルをブラウザでライブプレビューファイルを保存すると、ブラウザが自動で更新される。HTMLやCSS学習中の方には必須HTMLファイルを右クリック→「Open with Live Server」を選択
Markdown All in OneMarkdown記法のサポートブログ記事やドキュメント作成に便利。Ctrl + Bで太字、Ctrl + Iで斜体、Ctrl + Shift + Vでプレビュー表示インストール後すぐに使える
Auto Rename TagHTMLタグの自動ペア編集開始タグを変更すると、閉じタグも自動で変更される。タグの修正が驚くほど楽にインストール後、自動で機能が有効化
Code Spell Checkerスペルチェック英単語のスペルミスをリアルタイムで検出。波線で間違いを教えてくれるインストール後すぐに使える
GitLensGit機能の強化誰がいつコードを変更したか、行単位で確認できる。チーム開発では特に重宝インストール後、コード上にGit情報が表示される
indent-rainbowインデントを色分け表示インデントレベルごとに色が変わるので、ネスト構造が視覚的にわかりやすいインストール後すぐに色分けされる

⚠️ 拡張機能のセキュリティについて

2025年4月、VSCode拡張機能を装った悪意のあるソフトウェアが確認され、特に偽物のPrettierが100万近くダウンロードされる事件がありました。拡張機能をインストールする際は、以下の点に必ず注意してください：

安全にインストールするための確認ポイント：

確認項目詳細例（Prettierの場合）
発行元を確認（最重要）正しい発行元の識別子を確認esbenp.prettier-vscode
（偽物はprettierという発行元名だった）
ダウンロード数数百万以上が目安3000万以上
レビューを確認高評価レビューが多数あるか内容が自然で具体的か確認
最終更新日定期的に更新されているか古すぎる、または新しすぎる場合は要注意

本記事で紹介している拡張機能の正しい発行元：

  • Prettier → esbenp.prettier-vscode
  • Live Server → ritwickdey.LiveServer
  • Markdown All in One → yzhang.markdown-all-in-one
  • Auto Rename Tag → formulahendry.auto-rename-tag
  • Code Spell Checker → streetsidesoftware.code-spell-checker
  • GitLens → eamodio.gitlens
  • indent-rainbow → oderwat.indent-rainbow

その他の注意点：

  • 必要最小限の拡張機能のみをインストールする（最初は5〜7個で十分）
  • インストール時に要求される権限を確認する
  • 公式ドキュメントやGitHubリポジトリが公開されているか確認する

実践：HTMLファイルを作成してみよう

理論だけでなく、実際に手を動かしてみましょう。簡単なHTMLファイルを作成してみます。

Step 1：フォルダを開く

  1. VSCodeで「ファイル」→「フォルダを開く」を選択
  2. 作業用の新しいフォルダ（例：vscode-practice）を作成して選択
  3. 「フォルダの選択」をクリック

ポイント：VSCodeは「フォルダ単位」で作業するのが基本です。プロジェクトごとにフォルダを分けると管理しやすくなります。

Step 2：新しいファイルを作成

  1. サイドバーのエクスプローラーで、フォルダ名の横にある「新しいファイル」アイコンをクリック
  2. ファイル名をindex.htmlと入力してEnter

Step 3：コードを書いてみる

以下のコードを入力してみましょう。!と入力してTabキーを押すと、HTMLのテンプレートが自動生成されます（Emmet機能）。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>VSCodeの練習</title>
  </head>
  <body>
    <h1>Visual Studio Codeで作成しました</h1>
    <p>これは最初のHTMLファイルです。</p>
  </body>
</html>

Step 4：ファイルを保存

Ctrl + S（Mac：⌘ + S）で保存します。

Step 5：ブラウザで確認

Live Serverを使う場合： ファイルを右クリック→「Open with Live Server」を選択すると、ブラウザが自動で開きます。

Live Serverを使わない場合： ファイルをエクスプローラーから直接ダブルクリックして開きます。

Markdownでブログ記事を書いてみよう

私が普段やっている作業を紹介します。このブログの記事もVSCodeで書いています。

Markdownファイルの作成

  1. 新しいファイルを作成：article.md
  2. 以下のようなMarkdownを書いてみます：
# VSCodeの使い方

## インストール方法

VSCodeは公式サイトからダウンロードできます。

### Windowsの場合

1. 公式サイトにアクセス
2. インストーラーをダウンロード
3. 指示に従ってインストール

## 便利な機能

- コード補完
- シンタックスハイライト
- Git統合

プレビュー表示

Ctrl + Shift + V（Mac：⌘ + Shift + V）を押すと、プレビューが表示されます。

編集画面とプレビューを並べて表示したい場合： Ctrl + K V（Mac：⌘ + K V）を押すと、右側にプレビューが表示されます。

私の活用法：ブログ記事を書くときは、左側でMarkdownを編集しながら、右側でプレビューを確認しています。この方法だと、装飾の確認がリアルタイムでできて効率的です。

関連記事：Markdownの記法について詳しく知りたい方は、「Markdown マークダウン記法 | ガイド・チートシート」をご覧ください。基本記法から実務での注意点まで、包括的に解説しています。

よくあるトラブルと解決法

トラブル解決手順補足・おすすめ設定
日本語入力がおかしい
（確定前の文字が二重に表示される）		1. Ctrl + ,で設定を開く
2. 検索バーに「ime」と入力
3. 「Render Control Characters」をオフにする		Windows特有の問題。この設定で解消されることが多い
VS Codeの動作が重い1. 不要な拡張機能を無効化・アンインストール
2. Ctrl + Shift + Pでコマンドパレットを開き「Developer: Reload Window」を実行
3. ワークスペースから大きなフォルダ（node_modulesなど）を除外
4. Ctrl + ,で設定を開き「Files: Exclude」で不要なファイルを除外		拡張機能を入れすぎると重くなります。本当に必要なものだけに絞りましょう（5〜7個が目安）
VS Codeが起動しない/
強制終了する		1. VS Codeを完全に終了してから再起動
2. 問題を引き起こしている可能性のある拡張機能を無効化またはアンインストール
3. 設定ファイルをリセット：設定ファイル（ユーザーデータ）をバックアップしてから削除または名前を変更し、VS Codeを起動
4. VS Codeを再インストール - (最終手段）		多くの場合、特定の拡張機能が原因です。手順3の前に必ずバックアップを取りましょう

筆者の活用事例

私は普段、以下の用途でVSCodeを使っています：

用途使用している機能・拡張機能作業のポイント
ブログ記事の執筆
（Markdown）		・Markdown All in One
・Code Spell Checker
・プレビュー機能		左側で編集、右側でプレビューを確認しながら執筆。スペルチェックでミスを防ぐ
HTMLとCSSのコーディング・Live Server
・Prettier
・Auto Rename Tag		Live Serverでリアルタイムプレビュー。Prettierで自動整形して可読性を保つ
GitHubでのバージョン管理・ソース管理機能（標準）
・GitLens		エディタ内でコミット・プッシュが完結。GitLensで変更履歴を確認
簡単なPythonスクリプト作成・Python拡張機能
・統合ターミナル		コード補完で効率的に記述。ターミナルですぐに実行・デバッグ

つまずいたポイントと解決策

つまずいたポイント解決策学んだこと
フォルダを開かずにファイルだけを開いていた必ず「フォルダを開く」を使ってプロジェクト単位で管理プロジェクト管理の恩恵（検索、Git統合など）が受けられるようになった
拡張機能を入れすぎて動作が重くなった本当に必要な拡張機能だけに絞る（最初は5〜7個で十分）軽快な動作を保ちつつ、必要な機能だけを使えるようになった

2025年の新機能：AI統合

2025年のVSCodeは、AIによる開発支援機能が大幅に強化されています。特に「GitHub Copilot」拡張機能は、プログラミング初心者から上級者まで幅広く活用されています。

GitHub Copilotの主な機能

機能説明初心者にとっての利点
コード補完入力中のコードから次のコードを予測・提案構文を覚えていなくても、自然言語での説明からコードを生成してくれる
Next Edit Suggestions現在の編集内容から次に編集したい場所を予測編集作業がスムーズになり、作業効率が向上
Agent Modeタスクを委任すると、AIが自動的にファイルを検索・編集・実行複雑な操作をAIに任せられるので、学習しながら実践できる
チャット機能コードの説明や質問に自然言語で回答わからないコードをその場で質問できる

初心者へのアドバイス

GitHub Copilotは非常に強力なツールですが、まずは基本機能に慣れてから使うことをおすすめします。理由は以下の通りです：

  • 基本的な構文やロジックを理解していないと、AIの提案が正しいか判断できない
  • 自分で書くことで、プログラミングの考え方が身につく
  • 無料プランでは月60回までの制限がある（学生は無料で使える）

使い始めるタイミング：

  1. HTMLやMarkdownの基本的な記法を覚えた後
  2. 簡単なコードを自分で書けるようになった後
  3. 「もっと効率的に書きたい」と感じた時

GitHub Copilotは、月額10ドル（学生・教育関係者は無料）で利用できます。興味がある方は、まず無料トライアルで試してみるのも良いでしょう。

まとめ

VSCodeは、無料とは思えないほど高機能なコードエディタです。最初は機能が多くて戸惑うかもしれませんが、基本的な使い方さえ覚えれば、作業効率が劇的に向上します。

今日から始める3ステップ：

  1. VSCodeをインストールして日本語化する
  2. 3つのショートカットだけ覚える（保存、サイドバー切替、コマンドパレット）
  3. 1つ簡単なHTMLファイルを作ってみる

最初から完璧を目指す必要はありません。使いながら少しずつ機能を覚えていけば、自然と手に馴染んでいきます。

私も最初は「メモ帳で十分じゃない?」と思っていましたが、今ではVSCodeなしの作業は考えられません。あなたもぜひ、この便利なツールを活用してみてください。

参考リンク

この記事が、VSCodeを始めるあなたの手助けになれば幸いです。わからないことがあれば、公式ドキュメントやコミュニティで質問してみてください。VSCodeユーザーは親切な方が多いので、きっと助けてくれるはずです。

Share:
Back to Blog

Related Posts

View All Posts →