こんにちは、さすを(@sasuwo0409)です。
- コードエディタを調べていたら、VSCodeを知った
- VSCodeをWindowsにインストールしたいけど、失敗したくない!
- VSCodeのインストール方法を教えて欲しい!
コードエディタのおすすめとしてよく名前が上がるのが「VSCode(Visual Studio Code)」です。
ただ、エディタのインストールでつまずき、準備の段階で挫折に繋がってしまうケースは非常に多いです。

VSCodeのインストールを失敗してほしくないです!
そこで今回の記事では、Windows版のVSCodeのインストール方法を詳しく解説していきます。
この記事を読めば「WindowsでVSCodeをインストールする方法」がわかります。
図をふんだんに使っているので、壁にぶつかることなくインストールできると思います。
それでは、本文をどうぞ。
※0円のプログラミングスクールという近道
最近はプログラミングスクールも増えており、最初の基礎を身につけるならTechAcademyの方が早い可能性があります。TechAcademyは1週間の無料体験があるので、これを使ってプログラミングの基礎を学ぶのもありだと思います。
>>TechAcademyの無料体験はこちら
【Windows版】VSCodeのインストール方法

WindowsにVSCodeをインストールする手順は、以下の通りです。
- 公式サイトにアクセスする
- VSCodeをダウンロードする
- VSCodeをインストールする
- VSCodeが開けることを確認する
どれも複雑ではないので、あっという間にインストールすることができます。

それでは初めていきましょう!
その①:公式サイトにアクセスする
まず初めに、公式サイトにアクセスしましょう。

このページから、実際にVSCodeをインストールしていきます。
その②:VSCodeをダウンロードする
公式サイトを開いたら、Windows版のVSCodeをインストールしていきます。
インストール方法は以下の2ステップです。
- 下図の赤枠の部分が「Download for Windows」になっていることを確認する。
- 赤枠の部分を押下する。

もし、赤枠の部分が「Download for Windows」でなかったら、赤枠の右にある「↓」から、「Windows x64」の「Stable」のダウンロードボタンを押下してください。
下図のように、ダウンロードされればOKです。

その③:VSCodeをインストールする
VSCodeのダウンロードが完了したら、保存したexeファイルを実行して、インストーラを起動します。
使用許諾契約書の同意画面が出たら、下部の「同意する」を選択して「次へ(N) >」をクリックします。

追加タスクの選択画面が表示されたら、必要なオプションにチェックを入れて(特にこだわりがなければそのまま)「次へ(N) >」をクリックします。

インストール準備完了画面が表示されたら、「インストール(I) 」をクリックしてインストールを開始します。

インストールが完了したら、「完了(F)」をクリックしてインストールを終了します。中央にあるチェックボックスにチェックを入れると、終了と同時にVSCodeが起動します。

その④:VSCodeが開けることを確認する
VSCodeのインストールが完了したら、スタートメニューからVSCodeを起動しましょう。
起動したら、画面左上の「File」メニューから「New File」をクリックして新規エディタを作成します。

以下の画面が表示され、キーボード入力が確認できたら起動完了です。


これで、WindowsでVSCodeを使えるようになりました!

日本語にする拡張機能は下で紹介するワン!
VSCodeのおすすめ拡張機能
VSCodeのおすすめ拡張機能は以下の7つです。
拡張機能の入れ方は最後に紹介するので、参考にしていただけたらと思います。

プログラミング言語関係なく使えるものを紹介します!
- Japanese Language Pack for Visual Studio Code
- vscodeを日本語表記にする。日本人には必須の拡張機能。
- Todo+
- コメントに「Todo:」を入れると、その位置がマーカーで強調される。何か忘れたくないことをメモするときに役立つ。
- zenkaku
- 全角スペースを白くしてくれる。全角スペースが気づきやすくなり、エラーがを減らすことができる。
- Remote – SSH
- vscodeでsshの接続先を開くことができるようになる。
- Path Intellisense
- ファイル名を自動補完してくれる。
- Material Icon Theme
- ディレクトリ、ファイルのアイコンを変更する。非常に見やすくなる。
拡張機能の入れ方(Japanese Language Pack for Visual Studio Codeの場合):
まず初めに、VSCodeを開き、赤枠の拡張機能ボタンを押下します。

そして、検索画面に、「Japanese Language Pack for Visual Studio Code」と入力し、拡張機能をインストールします。


必要な拡張機能をどんどん入れて、便利な環境を作りましょう!
なお、Git・GitHubをVSCodeで使いたい方はVSCodeでGit・GitHubを使う方法を解説する【初心者向き】の記事が参考になると思います。
最初から使うことは少ないと思いますが、使えるようにしておきたい人は参考にしてみてください。
最後に:ものづくりはここからはじまる
WindowsにVSCodeをインストールする方法を解説してきました。
これであなたも、モノを作り出す側の人になりました。
VSCodeは拡張機能が豊富なので、あなたなりにカスタマイズして、あなただけのVSCodeを作っていただけたらと思います。
一緒に好きなもの、作りたいものをどんどん作っていきましょうね!
この記事があなたの役に立っていたらうれしいです!
それでは!
あなたにおすすめの記事:
>>【徹底解説】Web制作の独学ロードマップはこれでOK【最短距離でマスターしよう】
>>【Python】機械学習の始め方【完全初心者向け】
>>【コピペOKです】機械学習で画像分類する方法【Pythonで気軽に体験できます】
コメント