プログラミング

【Windows版】VSCodeのインストール方法【図解あり】

【Windows版】VSCodeのインストール方法【図解あり】

こんにちは、さすを(@sasuwo0409)です。

  • コードエディタを調べていたら、VSCodeを知った
  • VSCodeをWindowsにインストールしたいけど、失敗したくない!
  • VSCodeのインストール方法を教えて欲しい!

コードエディタのおすすめとしてよく名前が上がるのが「VSCode(Visual Studio Code)」です。

ただ、エディタのインストールでつまずき、準備の段階で挫折に繋がってしまうケースは非常に多いです。

さすを
さすを

VSCodeのインストールを失敗してほしくないです!

そこで今回の記事では、Windows版のVSCodeのインストール方法を詳しく解説していきます。

この記事を読めば「WindowsでVSCodeをインストールする方法」がわかります。

図をふんだんに使っているので、壁にぶつかることなくインストールできると思います。

それでは、本文をどうぞ。

この記事のおすすめ対象読者:

  • VSCodeのインストール方法を知りたい方
  • VSCodeのおすすめの拡張機能

筆者の情報:

  • 現役システムエンジニア
  • 業務でVSCodeを使用している
  • Pythonの6,000万案件に携わった
  • フリーランスWeb制作チームに所属

この記事を読むとわかること:

  • VSCodeのインストール方法
  • VSCodeのおすすめの拡張機能

※0円のプログラミングスクールという近道
最近はプログラミングスクールも増えており、最初の基礎を身につけるならTechAcademyの方が早い可能性があります。TechAcademyは1週間の無料体験があるので、これを使ってプログラミングの基礎を学ぶのもありだと思います。
>>TechAcademyの無料体験はこちら

スポンサーリンク

【Windows版】VSCodeのインストール方法

【Windows版】VSCodeのインストール方法

WindowsにVSCodeをインストールする手順は、以下の通りです。

  1. 公式サイトにアクセスする
  2. VSCodeをダウンロードする
  3. VSCodeをインストールする
  4. VSCodeが開けることを確認する

どれも複雑ではないので、あっという間にインストールすることができます。

さすを
さすを

それでは初めていきましょう!

その①:公式サイトにアクセスする

まず初めに、公式サイトにアクセスしましょう。

>>VSCode公式サイト

図1:VSCode公式サイト
図1:VSCode公式サイト

このページから、実際にVSCodeをインストールしていきます。

その②:VSCodeをダウンロードする

公式サイトを開いたら、Windows版のVSCodeをインストールしていきます。

インストール方法は以下の2ステップです。

  1. 下図の赤枠の部分が「Download for Windows」になっていることを確認する。
  2. 赤枠の部分を押下する。
図2:VSCodeダウンロード画面①
図2:VSCodeダウンロード画面①

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

下図のように、ダウンロードされればOKです。

図3:VSCodeダウンロード画面②
図3:VSCodeダウンロード画面②

その③:VSCodeをインストールする

VSCodeのダウンロードが完了したら、保存したexeファイルを実行して、インストーラを起動します。

使用許諾契約書の同意画面が出たら、下部の「同意する」を選択して「次へ(N) >」をクリックします。

図4:VSCodeインストール画面①
図4:VSCodeインストール画面①

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

図5:VSCodeインストール画面②
図5:VSCodeインストール画面②

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

図6:VSCodeインストール画面③
図6:VSCodeインストール画面③

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

図7:VSCodeインストール画面④
図7:VSCodeインストール画面④

その④:VSCodeが開けることを確認する

VSCodeのインストールが完了したら、スタートメニューからVSCodeを起動しましょう。

起動したら、画面左上の「File」メニューから「New File」をクリックして新規エディタを作成します。

図8:VSCode起動後①
図8:VSCode起動後①

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

図9:VSCode起動後②
図9:VSCode起動後②
さすを
さすを

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

イッヌ
イッヌ

日本語にする拡張機能は下で紹介するワン!

VSCodeのおすすめ拡張機能

VSCodeのおすすめ拡張機能は以下の7つです。

拡張機能の入れ方は最後に紹介するので、参考にしていただけたらと思います。

さすを
さすを

プログラミング言語関係なく使えるものを紹介します!

Japanese Language Pack for Visual Studio Code
vscodeを日本語表記にする。日本人には必須の拡張機能。
codic
vscode上で日本語から英語の翻訳ができるようになる。スネークケースキャメルケースなどで出力できるので便利。
Todo+
コメントに「Todo:」を入れると、その位置がマーカーで強調される。何か忘れたくないことをメモするときに役立つ。
zenkaku
全角スペースを白くしてくれる。全角スペースが気づきやすくなり、エラーがを減らすことができる。
Remote – SSH
vscodeでsshの接続先を開くことができるようになる。
Path Intellisense
ファイル名を自動補完してくれる。
Material Icon Theme
ディレクトリ、ファイルのアイコンを変更する。非常に見やすくなる。

拡張機能の入れ方(Japanese Language Pack for Visual Studio Codeの場合):

まず初めに、VSCodeを開き、赤枠の拡張機能ボタンを押下します。

図10:日本語拡張機能の追加①
図10:日本語拡張機能の追加①

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

図11:日本語拡張機能の追加②
図11:日本語拡張機能の追加②
さすを
さすを

必要な拡張機能をどんどん入れて、便利な環境を作りましょう!

なお、Git・GitHubをVSCodeで使いたい方はVSCodeでGit・GitHubを使う方法を解説する【初心者向き】の記事が参考になると思います。

最初から使うことは少ないと思いますが、使えるようにしておきたい人は参考にしてみてください。

最後に:ものづくりはここからはじまる

WindowsにVSCodeをインストールする方法を解説してきました。

これであなたも、モノを作り出す側の人になりました。

VSCodeは拡張機能が豊富なので、あなたなりにカスタマイズして、あなただけのVSCodeを作っていただけたらと思います。

一緒に好きなもの、作りたいものをどんどん作っていきましょうね!

この記事があなたの役に立っていたらうれしいです!

それでは!


コメント

タイトルとURLをコピーしました