【ゼロから簡単！】Visual Studio Codeインストールと使い方［Windows向け］

はじめまして！こんにちは！　IMG-FLOWでコーダーをしているmuu（むぅ）です。

今回、「Visual Studio Code（VScode）」のダウンロードとインストール方法についてご紹介します。

実は以前まで私は別のテキストエディタを使用していたのですが、そのテキストエディタがサポート終了になってしまったので、今回新たに「VScode」を使用することに決めました。

画像付きでダウンロード方＆インストール方法をご紹介していますので、ぜひ参考にしてくださいね！

Visual Studio Codeとは？

Visual Studio Code（以下"VSCode"とする）は、Microsoftが開発した無料のテキストエディタです。

OSはWindows、Linux、macOSに対応しています。

Vscodeはカスタマイズ性が高いことで評判で、2019年の調査ではシェア率No1となるほど、多くのWebデザイナーやプログラマが利用しているテキストエディタです。

Visual Studio Codeのインストール手順

2-1.Visual Studio Codeのサイトにアクセス

↓まずは以下URLからVSCodeのダウンロードページにアクセスします。

https://azure.microsoft.com/ja-jp/products/visual-studio-code/

アクセスすると上記のページが出てくるのでページ左上にある「今すぐダウンロード」をクリックして、ダウンロードページに進みます。

2-2.Visual Studio Codeのダウンロード

上記画像のダウンロードページが出てきたら、使用OSに合わせてダウンロードします。

今回はWindowsにダウンロードするので、ページ中央に３つ並んでいるアイコンのうち、左側の「Windows」ロゴの下にあるダウンロードボタンをクリックします。（ダウンロードが開始されます。）

2-3. Visual Studio Codeのインストール

ダウンロードしたインストーラをダブルクリックして、起動します。

（ダウンロードしたファイルはエクスプローラーを起動して、左側のバーの中の「PC」の下にある「ダウンロード」で確認できます。）

「使用許諾契約書の同意」の画面が出てくるので、「同意する(A)」を選んで、「次へ(N)＞」をクリックします。

「インストール先の指定」の画面が出てくるので、「参照(R)」からフォルダの場所を指定できますが、特にこだわりなければ、変更せずそのまま「次へ(N)」をクリック。

「スタートメニューフォルダーの指定」画面も、基本的には変更せずにそのまま「次へ(N)」をクリックします。

「追加タスクの選択」画面が表示されたら、必要なオプションにチェックを入れて「次へ(N)」をクリック。

基本的には全てチェックを入れておけば大丈夫です！

「インストール準備完了」画面が出てきたら、いよいよパソコンにインストールします。

「インストール(I)」をクリックしてインストールを開始します。

インストールされるので、しばらくそのまま待ちます。

インストール完了が完了すると、上のような画面が表示されます。

「Visual Studio Codeを実行する」にチェックを入れた状態で「完了(F)」をクリックすると、VSCodeが立ち上がります。

2-4. Visual Studio Codeの起動

VSCodeを起動してみましょう。

「Visual Studio Codeを実行する」にチェックを入れて「完了(F)」していれば、以下VSCodeの画面が勝手に立ち上がるはずです。

※立ち上がらない方は、以下Windowsの検索窓で「Visual Studio Code」を検索していアプリを起動しましょう！

Visual Studio Codeを日本語化する方法

やっとのことで、VSCodeを立ち上げたものの、「全部英語やん！」と驚いた人も多いかもしれません。初めてテキストエディタを使う人や英語が苦手な人は、戸惑う人も多いと思うので、日本語設定をする方法を説明しておきますね！

まず、画面一番左側のメニューから、「拡張機能」を追加するボタンがありますのでクリックします。

（※「拡張機能」は、VSCodeに追加できる便利な機能のことで、追加することで、自分が使いやすいテキストエディタへとカスタマイズすることができます。）

「拡張機能」ボタンをクリックすると、検索窓が出てきますので「Japanese」と検索してみましょう！

検索すると下に一覧が出てきます。

「Japanease Language Pack for Visual Studio Code」という拡張機能が出てくるのでクリックします。

すると上記画像のような画面が表示されるので、「Install」ボタンを押して、インストールします。

インストールすると、画面右下に、「Would you like to change VS Code's UI language to Japanese and restart?」というポップアップが表示されます。

「Change Language and Restart」ボタンを押すと、VSCodeが再起動して、日本語表示に変更されます。

以上で、VSCodeのインストールと日本語表示の設定が完了しました！

【まとめ】

今回は日本語表示にするために、１つだけ拡張機能を入れてみました。

ただ実際にコーディング作業を進める場合には、他にも入れておきたい便利な拡張機能が数多くあります。また、私の記事でもおすすめの拡張機能についてご紹介できればと思いますが、ぜひ色々なサイトでVSCodeの拡張機能について調べて、自分好みにカスタマイズしてみてくださいね！

最後までお読みいただき、ありがとうございました！

また弊社では、一緒にWEB業界を盛り上げてくれるメンバーを募集中です！
デザインやWEB制作に興味がある方は、ぜひエントリーページからご応募ください。