1. ホーム /
  2. プログラミング /
  3. 開発環境 /
  4. VS Code /
  5. 初心者向けVS Codeの入れ方：Windows/Macの完全ガイド

初心者向けVS Codeの入れ方：Windows/Macの完全ガイド

最短10分で完了！ 初心者向け VS Code の入れ方 Windows / Mac の手順を図で解説

「まずは道具を整える」が最短ルート。Visual Studio Code（VS Code）は軽快で拡張も豊富。ここでは Windows と macOS の導入、日本語化、おすすめ拡張、初期設定、Hello World までを迷わず終わらせます。

事前に知っておくこと

  • VS Codeは無料・軽量・拡張が豊富なエディタです（IDEではありません）。
  • 各言語を動かすには、別途実行環境（例：Node.js/Python/Javaなど）が必要です。
  • 公式：https://code.visualstudio.com/（ダウンロードはここから）
インストールの流れ（Windows/Mac共通）
ダウンロード インストール 日本語化 初期設定

Windowsに入れる

  1. 公式サイトへ：code.visualstudio.com → Download for Windows をクリック。

    2. ※ページが切り替わってもダウンロードが開始されない場合には、ページ上部のdirect download link.をクリック！

  2. ダウンロードした VSCodeUserSetup-x64-*.exe を起動。
    • 使用許諾契約書の同意画面が出たら、下部の「同意する」を選択して「次へ(N) >」をクリックします。
    • 追加タスクの選択画面が表示されたら、必要なオプションにチェックを入れて（特に問題が無い場合はそのまま）「次へ(N) >」をクリックします。
      • 　　　　　
    • インストール準備完了画面が表示されたら、「インストール(I) 」をクリックしてインストールを開始します。
    • インストールが完了したら、「完了(F)」をクリックしてインストールを終了します。中央にあるチェックボックスにチェックが入っていると、終了と同時にVisual Studio Codeが起動します。
    • デスクトップにショートカットを作成（任意）
  3. 完了後、スタートメニューから VS Code を起動。

Macに入れる

  1. 公式サイトへ：code.visualstudio.com → macOS をクリック（Universal版）。
  2. ダウンロードした .dmg を開き、Visual Studio Code.app を Applications へドラッグ。
    3. 　　　
  3. VSCodeをクリックして起動！

日本語化と言語パック

  1. 左サイドバーの拡張機能（四角いアイコン）を開く。
  2. Japanese Language Pack for Visual Studio Code を検索してインストール。
  3. 右下の再起動ボタン、または「表示言語を変更」で日本語に切替。
  4. 日本語化されていれば成功！

初心者に効くおすすめ拡張

Live Server

自動リロードで保存反映させてくれるからこれは一番おすすめ。

Prettier

コード自動整形。保存時フォーマットにするとキレイが続く。

ESLint

JavaScriptの品質チェック。チュートリアルに沿って初期化。

Python

Pythonを書くなら必須。Lint/デバッグも一括対応。

Java Extension Pack

Javaの開発向け（Language Support, Debuggerなど）。

GitLens

誰がいつどこを変更したかを可視化。学習にも役立つ。

保存時に自動整形（Prettier） 
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

Hello World（保存→実行）

ここではインストール直後でも試せる HTML を例にします（ブラウザで動く）。

<!doctype html>
<html lang="ja">
<meta charset="utf-8">
<title>Hello VS Code</title>
<h1>Hello VS Code!</h1>
<p>編集→保存→ブラウザで開けばOK。</p>
  1. VS Codeでフォルダを作成（例：hello-vscode）。
    デスクトップで右クリック後に新規作成でフォルダを作成。（フォルダ名は何でも大丈夫なのでサンプルとでも名付けてください。）フォルダをVSCodeの画面にドラッグアンドドロップする！
  2. できたら、フォルダ名の左側の一番手前の＜新しいファイル＞というボタンをクリック。そこにindex.htmlと記入。 上のコードを張り付け index.html として保存。
  3. index.htmlを右クリックして＜パスをコピー＞を押す→既定のブラウザでペーストして開く。
    （Live Server拡張を入れると自動リロードで快適）

よくあるつまずき

  • 日本語が文字化け：右下のエンコーディングを UTF-8 に切替。保存時に再エンコード可。
  • 拡張がインストールできない：ネットワーク/プロキシ設定を確認（設定で「proxy」を検索）。
  • フォントが見づらい：editor.fontSize と editor.lineHeight を上げる。等幅フォントの導入も効果的。

次に読むと効率が上がる記事

FAQ

VS Code と Visual Studio は別物？

別物です。VS Codeは軽量エディタ、Visual StudioはWindows向けの大型IDEです。初心者にはVS Codeが扱いやすいです。

どの言語を始めるのが良い？

WebならJavaScript、データ分析ならPython、業務システムならJavaが定番。VS Codeはどれにも対応できます。その他、アプリ開発やホームページ作成などありますのでどの言語がいいか知りたいときはコメントを記入してください。

著者：まーくん｜更新日：2025-09-04

コメントを残す

*

CAPTCHA