リソース
開発環境構築
Visual Studio Code

Visual Studio Code セットアップ

Visual Studio Code（VS Code）は、Web開発に最適な無料のコードエディタです。Claude Codeとの統合により、効率的な開発環境を構築できます。

vscode vs code visual studio code ビジュアルスタジオコード インストール セットアップ コードエディタ エディタ 開発環境 IDE 統合開発環境 Claude Code クロード AI支援 ai支援開発 プログラミング ウェブ開発 web開発 HTML CSS JavaScript TypeScript 拡張機能 extension プラグイン Live Server ライブサーバー Git Graph ギット japanese language pack 日本語化 github連携 github同期 設定同期 テーマ theme ダーク ライト prettier フォーマッター auto rename tag インデント リアルタイムプレビュー diff ディフ ターミナル コマンドパレット ショートカット windows mac macos 初心者 入門 無料 free

🚀 1. インストール手順

公式サイトからダウンロード

Visual Studio Code 公式サイト にアクセスして、お使いのOSに対応したバージョンをダウンロードします。


自動的にお使いのOSが検出され、適切なダウンロードボタンが表示されます。

OSごとのインストール

Windows へのインストール

  1. ダウンロードした .exe ファイルをダブルクリック
  2. セットアップウィザードの指示に従い「次へ」をクリック
  3. ライセンス条項に同意して「次へ」
  4. インストール場所を選択（通常はデフォルトのまま）
  5. 重要：追加タスクで以下にチェック
    • ✅ デスクトップにアイコン作成
    • ✅ ファイル右クリック「Code で開く」
    • ✅ フォルダ右クリック「Code で開く」
  6. 「インストール」をクリックして完了


右クリックメニューの追加により、任意のファイルやフォルダを瞬時にVS Codeで開けるようになります。

macOS へのインストール

  1. ダウンロードした .zip ファイルをダブルクリックして解凍
  2. Visual Studio Code.app をアプリケーションフォルダにドラッグ
  3. Launchpad または Applications フォルダから起動
  4. 初回起動時にセキュリティ警告が出た場合：
    • 副クリック（右クリック）から、開くを選ぶ
    • 「このまま開く」をクリック


アプリケーションフォルダに移動しないと、アップデートや拡張機能で問題が生じる場合があります。

初回起動の確認

VS Codeを起動して以下が正常に表示されることを確認：

  • ✅ Welcome画面
  • ✅ 左側のアクティビティバー
  • ✅ 中央のエディタエリア
  • ✅ 下部のステータスバー

⚙️ 2. 初期設定

日本語化の設定

  1. 左側のアクティビティバーから拡張機能アイコン（🧩）をクリック
  2. 検索ボックスに Japanese と入力
  3. Japanese Language Pack for Visual Studio Code を見つけてインストール
  4. 右下に表示される Restart Now ボタンをクリック
  5. 再起動後、日本語表示になることを確認


日本語化により、メニューやエラーメッセージが読みやすくなります。

GitHubアカウントでログイン

設定の同期により、複数端末で同じ環境を使用できます。

  1. 画面左下のアカウントアイコン（👤）をクリック
  2. 「サインインして設定を同期する」を選択
  3. 「GitHub でサインイン」を選択
  4. ブラウザでGitHubにログイン
  5. VS Code の承認を許可
  6. 同期する設定項目を選択して「サインイン＆オンにする」


拡張機能、テーマ、キーボードショートカットなどが自動同期されます。

テーマの設定

  1. Ctrl+Shift+P （Mac: Cmd+Shift+P）でコマンドパレットを開く
  2. theme と入力して「配色テーマ」を選択
  3. 上下矢印キーでテーマをプレビュー
  4. 気に入ったテーマでEnterを押して決定

おすすめテーマ：

  • Dark+ - 目に優しいダークテーマ
  • Light+ - 明るいライトテーマ
  • GitHub Dark - GitHubライクなダーク

🧩 3. 必須拡張機能

Web開発を効率化する重要な拡張機能をインストールしましょう。

Live Server
ローカルサーバーでHTMLをリアルタイムプレビュー
 Git Graph
Gitコミット履歴を視覚的に表示
Prettier
コードフォーマッターで美しいコード
Auto Rename Tag
HTMLタグの自動ペアリネーム
Live Server - HTMLリアルタイムプレビュー

インストール方法：

  1. 拡張機能パネル（🧩）を開く
  2. Live Server で検索
  3. 作者「Ritwick Dey」の拡張機能をインストール

使用方法：

  • HTMLファイルを開いて右下の「Go Live」をクリック
  • または右クリック → 「Open with Live Server」
  • ブラウザで http://127.0.0.1:5500 が自動開
  • ファイル保存時に自動リロード


CSSやJavaScriptの変更も瞬時にブラウザに反映されます。

Git Graph - コミット履歴の視覚化

インストール方法：

  1. Git Graph で検索
  2. 作者「mhutchie」の拡張機能をインストール

使用方法：

  • ソース管理パネル（🌿）を開く
  • 上部の「Git Graph」ボタンをクリック
  • ブランチやコミット履歴がグラフで表示


Gitリポジトリでのみ機能します。プロジェクトで git init を実行してください。

おすすめ追加拡張機能

Web開発向け：

  • Prettier - コードフォーマッター
  • Auto Rename Tag - HTMLタグ自動リネーム
  • Bracket Pair Colorizer - 括弧の色分け
  • indent-rainbow - インデントの視覚化

インストール方法： 拡張機能パネルで各名前を検索してインストール

🤖 4. Claude Code 統合セットアップ

Claude CodeとVS Codeを連携させることで、AI支援による効率的な開発環境を構築できます。


Claude Codeのインストールと認証が完了していることが前提です。

統合ターミナルでClaude Codeを起動

VS Code内のターミナルからClaude Codeを起動します。

  1. ターミナルを開く：Ctrl+Shift+`` （Mac: Cmd+Shift+`` )
  2. プロジェクトのルートディレクトリで実行：
claude
  1. Claude Code拡張機能が自動インストールされることを確認

IDE統合機能を有効化

以下のコマンドでVS Codeとの完全統合を設定：

/ide

有効になる機能：

  • 🔍 対話的diffビュー - VS Code内でコード変更を視覚的に確認
  • 📋 コンテキスト自動共有 - 選択範囲やタブ情報を自動連携
  • ⚡ 診断情報共有 - エラーやwarningを自動検出
  • ⌨️ ファイル参照ショートカット - Cmd+Option+K で素早くファイル挿入

動作確認

統合が正常に機能しているかテスト：

  1. VS Codeでファイルを選択
  2. Claude Codeでファイルの内容が認識されることを確認
  3. コード変更時にdiffビューが表示されることを確認


Claude Codeのコマンド一覧は /help で確認できます。

🎉 セットアップ完了

VS CodeとClaude Codeの統合環境が完成しました！以下のような効率的な開発が可能になります：

AI支援コーディング
Claude Codeによる自動コード生成・リファクタリング
リアルタイムプレビュー
Live Serverでの変更即座反映
 視覚的Git管理
Git Graphでのブランチ・履歴管理
統合開発体験
VS Code内でのシームレスなAI連携

次は実際のプロジェクトでこの環境を活用してWeb開発を始めましょう！

Netlifyセットアップ