VS Code(Visual Studio Code)ダウンロードからインストールまでの全手順
VS Codeのインストールは数分で完了します

📑目次
  1. VS Code公式サイトにアクセスする
  2. VS Code インストール — ダウンロードする
  3. macOSでのインストール手順
  4. Windowsでのインストール手順
  5. VS Codeの初回起動を確認する
  6. コマンドラインからVS Codeを起動する設定
  7. よくある質問(FAQ)
  8. 関連記事
  9. まとめ

VS Code(Visual Studio Code)は、Microsoftが開発する無料のコードエディタです。軽量ながら拡張機能が豊富で、世界中の開発者に最も使われているエディタとして知られています。この記事では、VS Code インストールの全手順を macOS・Windows 別にスクリーンショット付きでわかりやすく解説します。

VS Code公式サイトにアクセスする

まずはVS Codeの公式サイトにアクセスしましょう。

公式サイト:https://code.visualstudio.com/

トップページを開くと、画面中央にお使いのOSに合わせたダウンロードボタンが表示されます。

VS Code公式サイトのトップページ — Download for macOSボタンが表示されている
VS Code公式サイトのトップページ

VS Code インストール — ダウンロードする

画面中央の「Download for macOS」(Windowsの場合は「Download for Windows」)ボタンをクリックします。

クリックするとダウンロードが自動的に開始されます。「Your download of Visual Studio Code should start shortly.」というメッセージが表示されれば成功です。

VS Codeダウンロード開始画面 — Your download should start shortly メッセージ
ダウンロードが開始された画面

💡 自動ダウンロードが始まらない場合

ページ内の「Direct download link」をクリックすると手動でダウンロードできます。

補足:ダウンロードオプション

公式サイトのダウンロードページでは、各OS向けの詳細オプションが選べます。

VS Codeダウンロードページ — macOS、Windows、Linux各プラットフォーム向けオプション
各プラットフォーム向けのダウンロードオプション
  • macOS:Intel chip / Apple silicon / Universal の3種類。迷ったら「Universal」を選べばどちらのMacでも動きます
  • Windows:User Installer / System Installer / .zip の3種類。通常は「User Installer」でOKです

macOSでのインストール手順

VS Code macOSインストール手順 — zipファイル展開からApplicationsフォルダへの移動
macOSでのインストール手順

📝 macOS インストール手順

  1. ダウンロードした .zip ファイルをダブルクリックして展開します
  2. 展開された Visual Studio Code.app を Applications フォルダにドラッグ&ドロップします
  3. Applications フォルダ(または Launchpad)から VS Code をダブルクリックして起動します
  4. 初回起動時に「インターネットからダウンロードされたアプリケーションです」という警告が表示されたら、「開く」をクリックします
  5. (任意)Dockに表示されたVS Codeアイコンを右クリック →「オプション」→「Dockに追加」で、次回からすぐにアクセスできます

Windowsでのインストール手順

📝 Windows インストール手順

  1. ダウンロードした .exe インストーラーをダブルクリックして実行します
  2. 「使用許諾契約書の同意」画面で 「同意する」 を選択し、「次へ」 をクリック
  3. インストール先フォルダを確認します(デフォルトのままでOK)。「次へ」 をクリック
  4. 「追加タスクの選択」画面で、以下にチェックを入れることを推奨します:

⚠️ 重要:追加タスクのおすすめ設定

  • ✅ 「PATHへの追加」 — ターミナルから code コマンドで VS Code を起動できるようになります。必ずチェック推奨
  • ✅ 「エクスプローラーのファイルコンテキストメニューに追加」 — ファイルを右クリックして「Code で開く」が使えるようになります
  • ✅ 「エクスプローラーのディレクトリコンテキストメニューに追加」 — フォルダを右クリックして「Code で開く」が使えるようになります
  1. 「インストール」 をクリックしてインストールを開始します
  2. 完了画面で 「Visual Studio Code を起動する」 にチェックを入れて 「完了」 をクリック

VS Codeの初回起動を確認する

インストールが完了すると、VS Codeが起動し Welcome タブ が表示されます。これが表示されればインストール成功です。

💡 日本語化のすすめ

VS Codeのメニューを日本語にしたい場合は、Japanese Language Pack を導入しましょう。手順:Ctrl+Shift+X(macOSは Cmd+Shift+X)で拡張機能パネルを開き、「Japanese」と検索 → 「Japanese Language Pack for Visual Studio Code」をインストール → VS Codeを再起動で完了です。

コマンドラインからVS Codeを起動する設定

ターミナル(macOS)やコマンドプロンプト/PowerShell(Windows)から code . と入力するだけで、カレントディレクトリをVS Codeで開けるようになります。開発者にとって非常に便利な機能です。

macOSの場合

VS Code コマンドラインからの起動設定 — Shell Command Install code command in PATH
macOSでのコマンドライン設定
  1. VS Codeを起動します
  2. Cmd+Shift+P でコマンドパレットを開きます
  3. 「Shell Command: Install ‘code’ command in PATH」 を選択します
  4. ターミナルを再起動すれば、code . で VS Code が開くようになります

Windowsの場合

インストール時に「PATHへの追加」にチェックを入れていれば、追加の設定は不要です。PowerShell またはコマンドプロンプトを開いて code . と入力してみましょう。

💡 PATHへの追加を忘れた場合

VS Codeのインストーラーを再度実行し、「追加タスクの選択」画面で「PATHへの追加」にチェックを入れ直すのが最も簡単です。

よくある質問(FAQ)

VS Code は完全に無料?

はい、VS Code は無料でオープンソース(MIT ライセンス)です。拡張機能も大半が無料ですが、GitHub Copilot などの一部拡張機能は別途サブスクリプションが必要です。

VS Code と Visual Studio は同じもの?

別のソフトウェアです。VS Code は軽量なコードエディタ、Visual Studio はフル機能の IDE です。VS Code は macOS・Windows・Linux に対応していますが、Visual Studio は主に Windows 向けです。

インストール後にまずやるべき設定は?

日本語化(Japanese Language Pack 拡張機能のインストール)、テーマの変更、code コマンドの PATH 設定(ターミナルから起動可能にする)の3つがおすすめです。

古いバージョンをアンインストールしてから入れるべき?

上書きインストールが可能なので、事前のアンインストールは不要です。設定や拡張機能はそのまま引き継がれます。

VS Code は AI コーディングに対応している?

GitHub Copilot 拡張機能で AI コード補完に対応しています。さらに高度な AI 機能が必要な場合は、VS Code ベースの Cursor や Devin Desktop(旧Windsurf)も選択肢です。詳しくは AIエディタ比較記事 をご覧ください。

krona23

著者

krona23

IT業界20年以上の実務経験を持ち、日本国内有数のPVを誇る大規模Webサービスで事業部長・CTOを複数社で歴任。Windows/iOS/Android/Webと技術の変遷を経験し、現在はAIネイティブへの変革に注力。DevGENTでは、AIコードエディタ・自動化ツール・LLMの実践的な使い方を日英西3言語で発信中。

DevGENT について →

まとめ

VS Code インストールは3ステップ

  1. 公式サイトからダウンロード
  2. macOSはApplicationsフォルダへ移動、WindowsはインストーラーでPATH追加を忘れずに
  3. 起動してWelcome画面が出ればOK

VS Codeの詳しい機能や特徴については、こちらの記事で解説しています。
👉 VSCodeとは?できることと特徴を徹底解説
👉 AIエディタ比較記事はこちら

コメントを残す

Trending

DevGENTをもっと見る

今すぐ購読し、続きを読んで、すべてのアーカイブにアクセスしましょう。

続きを読む