ホーム

VS Codeを始めよう

メモ帳やテキストエディットでは色分けも補完もなくて不便——そんなときに頼れるのがVisual Studio Code（VS Code）です。VS Codeはコード用のスマートノート。書いている内容を理解し、ハイライトや補完、便利な拡張機能で作業を手助けしてくれます。しかも無料で、Windows / macOS / Linuxすべてに対応しています。

キー概念

必要なもの

ステップ1：VS Codeをダウンロード＆インストール

Welcomeタブが表示され、スタートオプションが表示されます。

ステップ2：画面構成を見てみる

VS Codeは主に5つの領域で構成されています。

アクティビティバー上部の エクスプローラー アイコンをクリックすると、ファイルブラウザが表示されます。

ステップ3：フォルダを開いて探索

エクスプローラーサイドバーにフォルダ内のファイルが表示されます：

ステップ4：Markdownファイルを作ってみる

# My Project

This is a **demo project** for learning VS Code.

## Features
- Easy to edit
- Markdown formatting
- Live preview

## Next Steps
1. Add more content
2. Try other file types
3. Explore extensions

Markdownは # で見出し、** で太字、- でリストを表す簡単なテキスト記法で、ドキュメントやChatGPTやClaudeなどのLLMとのコミュニケーションに広く使われています。

ステップ5：Markdown Preview拡張機能をインストール

ステップ6：Markdownファイルをプレビュー

フォーマットされたMarkdownを表示するプレビューパネルが開きます - 左で編集、右でリアルタイムに変更を確認できます！

ステップ7：統合ターミナルを使う

ファイル一覧を表示：

ls

（WindowsのCommand Promptでは dir を使用）

作業ディレクトリを表示：

pwd

（WindowsのCommand Promptでは cd を使用）

新しいフォルダを作成：

mkdir notes

エクスプローラーを確認すると、notes フォルダが表示されます！ターミナルはプロジェクトフォルダ内で実行されるため、コマンドはプロジェクトに直接影響します。

ステップ8：VS CodeでAIエージェントを使う（任意）

VS CodeにはGitHub Copilot Chatが搭載されており、コードの説明、作成、デバッグを支援するAIアシスタントです。

GitHub Copilotがファイルを分析し、その内容を説明します。新しいコードの作成、バグの修正、機能追加の方法などについて質問することも可能です。

ヒント： インライン編集を使う場合は、任意のファイルでコードをハイライトし、Ctrl+I（Windows/Linux）または Cmd+I（Mac）を押すと、Copilotにその部分のみの変更、修正、説明を依頼できます。

プロジェクトを再度開くには

トラブルシューティング

完全なワークフロー

  1. VS Codeでフォルダを開く
  2. ファイルを作成／編集
  3. 拡張機能を使ってプレビュー
  4. ターミナルでコマンドを実行
  5. AIを使ってコードを理解・改善
  6. 保存して繰り返す

次のステップ

Steven Ge 作成（2025年12月7日）