Win/Macで使える！Visual Studio Codeの初回インストールから日本語化完了までを完全解説

VS Codeとは？

VS Codeは、正式名称をVisual Studio Codeといい、Microsoftが開発・提供している完全無料、広告表示無しのコードエディタです。

HTML、CSS、JavaScript、PHPなど、Web制作やプログラミングで使うさまざまなファイルを編集できるツールで、さらに無料の拡張機能を追加することで、コードの補完、色分け、エラーの確認、ファイル管理など、使い手の用途や好みに合わせてカスタマイズできることが大きな特徴です。

VS Codeは当サイトの作成はもちろん、僕も10年近く愛用しているエディタで、エディタツールの中で圧倒的におすすめしています。

プログラミングにエディタが必要な理由

プログラミングでは、HTMLやCSS、PHPなどのコードを正しく書き、必要に応じて修正していく作業が発生します。特にプログラム言語は1文字でも間違えば即エラーとなるため、コードを見やすく整理しながら編集できるエディタツールは、作業効率を大きくアップすることができます。

初期ツールのメモ帳のようなシンプルなテキストエディタでもコードを書くことはできますが、VS Codeを使うと、タグや命令の見分けがつきやすくなり、入力ミスにも気づきやすくなります。

また、プロジェクトとして管理できるので、複数のフォルダ、ファイルを行き来しながら作業する場面で便利です。Webサイト制作ではHTML、CSS、画像、JavaScriptなど複数のファイルを扱うことが多いため、専用エディタを使うメリットはかなり大きいです。

VS Codeのダウンロードとインストール

VS Codeのダウンロードは、Microsoft内のダウンロードページ（外部サイト）から行います。

画像中央にある「VS Codeをダウンロードする」をクリックすると、OS別の詳細ページへ移動します。インストールするパソコンのOSのバージョンがわからない場合は、統合版をダウンロードすればOKです。

インストール版をダウンロードした場合は、利用規約等案内に従ってインストールを進めます。ダウンロード版はファイルを解凍し、作成されたフォルダ内のアプリケーションファイルから起動します。

追加のツール案内に関しては、使う予定がなければチェックを外してから進めます。デスクトップアイコンの作成や、右クリックメニューへの追加なども、好みに応じて選択してください。

インストール完了後、VS Codeを起動できれば準備は完了です。初回起動時はほとんどの場合英語表示になっているので、次の手順で日本語化していきます。

VS Codeの日本語化

インストール完了後、アプリケーションを開いたら、まずはツールの日本語化をします。英語のまま使ってもOKですが、日本語化しても特に不具合は起きないので、こだわりがなければ好きな言語に変えるのがおすすめです。

日本語化は、VS Codeの拡張機能から行います。左側のメニューバーから拡張機能を選択し(下の画像参照)、検索ボックスに「Japanese Language」と入力します。いくつか候補が現れるので、その中から「Japanese Language Pack for Visual Studio Code」を選び、インストールをクリックします。

今回お目当ての言語パックは、製作者が「Microsoft」になっているのが目印です。MicrosoftはVS Codeの開発元でもあり、最も信頼性が高く、安全です。

日本語パックの設定

拡張機能のインストールが完了したら、VS Codeのウィンドウ上部、真ん中にある検索バーに、「> display」と入力します。

予測変換で、「Configure Display Language」と表示されるので、そちらをクリック。言語表の中から「日本語」を選択すると、VS Codeの再起動を促すポップアップが出るので、「Restart（再起動）」を選択します。

再起動後、メニューバーや設定画面の表示が日本語になっていれば成功です。もし日本語に切り替わっていない場合は、もう一度「Configure Display Language」を開き、日本語が選択されているか確認してください。

まとめ

今回は、VS Codeのダウンロード、インストール、日本語化までの基本手順を紹介しました。

無料で使え、WindowsとMacのどちらでも使えるコードエディタなので、これからWeb制作や開発を始める方にとって、初めに入れておきたい必須ツールのひとつです。

また、VS Codeには、今回紹介した日本語パックの他にも、用途に応じて様々な拡張機能が用意されています。

僕自身も、VS Code上で作成したファイルを直接サーバーへアップロードするための拡張機能など、いくつかの機能を使っています。また違う記事でも紹介するので、良ければそちらも参考にしてみてください。