はじめてのVS Code！インストールからおすすめ設定まで徹底解説

プログラミングを始めたいけれど、
「どのコードエディタを使えばいいの？」
「初心者でも簡単に扱えて、高機能なエディタが欲しい！」

そんなあなたにおすすめなのが、Visual Studio Code（VS Code） です！✨

VS Codeは、無料で使える高機能なコードエディタで、初心者からプロまで幅広いユーザーに支持されています。
軽量で動作が速く、豊富な拡張機能を追加することで、自分好みにカスタマイズできるのが特徴です。

本記事では、VS Codeのインストール方法からおすすめの初期設定、便利な拡張機能までを徹底解説！
この記事を読めば、すぐにVS Codeを使いこなせるようになります！ 💡

この記事でわかること

VS Codeの特徴と他のエディタとの違い
Windows・Mac・Linux別のインストール方法
日本語化や基本設定の手順
開発が快適になるおすすめ拡張機能

VS Codeとは？どんなエディタなの？
1. 📌 VS Codeの特徴とメリット
2. 🆚 VS Codeと他のエディタの違い
VS Codeのインストール方法（Windows・Mac・Linux対応）
日本語化＆基本設定を行おう！
開発が快適になるおすすめ拡張機能！
VS Codeのショートカットキー＆便利な機能まとめ
まとめ：VS Codeをカスタマイズして快適な開発環境を作ろう！
「VS Codeをもっと活用したい！」そんな方へ

VS Codeとは？どんなエディタなの？

VS Code（Visual Studio Code）は、Microsoftが開発した無料で使える高機能なコードエディタです。
世界中のエンジニアに愛用されており、初心者からプロまで幅広く利用されています。💻✨

📌 VS Codeの特徴とメリット

✅ 軽量＆高速

インストールサイズが小さく、動作が軽い！
他のエディタと比べても起動が速く、サクサク動く

✅ 豊富な拡張機能

必要な機能を後から追加できるので、自分好みにカスタマイズ可能
プログラミング言語ごとのサポートやコード補完機能が充実

✅ 多くのプログラミング言語に対応

HTML・CSS・JavaScript・Python・PHP・C++ など、幅広い言語をサポート

✅ Gitとの統合機能が標準搭載

エディタ内でGitを操作できるので、ソースコード管理が簡単！
コミット・ブランチ作成・プッシュなどの操作をVS Codeから直接実行できる

✅ 無料で使える＆定期的にアップデート

完全無料で利用可能！
新機能やバグ修正が頻繁に行われ、常に最新の環境を維持できる

🆚 VS Codeと他のエディタの違い

エディタ	特徴	おすすめポイント
VS Code	軽量・高機能・拡張性抜群	無料で使えて初心者にも優しい！
Atom	カスタマイズ性が高い	開発が終了し、今後のサポートがなくなる
Sublime Text	高速で軽量	有料版がある（無料版でもOK）
PyCharm	Python特化型	Python開発に最適だが、動作が重い
IntelliJ IDEA	Java特化型	Java開発向け、無料版と有料版がある

💡 結論：VS Codeは無料で多機能、初心者にも使いやすい万能エディタ！

VS Codeのインストール方法（Windows・Mac・Linux対応）

VS Codeは、Windows・Mac・LinuxのすべてのOSで利用可能です！✨
ここでは、それぞれのOS別にインストール手順を解説します。

1. 公式サイトからVS Codeをダウンロード

まずは、公式サイトからインストーラーをダウンロードしましょう。

🔗 VS Code公式サイト

手順:

公式サイトにアクセス
「Download for Windows」「Mac」「Linux」を選択（自動でOSが判別されることもあります）
インストーラーをダウンロード

2. Windowsへのインストール方法

ダウンロードした VSCodeSetup.exe をダブルクリックして実行
ライセンスに同意 して「次へ」
インストールオプションを選択（基本的にはデフォルトのままでOK）
- デスクトップアイコンの作成（おすすめ）
- 「エクスプローラーでファイルを右クリックして開ける」オプションを有効化
「インストール」ボタンをクリック して完了！

✅ Windowsユーザー向けおすすめ設定

コマンドプロンプトやPowerShellでVS Codeを開けるようにする（code . コマンドが使えるようになる）

3. Macへのインストール方法

Macの場合、Homebrew（パッケージ管理ツール）を使う方法と公式サイトから直接ダウンロードする方法の2種類があります。

✅ 公式サイトからインストールする方法（簡単）

公式サイトから .zip ファイルをダウンロード
ダウンロードした .zip ファイルを展開
アプリケーションフォルダへ移動 すればOK！

✅ Homebrewを使う方法（おすすめ）
ターミナルを開いて、以下のコマンドを実行👇

brew install --cask visual-studio-code

💡 この方法なら、VS Codeを一発インストールできる！

4. Linuxへのインストール方法

Linuxでは、ディストリビューションごとにインストール方法が異なります。

✅ Ubuntu / Debian 系（apt を使用）

sudo apt update
sudo apt install code

✅ Fedora / CentOS / RHEL 系（yum を使用）

sudo yum install code

✅ Arch Linux 系（pacman を使用）

sudo pacman -S code

💡 どの方法でも、インストール後は code コマンドでVS Codeを開ける！

5. インストール確認＆起動方法

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

✅ Windows
「スタートメニュー」→「Visual Studio Code」をクリック

✅ Mac
「アプリケーション」→「Visual Studio Code」をクリック

