HTMLやCSSの勉強を始めるなら、まずは「テキストエディター」の準備が必要です。
その中でも特に人気なのが「Visual Studio Code（VS Code）」という無料のエディター。
シンプルで使いやすく、しかも自分好みにカスタマイズできる拡張機能も充実しています。
この記事はこのような人におすすめ！
- Web制作やプログラミングをこれから始めたい方
- テキストエディタのインストールが初めての方
- VS Code をこれから使い始めたい方
この記事では、初心者の方にも分かりやすく「Visual Studio Code のインストール方法」から「日本語化の手順」まで、画像付きで丁寧にご紹介します。
Visual Studio Code（VS Code）ってなに？
HTMLやCSSなどのコードを書くときには、「テキストエディター」と呼ばれるソフトが必要です。
これは、文字や記号を入力して、プログラムやWebページのコードを編集するための道具のようなものです。
Windowsの「メモ帳」やMacの「テキストエディット」もテキストエディターの一種ですが、機能が限られているため、Web制作やプログラミングを学ぶなら、より便利な機能がそろった専用のエディターを使うのが一般的です。
Visual Studio Code（VS Code）は、Microsoftが無料で提供しているプログラミング用のテキストエディターです。HTMLやCSSだけでなく、JavaScriptやPythonなどのさまざまな言語に対応しています。
VS Codeは初心者から上級者まで多くの人に選ばれているので、「どのエディターを使えばいいか分からない」という方には、まずVS Codeをおすすめします！
Visual Studio Code のインストール方法（Windows）
「Visual Studio Code（VS Code）」を使うには、まずパソコンにインストールする必要があります。
ここでは、Windowsでのインストールの手順をステップごとに丁寧に解説します。
この手順に沿って進めれば、
5〜10分程度でインストールできるよ！
Step1：公式サイトからインストーラーをダウンロード
まずはじめに、Visual Studio Code公式のダウンロードページ にアクセスします。
ご自身のパソコンのOSに合わせて、次のどちらかを選んでください。
選択すると、インストーラー（インストール用のファイル）のダウンロードが自動で始まります。
Step2：ダウンロードしたインストーラーを実行
ダウンロードが完了したら、次はそのファイルを開いてインストールします。
Windowsの場合
ブラウザ右上にあるダウンロードボタン
をクリック。
「VSCodeUserSetup～.exe」をクリックします。
使用許諾契約書の内容に目を通します。
下部の「同意する」を選択して「次へ」をクリックします。
VS Codeのインストール先のフォルダを指定します。
特に、こだわりがなければ、このまま「次へ」をクリックでOKです。
インストール先を変更したい場合は、「参照」から変更してください。
こちらも、必要なければこのまま「次へ」をクリックでOKです。
名前の変更する場合や、スタートメニューにショートカットを作成しない場合は、下図を参考に設定してみましょう。
「追加タスクの選択」が表示されます。
すべてにチェックを入れて「次へ」をクリックします。
「インストール準備完了」が表示されます。
設定内容を確認し、「インストール」をクリックします。
「Visual Studio Code セットアップウィザードの完了」が表示されたら、「完了」をクリックします。中央にある「Visual Studio Codeを実行する」にチェックを入れると、終了と同時にVisual Studio Codeが起動します。
インストールが完了したら、起動してみよう！
Step3：Visual Studio Code を起動する
インストールが完了したら、さっそく起動してみましょう。
インストール時に「追加タスクの選択」画面で「デスクトップ上にアイコンを作成する」にチェックを入れた方は、デスクトップから起動。
デスクトップ上にアイコンがない方は、タスクバーの検索ボックスに「Visual Studio Code」と検索して起動してください。
起動すると、最初は英語表記の画面が表示されると思います。
このままだと少し使いにくいので次は、日本語化の設定へ進んでいきましょう！
Visual Studio Code の日本語化方法
Visual Studio Code（VS Code）はデフォルトで英語表示となっていますが、日本語化はとても簡単に行えます。
日本語化は1分くらいでできるよ！
Step1：拡張機能メニューを開く
VS Codeを起動後、左側のサイドバーにある4つの四角形アイコンをクリックします。
（ショートカットは Ctrl + Shift + X）
Step2：「Japanese Language Pack for Visual Studio Code」と検索
検索ボックスに「Japanese Language Pack for Visual Studio Code」と入力するとMicrosoft 公式の拡張機能が表示されます。
必ず提供元が Microsoft であることを確認しましょう。
Step3：拡張機能をインストール
「install」ボタンをクリックします。
インストール後に再起動を促すメッセージが表示されるので、「Change Language and Restart」をクリックします。
VS Code が再起動すれば、日本語表示に切り替わっているはずです。
Step4：日本語化されたかを確認する
再起動後に、画面上のメニューが以下のように表示されていれば、日本語化は成功しています。
- 「File」→「ファイル」
- 「Edit」→「編集」
- 「View」→「表示」
もしこれらがまだ英語のままなら、日本語化に失敗している可能性があります
日本語化ができないときの原因と対処法
まれに、日本語化に失敗してしまうこともあります。
その際のチェックポイントを紹介します。
日本語パックが有効になっていない
拡張機能はインストール済みでも、有効化されていない場合があります。
- 「View」メニューから「Command Pallet」を選択するか、Ctrl + Shift + Pを押して「コマンドパレット」を開く
- 「Configure Display Language」と入力して選択
- 表示された言語一覧から「ja」または「Japanese」を選択
- 再起動を求められるので、「Restart」をクリックしてVS Codeを再起動
VS Codeを再起動していない
拡張機能をインストールしても、再起動しないと反映されません。
拡張機能のインストール後は、必ず一度 VS Code を再度起動してください。
インターネット接続が不安定
「Japanese Language Pack」のダウンロード中にエラーが発生していた可能性があります。
安定したインターネット環境で再度インストールを試みてください。
必要に応じて、拡張機能をいったんアンインストールし、再インストールすることも有効です。
ファイルが破損している
上記の手順で解決しない場合は、VS Codeの設定ファイルが破損している可能性があります。
VS Codeをアンインストールし、再度インストールしなおすことで解決する場合があります。
Visual Studio Codeのユーザー設定もチェックしよう！
Visual Studio Codeをインストールして日本語化まで完了したら、次はコーディング環境を快適に整えることが大切です。
特に「Visual Studio Code（VSCode）」は多くのエンジニアやデザイナーが利用している人気エディタで、設定を工夫することで学習効率や作業スピードがぐんと上がります。
テーマやフォントサイズの変更、自動保存の設定など、すぐに取り入れられる便利な機能がありますので、ぜひチェックしてみてください！
