「まずは道具を整える」が最短ルート。Visual Studio Code（VS Code）は軽快で拡張も豊富。ここでは Windows と macOS の導入、日本語化、おすすめ拡張、初期設定、Hello World までを迷わず終わらせます。
事前に知っておくこと
- VS Codeは無料・軽量・拡張が豊富なエディタです（IDEではありません）。
- 各言語を動かすには、別途実行環境（例：Node.js/Python/Javaなど）が必要です。
- 公式：https://code.visualstudio.com/（ダウンロードはここから）
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はどれにも対応できます。
