VS Code

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

事前に知っておくこと

VS Codeは無料・軽量・拡張が豊富なエディタです（IDEではありません）。
各言語を動かすには、別途実行環境（例：Node.js/Python/Javaなど）が必要です。
公式：https://code.visualstudio.com/（ダウンロードはここから）

インストールの流れ（Windows/Mac共通）

Windowsに入れる（最短）

公式サイトへ：code.visualstudio.com → Windows x64 をクリック。
ダウンロードした VSCodeUserSetup-x64-*.exe を起動。
セットアップでは次のチェックを推奨：
- Add “Open with Code” action to context menu（右クリックに追加）
- Add to PATH（コマンドラインから code を使える）
- デスクトップにショートカットを作成（任意）
完了後、スタートメニューから VS Code を起動。

インストールに失敗する/権限がない場合

管理者権限が必要な環境では、システム版ではなくユーザーインストーラーを使うと通りやすいです。

Macに入れる（最短）

公式サイトへ：code.visualstudio.com → macOS をクリック（Universal版）。
ダウンロードした .dmg を開き、Visual Studio Code.app を Applications へドラッグ。
初回起動でブロックされたら：システム設定 → プライバシーとセキュリティ で「このまま開く」。
ターミナルから code を使えるようにする：
VS Codeで Cmd + Shift + P → 「Shell Command: Install ‘code’ command in PATH」を実行。

日本語化と言語パック

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

最初にやる初期設定（コピペ可）

以下は「設定（JSON）」に追記するだけでOK。
コマンドパレットで 基本設定: 設定 (JSON) を開く → 右側のJSONに貼り付け。

{
  "editor.fontSize": 15,
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.rulers": [80, 100],
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 800,
  "editor.renderWhitespace": "selection",
  "terminal.integrated.defaultProfile.windows": "PowerShell",
  "explorer.confirmDelete": false,
  "workbench.startupEditor": "newUntitledFile"
}

※ 迷ったら「ファイル → ユーザー設定 → 設定」からGUIで同様に変更できます。

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

Japanese Language Pack

UIを日本語化。初回に入れておくと迷わない。

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>

VS Codeでフォルダを作成（例：hello-vscode）。
上のコードを index.html として保存。
エクスプローラーで右クリック→既定のブラウザで開く。
（Live Server拡張を入れると自動リロードで快適）

※ Python や Node.js を実行したい場合は、それぞれ Python / Node.js を別途インストールしてから実行してください。

よくあるつまずき

code コマンドが使えない：Macは「Shell Command: Install ‘code’ command in PATH」を実行。Windowsはインストーラーで「Add to PATH」を有効にして再起動。
日本語が文字化け：右下のエンコーディングを 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はどれにも対応できます。