VS Code（Visual Studio Code）を使い始めるための「基本手順」を、インストールから最初の設定、コーディング開始までステップバイステップで解説します。
1. インストール
まずはソフトをパソコンに入れます。
ダウンロード: ブラウザで「VS Code」と検索し、公式サイト（code.visualstudio.com）にアクセスします。
バージョンの選択: 「Stable（安定版）」と「Insiders（実験版）」がありますが、初心者はバグが少なく安定しているStableを選んでください。自分のOS（WindowsまたはMac）に合ったボタンをクリックしてダウンロードします。
インストール実行:
Windows: ダウンロードしたインストーラーを実行し、規約に同意して進めます。「エクスプローラーのコンテキストメニューに『Code で開く』アクションを追加する」にチェックを入れておくと後で便利です。
Mac: ダウンロードしたファイルを展開し、アプリケーションフォルダにドラッグ＆ドロップします。
2. 日本語化（必須ステップ）
VS Codeは標準では英語表記なので、最初に日本語化を行います。
拡張機能を開く: 画面左端のアクティビティバーにある「四角形が重なったアイコン（Extensions）」をクリックします。
検索とインストール: 検索窓に「Japanese」と入力し、最上位に出てくる「Japanese Language Pack for Visual Studio Code」の「Install」ボタンを押します。
再起動: インストール後、右下に表示される「Restart」ボタン（または再起動の案内）をクリックすると、メニューが日本語に切り替わります。
3. フォルダーを開く（プロジェクトの開始）
VS Codeは「ファイルを単体で開く」よりも「作業するフォルダーごと開く」のが基本です。
1ウィンドウ＝1フォルダー: 基本的に「1つのウィンドウにつき1つのプロジェクトフォルダー」という考え方で管理します。
開き方: デスクトップなどで作成した空のフォルダー（例：「test」など）を、VS Codeの画面上にドラッグ＆ドロップすると開けます。
4. ファイル作成とコーディング
実際にコードを書いてみます。
ファイルの作成: エクスプローラー（左側のサイドバー）で右クリックするか、「新しいファイル」アイコンを押してファイルを作ります。
拡張子を正確に: ファイル名をつける際、.html や .css などの拡張子を正しく入力してください。VS Codeはこの拡張子を見て、適切な入力補完（予測変換のような機能）を働かせます。
Emmet（エメット）機能を使う: HTMLファイルの場合、!（ビックリマーク）を入力してEnterキーを押すと、HTMLの基本的なひな形が一瞬で入力されます。これはVS Codeに標準搭載されている便利機能です。
5. やっておくべき設定
作業を快適にするために、以下の設定を確認しておくと良いでしょう。
自動保存（Auto Save）: ファイルを保存し忘れるのを防ぐため、設定で「Auto Save」を有効にするのがおすすめです。
手順：設定画面（コマンドパレット Ctrl/Cmd + Shift + P から「基本設定: 設定」を開くなど）で「Auto Save」と検索し、設定を変更します（例：afterDelayなど）。
フォントサイズ調整: 文字が小さくて見づらい場合は、設定からフォントサイズ（Font Size）を大きく（例：16や18など）変更して、目に優しい環境を作りましょう。
6. おすすめの拡張機能（最初に入れるなら）
拡張機能は便利ですが、入れすぎると重くなるため「必要になったら入れる」のが基本です。
Live Server: HTML/CSSの変更をブラウザでリアルタイムに確認できる機能です。インストール後、右クリックから「Open with Live Server」を選ぶだけでプレビューできます。
Error Lens: コードのエラー内容を、その行に直接わかりやすく表示してくれるため、ミスに気づきやすくなります。
1.画面は大きく4つのエリア
アクティビティバー（左端）:
「エクスプローラー（ファイル管理）」「検索」「ソース管理（Git）」「実行とデバッグ」「拡張機能」などのアイコンが並んでいます。
サイドバー:
アクティビティバーの選択内容詳細が表示されます（例：ファイル一覧など）。
エディタ（中央）:
コードを書くメインの場所です。タブ形式で複数のファイルを開けます。
ステータスバー（最下部）:
エラーの有無、カーソル位置、文字コードなどが表示されます。
2. ファイルとフォルダの基本操作
VS Codeでは「フォルダごと」開いて作業するのが一般的です。
フォルダを開く:
編集したいフォルダをVS Codeのウィンドウにドラッグ＆ドロップすると開けます。基本的には「1ウィンドウ＝1フォルダ（プロジェクト）」で管理します。
ファイルの作成:
サイドバーの「新しいファイル」アイコンを押すか、右クリックから作成します。
保存:
Ctrl + S (Windows) / Command + S (Mac) で保存します。未保存のファイルはタブの「×」マークが「●」になっています。
ワークスペース:
複数のプロジェクト（フォルダ）をまとめて管理したい場合は、「ワークスペース」として保存する機能が便利です。
3. コーディングに便利な機能
コードを書く際に効率を上げる機能が標準で備わっています。
Emmet（エメット）:
HTMLやCSSを省略記法で入力できる機能です。
◦ 例: HTMLファイルで ! と入力してEnterを押すと、HTMLのひな形が一瞬で作成されます。
◦ 例: p と打ってEnterで <p></p>、ul>li*5 と打ってEnterでリストを5つ作成できます。
エラー検知:
コードに間違いがある場合（例：スペルミス、コロン抜け）、波線で教えてくれます。下部のステータスバーの「問題」パネルで詳細を確認できます。
マルチカーソル:
Alt + クリック (Windows) / Option + クリック (Mac) でカーソルを複数増やし、同時に複数箇所を編集・入力できます。
定義へ移動:
関数などの上で F12 を押すと、その定義元へジャンプできます。
4. ショートカットキー
マウス操作を減らすことで作業速度が格段に上がります。
コマンドパレット: Ctrl + Shift + P (Windows) / Command + Shift + P (Mac)
◦ VS Codeのあらゆる機能を検索・実行できる最重要機能です。「設定」や「テーマ変更」などもここから呼び出せます。
ファイル検索: Ctrl + P (Windows) / Command + P (Mac)
◦ ファイル名を入力して瞬時にそのファイルを開けます。
行の移動: Alt + ↑/↓ (Windows) / Option + ↑/↓ (Mac)
◦ 選択した行（またはカーソルがある行）を上下に移動させます。カット＆ペーストの手間が省けます。
行の複製: Shift + Alt + ↑/↓ (Windows) / Option + Shift + ↑/↓ (Mac)
◦ 現在の行を上下にコピーします。
コメントアウト: Ctrl + / (Windows) / Command + / (Mac)
◦ 選択した行をコメント化（無効化）したり、解除したりできます。
サイドバーの開閉: Ctrl + B (Windows) / Command + B (Mac)
◦ 画面を広く使いたい時に便利です。
画面分割: Ctrl + \ (Windows/Mac等はキー配列による) や、タブをドラッグ＆ドロップすることで、画面を左右などに分割して並べて作業できます。
5. その他
ターミナル: Ctrl + ` (Windows) / Command + J (Mac) などで、VS Code内に「黒い画面（ターミナル）」を表示し、コマンドを実行できます。
設定の変更: 文字サイズや自動保存（Auto Save）の設定などは、左下の歯車アイコンまたはコマンドパレットから変更可能です。