Posted inソフトウェア チュートリアル

Visual Studio Code 導入・初心者ガイド

6月 1, 2025

Visual Studio Code（VSCode）とは？

Visual Studio Codeは、Microsoft が開発した無料のコードエディターです。軽量でありながら強力な機能を持ち、プログラミング初心者からプロの開発者まで幅広く愛用されています。

主な特徴

  • 無料で使える
  • 軽量で高速
  • 多言語対応（JavaScript、Python、C#、Java など）
  • 豊富な拡張機能
  • AI機能内蔵（コード補完・チャット機能）
  • クロスプラットフォーム（Windows、Mac、Linux）

インストール方法

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

  1. Visual Studio Code公式サイトにアクセス
  2. 「Download」ボタンをクリック
  3. お使いのOS（Windows、Mac、Linux）に対応したバージョンを選択
  4. ダウンロードしたファイルを実行してインストール

2. インストールの注意点

  • Windows: 管理者権限が必要な場合があります
  • Mac: セキュリティ設定で「開発元が未確認のアプリケーション」を許可する必要がある場合があります
  • Linux: パッケージマネージャーからもインストール可能

初回起動と基本設定

1. 初回起動

インストール後、VS Codeを起動すると「Welcome」画面が表示されます。この画面では：

  • チュートリアルへのリンク
  • 最近のファイル
  • 新しいファイルの作成 などができます。

2. 言語設定（日本語化）

VS Codeは標準では英語ですが、日本語化できます：

  1. 左側のアクティビティバーから「Extensions（拡張機能）」をクリック
  2. 検索ボックスに「Japanese Language Pack」と入力
  3. 「Japanese Language Pack for Visual Studio Code」をインストール
  4. VS Codeを再起動

3. 基本的なテーマ設定

  • File（ファイル） → Preferences（基本設定） → Theme（テーマ）
  • または Ctrl+K, Ctrl+T（Windows/Linux）、Cmd+K, Cmd+T（Mac）
  • ダークテーマ、ライトテーマから選択可能

基本的な使い方

1. ファイル・フォルダーを開く

  • ファイルを開く: Ctrl+O（Windows/Linux）、Cmd+O（Mac）
  • フォルダーを開く: Ctrl+K, Ctrl+O（Windows/Linux）、Cmd+K, Cmd+O（Mac）
  • ドラッグ&ドロップでファイルやフォルダーを開くことも可能

2. 新しいファイルの作成

  • Ctrl+N（Windows/Linux）、Cmd+N（Mac）
  • または File → New File

3. ファイルの保存

  • Ctrl+S（Windows/Linux）、Cmd+S（Mac）
  • 初回保存時は保存場所とファイル名を指定

4. エクスプローラーパネル

左側のサイドバーに表示され、プロジェクトのファイル構造を確認できます。

  • ファイルのクリックで開く
  • 右クリックで新規ファイル・フォルダー作成
  • ドラッグ&ドロップでファイル移動

おすすめの初期設定

1. 自動保存の有効化

  • File → Preferences → Settings
  • 「auto save」で検索
  • Auto Saveを「afterDelay」に設定

2. フォントサイズの調整

  • Settingsで「font size」を検索
  • Editor: Font Sizeで好みのサイズに調整

3. タブサイズの設定

  • Settingsで「tab size」を検索
  • Editor: Tab Sizeで設定（通常は2または4）

必須拡張機能

初心者におすすめの拡張機能：

1. Japanese Language Pack

日本語化のために必須

2. Prettier – Code formatter

コードの自動整形

3. Auto Rename Tag

HTMLタグの自動リネーム

4. Bracket Pair Colorizer 2

括弧のペアを色分け表示

5. Live Server

HTMLファイルをリアルタイムプレビュー

拡張機能のインストール方法

  1. 左側の「Extensions」アイコンをクリック
  2. 拡張機能名で検索
  3. 「Install」ボタンをクリック

AI機能の活用

VS Codeには強力なAI機能が内蔵されています：

1. GitHub Copilot Chat

  • コードについて質問
  • エラーの解決方法を聞く
  • コードの説明を求める

2. Next Edit Suggestions

  • コード入力中に次の編集を提案
  • Tabキーで提案を受け入れ

3. Agent Mode

  • 複数ファイルにわたる複雑なタスクを自動実行
  • テストの実行やエラーの修正を自動化

よく使うショートカットキー

ファイル操作

  • 新規ファイル: Ctrl+N
  • ファイルを開く: Ctrl+O
  • 保存: Ctrl+S
  • すべて保存: Ctrl+K, S

編集

  • コピー: Ctrl+C
  • 切り取り: Ctrl+X
  • 貼り付け: Ctrl+V
  • 元に戻す: Ctrl+Z
  • やり直し: Ctrl+Y

検索・置換

  • 検索: Ctrl+F
  • 置換: Ctrl+H
  • ファイル内検索: Ctrl+Shift+F

表示

  • サイドバー表示切替: Ctrl+B
  • ターミナル表示切替: `Ctrl+“
  • コマンドパレット: Ctrl+Shift+P

トラブルシューティング

よくある問題と解決方法

Q: 日本語が文字化けする A: ファイルのエンコーディングをUTF-8に変更してください

Q: 拡張機能が動かない A: VS Codeを再起動するか、拡張機能を再インストールしてください

Q: 動作が重い A: 不要な拡張機能を無効化するか、設定を見直してください

次のステップ

VS Codeの基本に慣れたら：

  1. プログラミング言語固有の拡張機能をインストール
  2. Git連携を学ぶ
  3. デバッグ機能を活用
  4. ワークスペース設定をカスタマイズ
  5. スニペットを作成して効率化

学習リソース

VS Codeは学習コストが低く、段階的にスキルアップできる優れたエディターです。まずは基本操作に慣れて、徐々に高度な機能を覚えていきましょう！

Tags:
Last updated on 6月 1, 2025