VS Codeをインストールしてプログラミングを始める方法

はじめに

プログラミングを始めるには、コードを書くための エディタ（編集ソフト） が必要です。おすすめは VS Code（Visual Studio Code、ブイエスコード）。Microsoft が開発した無料のエディタで、世界中のプログラマーに使われています。

メモ帳でもコードは書けますが、VS Codeを使うと以下のメリットがあります。

• コードに色がつく（シンタックスハイライト）ので読みやすい
• 入力候補が表示される（オートコンプリート）ので速く書ける
• エラーを赤い波線で教えてくれるのでミスに気づきやすい
• 拡張機能で自分好みにカスタマイズできる

この記事では、VS Codeのダウンロードからインストール、日本語化、最初のファイル作成までをステップごとに解説します。

ステップ1：VS Codeをダウンロードする

1. VS Code公式サイトにアクセス
2. 大きな「Download」ボタンをクリック（自動的にWindows版/Mac版が選ばれます）
3. ダウンロードが完了するまで待つ

ファイルサイズ：約100MB。Wi-Fi環境でのダウンロードがおすすめです。

VS Codeは完全無料で、個人利用も商用利用もOKです。世界で最も使われているコードエディタで、拡張機能が豊富なのが特徴です。HTML・CSS・JavaScript・Python・Javaなど、ほぼすべてのプログラミング言語に対応しています。

ステップ2：インストールする

Windowsの場合

1. ダウンロードした .exe ファイルをダブルクリック
2. 「同意する」にチェックして「次へ」を何回かクリック
3. 「インストール」をクリックして完了を待つ

Macの場合

1. ダウンロードした .zip ファイルをダブルクリックして展開
2. 展開された「Visual Studio Code」を「アプリケーション」フォルダにドラッグ

📖 詳しくはVS Codeのインストール方法【図解】で解説しています。

ステップ3：日本語化する

VS Codeは初期状態では英語表示です。日本語にするには 拡張機能 をインストールします。

1. VS Codeを起動する
2. 左側の四角いアイコン（拡張機能）をクリック
3. 検索欄に Japanese と入力
4. 「Japanese Language Pack for Visual Studio Code」の「Install」をクリック
5. 右下に表示される「Restart」をクリックしてVS Codeを再起動

再起動後、メニューが日本語になっていれば成功です。もし英語のままの場合は、Ctrl+Shift+P（Mac: Cmd+Shift+P）でコマンドパレットを開き、「Configure Display Language」と入力して「ja」を選択してください。

ステップ4：フォルダを開いてファイルを作成する

1. デスクトップに my-project という新しいフォルダを作る
2. VS Codeで「ファイル」→「フォルダーを開く」→ 作ったフォルダを選ぶ
3. 左側のエクスプローラーで「新しいファイル」アイコンをクリック
4. index.html と入力してEnter

これでプログラミングを始める準備が整いました！

ファイルを作成したら、以下のHTMLを入力してみましょう。VS Codeでは ! と入力してTabキーを押すと、HTMLの雛形が自動で入力されます（Emmet機能）。

👉 VS Codeを開いてもプロジェクトが表示されないも参考にしてください。

おすすめの拡張機能

VS Codeには便利な拡張機能がたくさんあります。初心者におすすめの拡張機能を紹介します。

• Live Server — ファイルを保存すると自動でブラウザが更新される。HTMLの変更をリアルタイムで確認できるので、初心者に必須の拡張機能です。
• Prettier — コードを自動で整形（きれいに並べる）してくれる。インデントや改行を自動で揃えてくれるので、読みやすいコードが書けます。
• Auto Rename Tag — HTMLの開始タグを変更すると、閉じタグも自動で変更される。タグの閉じ忘れミスを防げます。
• HTML CSS Support — HTMLファイル内でCSSのクラス名を補完してくれる。タイプミスを減らせます。

拡張機能は左側の四角いアイコンから検索してインストールできます。インストール後はVS Codeを再起動すると確実に反映されます。

🔗 あわせて開発者ツールの使い方もチェックしてみましょう。

よくある間違い

• ファイルを直接開いてしまう：VS Codeでは「ファイル単体」ではなく「フォルダごと」開くのが基本です。フォルダを開かないと、Live Serverが正しく動作しません。
• 拡張子を間違える：HTMLファイルは必ず .html、CSSファイルは .css で保存しましょう。拡張子が違うと、シンタックスハイライト（色分け）が効きません。
• 保存を忘れる：ファイルを編集したら必ず保存（Ctrl+S / Cmd+S）しましょう。タブに白い丸が表示されていたら未保存です。「自動保存」を有効にすると保存忘れを防げます（ファイル→自動保存にチェック）。
• 文字化けする：ファイルの文字コードがUTF-8になっているか確認しましょう。右下のステータスバーに表示されています。

VS Codeの便利なショートカットキー

覚えておくと作業が速くなるショートカットキーを紹介します。

• Ctrl+S（Cmd+S）：ファイルを保存
• Ctrl+Z（Cmd+Z）：元に戻す（間違えても安心）
• Ctrl+Shift+P（Cmd+Shift+P）：コマンドパレットを開く
• Ctrl+/（Cmd+/）：選択行をコメントアウト

最初はマウス操作でも問題ありません。慣れてきたら少しずつショートカットを覚えていきましょう。

トラブルシューティング

• ダウンロードが始まらない → ブラウザの設定でダウンロードを許可する。別のブラウザ（Chrome・Firefox）で試してみましょう。
• 日本語化が反映されない → VS Codeを完全に閉じてから再起動する。それでもダメなら拡張機能を一度アンインストールして再インストールしましょう。
• ファイルが保存できない → フォルダの権限を確認する。デスクトップやドキュメントフォルダなら問題なく保存できます。
• Live Serverが動かない → フォルダを開いているか確認する。ファイル単体で開いている場合はLive Serverが起動しません。

🔗 最初のHTMLページを作る・プログラミングの始め方・HTML入門・初めてのCSSも参考にしてください。

まとめ

VS Codeの準備ができたら、さっそくHTMLを書いてみましょう。最初は「!」+Tabで雛形を作り、少しずつタグを追加していくのがおすすめです。わからないことがあっても、VS Codeが入力候補やエラー表示で助けてくれます。