✅ Linux
ターミナルで以下のコマンドを実行👇

code

🚀 これで、VS Codeのインストールは完了！

日本語化＆基本設定を行おう！

VS Codeはデフォルトで英語表示ですが、簡単な設定で日本語化できます！
また、エディタを使いやすくするために、フォント・テーマの変更や基本設定も行いましょう✨

1. VS Codeを日本語化する方法

✅ 日本語化の手順

VS Codeを開く
左の拡張機能アイコン（四角が4つ並んだマーク）をクリック
検索欄に 「Japanese Language Pack」 と入力
「Japanese Language Pack for Visual Studio Code」をインストール
インストール後、VS Codeを再起動 すれば完了！

💡 これでメニューや設定画面が日本語で表示されるようになります！

2. フォント・テーマの変更（見た目をカスタマイズ）

✅ おすすめのテーマをインストールする

拡張機能マーケットプレイスで「テーマ」を検索
人気のテーマをインストールして適用
- Dark+（デフォルトのダークテーマ）
- Dracula（目に優しいダークテーマ）
- One Dark Pro（シンプルでスタイリッシュ）

✅ フォントを変更する方法

「設定」メニューを開く（Ctrl + , / Cmd + ,）
「Editor: Font Family」を検索
好きなフォントを設定（例: "Fira Code", "Consolas", "Courier New", monospace）
フォントの太さ・サイズを調整する

💡 プログラミング用フォント（Fira CodeやJetBrains Mono）を使うと可読性アップ！

3. エディタの基本設定を変更しよう！

✅ インデント（スペース vs タブ）を設定

「設定」→ 「Editor: Tab Size」 で好きなスペース数を設定
PythonやJavaScriptではスペース4つ推奨！

✅ 自動保存を有効化する

「設定」→ 「Files: Auto Save」 を afterDelay に変更
これでファイルを編集後、自動で保存されるようになる

✅ 行番号・ガイドラインを有効化する

「設定」→ 「Editor: Line Numbers」 を on に変更
「Editor: Guides」 を有効にすると、コードの構造が見やすくなる！

開発が快適になるおすすめ拡張機能！

VS Codeは、拡張機能を追加することで作業効率を格段に向上できます！✨
ここでは、初心者でも使いやすいおすすめ拡張機能をカテゴリ別に紹介します。

1. コーディングが快適になる拡張機能

✅ Prettier（コード整形）

コードのフォーマットを自動で統一
Ctrl + Shift + P → Format Document で整形可能

✅ ESLint（JavaScriptのエラーチェック）

JavaScriptのコードのミスを自動検出＆修正提案
.eslintrc を設定すれば、カスタムルールも適用可能

✅ Bracket Pair Colorizer（カッコを色分け）

( ) { } [ ] の対応関係を色分けして、コードが見やすくなる

2. 作業効率を上げる拡張機能

✅ Live Server（HTMLのライブプレビュー）

index.html を右クリック → 「Open with Live Server」で、リアルタイムプレビュー可能

✅ Path Intellisense（パス補完機能）

ファイルやフォルダのパスを入力すると、自動補完してくれる

✅ GitLens（Gitの履歴を視覚化）

ファイルの変更履歴やコミットメッセージをエディタ上で確認できる

3. プログラミング言語ごとの拡張機能

✅ Python拡張機能（Microsoft製）

Pythonのコード補完・デバッグ・仮想環境の管理が可能

✅ PHP Intelephense

PHPのコード補完とエラーチェックを強化

✅ Markdown All in One

Markdownのプレビュー・ショートカット・テーブル補完ができる

4. 見た目や使い勝手を向上させる拡張機能

✅ Material Icon Theme（ファイルアイコンをわかりやすく）

フォルダやファイルのアイコンをカラフルで見やすいデザインに

✅ Better Comments（コメントを色分け）

// TODO や // WARNING などを色分けして、目立たせることができる

📌 まとめ：拡張機能を活用してVS Codeをもっと便利に！

コード整形・エラーチェックの拡張機能で、開発をスムーズに！
ライブサーバーやGit統合機能を活用して、作業効率アップ！
プログラミング言語ごとの拡張機能で、快適な開発環境を整えよう！

VS Codeのショートカットキー＆便利な機能まとめ

VS Codeには、作業を効率化する便利なショートカットキーや機能が多数用意されています！
ここでは、初心者が覚えておくべき基本のショートカットキーと、開発に役立つ便利機能を紹介します✨

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

操作	Windows / Linux	Mac
コマンドパレットを開く	`Ctrl + Shift + P`	`Cmd + Shift + P`
ファイル検索（クイックオープン）	`Ctrl + P`	`Cmd + P`
ファイル内検索	`Ctrl + F`	`Cmd + F`
プロジェクト全体検索	`Ctrl + Shift + F`	`Cmd + Shift + F`
コードフォーマット（整形）	`Shift + Alt + F`	`Shift + Opt + F`
ターミナルを開く / 閉じる	`Ctrl + ~`	`Cmd + ~`
コメントアウト（トグル）	`Ctrl + /`	`Cmd + /`
エディタの分割	`Ctrl + \`	`Cmd + \`
行の移動	`Alt + ↑ / ↓`	`Opt + ↑ / ↓`
行のコピー	`Shift + Alt + ↑ / ↓`	`Shift + Opt + ↑ / ↓`
コード補完（インテリセンス）	`Ctrl + Space`	`Cmd + Space`