Visual Studio Codeは Microsoft社が開発しているWindows、Linux、macOS用のソースコードエディタです。デバッグ、埋め込みGitコントロールとGitHub、シンタックスハイライト、インテリジェントなコード補完 、スニペット、コードリファクタリングのサポートが含まれる。
Visual Studio Codeとは、プログラミングを行う時は「エディタ」と呼ばれるソフトウェアのひとつです。
エディタとは言わば高機能なメモ帳のようなものです。
エディタには多くの種類がありますが、その中でも現在エンジニアの間で最も多く利用されていると言われているのが「Visual Studio Code（ビジュアル・スタジオ・コード）」です。
エンジニアの間では略して「VSCode（ブイエスコード）」と呼ばれています。
Visual Studio Codeは単にエディタというだけではなく、プログラミングやシステム開発に関する様々な作業を効率的に行える機能が数多く用意されています。
プログラミングを開発するソフトウェア群を「開発環境」と呼びます。
Visual Studio Codeは数多くのプログラミング言語で使用されている主要な開発環境の1つと言えます。
Visual Studio Codeはマイクロソフト社が開発しているエディタであり以下のような特徴があります。
なお、Visual Studio Codeと名前は似ていますが全く別の製品としてVisual Studioがあります。
Visual StudioはWebやWindowsアプリーケーションなどを構築する統合開発環境です。
エディタ機能に加えてシステム開発プロジェクトの管理やアプリの試験、解析などを行う機能が組み込まれています。
用途が異なりますので間違えないように注意しましょう。
Visual Studio Codeを使うメリット/デメリットについて解説していきます。
上記のようにVisual Studio Codeは非常に自由度と拡張性が高いエディタであるため、慣れてくるととても作業効率が上がることを実感できます。
現在最も多く利用されているエディタだけあり、システム開発で使用されるバージョン管理やUI設計などのソフトウェアとの連携、クラウド環境との接続などをVisual Studio Code上で行うことが出来ます。
利用者が多いため、使用方法などについて多くの情報を得られることもメリットの1つです。
逆にデメリットとして、あまりにも機能が豊富すぎるため、最初はメニュー構成や設定、拡張機能の導入などに戸惑うことも多いと思われます。
これらについてはインターネット上で多くの導入事例が提供されているため、自分の目的に合った開発環境を構築する情報を収集すると良いでしょう。
また、インターネットから切り離された環境の場合、拡張機能のインストールなどを手動で行う必要があり、やや運用が面倒に感じられるかもしれません。
ただ一度開発環境を構築してしまえば常時インターネット接続は必須ではないため、そのような環境でも十分に運用に耐えられることでしょう。
メニューなどを日本語化する拡張機能です。
Visual Studio Codeの画面左端のアイコンの Extensions(Ctrl+Shift+X)をクリックし、Extensions（拡張機能）の画面に行きます。
Extensions（拡張機能）では数多くの拡張機能が用意されていますが、今回は「Japanese Language Pack for Visual Studio Code」を導入したいので、画面上部にある検索窓に「jap」ぐらいまで打つと一番上に検索表示されます。
検索表示された「Japanese Language Pack for Visual Studio Code」をクリックすると各種の説明等が表示されますので、内容を確認の上で「Install」をクリックします。
おそらく、数秒程度でインストールが完了すると思います。インストールが完了すると英語表記を日本語表記に変更するために Visual Studio Codeの再起動を促されますのでクリックして再起動します。
Visual Studio Codeが再起動されると、メニューバー等が日本語に変更されていることが確認できると思います。
もし、再起動を促すダイログボックスが表示されなかったり、英語表記に戻したい場合などは、「Japanese Language Pack for Visual Studio Code」の使用法のところにも説明がありますが、手動で変更することができます。
「Ctrl + Shift + P」を押して「コマンドパレット」を表示します。表示されたコマンドパレットに「display」と入力すると「Configure Diplay Language」と出てきますので、マウスでクリックするかキーボードの「Enter」で選択します。
すると、「en」（english: 英語）と、「ja」（japanese: 日本語）の２つが出てきました。（その他の言語もインストール済みの場合はその数に応じて表示されていると思います）
ここで「ja」をキーボードの ↑キー or ↓キーで選択後に決定（Enter） または、マウスでクリックし、Visual Studio Codeを再起動すると日本語表記となり、「en」を選択後に再起動すると英語表記となります。
見た目を変えるテーマの拡張機能です。
現在流行しているマテリアルデザインを取り入れたテーマやアイコンを使用することができます。
Material Themeの「Details（詳細）」の「Activate theme」のところにも説明がありますが、「Ctrl + Shift + P」を押して「コマンドパレット」を表示します。表示されたコマンドパレットに「theme」と入力すると「Preferences: Color Theme」と出てきますので、マウスでクリックするかキーボードの「Enter」で選択します。
さまざまなテーマが表示されますのでキーボードの ↑キーか ↓キーで変更してみてください。Visual Studio Codeの見た目が変わると思いますので、お好みのテーマでクリック、またはキーボードの「Enter」で選択してください。
ちなみに私は、これを記述時点では標準のダークテーマ（Dark (Visual Dtudio)）を使っています。
フロントエンドの開発を行う際に欠かせないのが開発環境用のWebサーバーです。
Live ServerはVisual Studio Codeで起動できる開発用Webサーバーであり、フロントエンドの開発を協力に後押ししてくれることでしょう。