これからWEB開発・WEB制作を始める人に是非行ってほしいのが、Visual Studio Codeのインストールです。
「正直コーディングはメモ帳でもできるし……」
そんな風に思っている人もいるかもしれません。
たしかに、メモ帳はWindowsに標準で入っていてすぐ使えます。
しかし、ちょっと頑張ってVisual Studio Codeをインストールすると、次のようなメリットがあります。
- コーディングする言語に合わせて見やすく表示できる
- 拡張機能を入れて、より効率的に開発が行える
- 複数ソフトの機能を一箇所でまとめて操作できる
この記事では、Visual Studio Codeのインストール方法をスクリーンショットを交えながらひとつずつ説明しています。
是非、記事を読みながら一緒にインストールしてみてください。
Visual Studio Codeとは
Visual Studio Codeはマイクロソフトが開発しているコードエディターです。
拡張機能でほしい機能を追加したり、テーマでアイコンや配色を好きなように設定することができます。
なぜVisual Studio Codeをおすすめするか
人気なので、情報が手に入りやすい
2021年時点で、プログラミングをする人の約71%が開発環境にVisual Studio Codeを使用しています。
参考：Stack Overflow Developer Survey 2021
人気があるので、いろんな人がVisual Studio Codeの使い方について共有してくれています。
つまり、情報が手に入りやすいということ。
初心者にとっては嬉しいポイントですね。
対応しているプログラミング言語が多い
Visual Studio Codeはほぼすべてのプログラミング言語に対応しています。
後から「この言語についても勉強してみたい！」となったときに環境を変えずに開発ができるのがおすすめポイントです。
もし元々対応していない場合でも、拡張機能を入れることで対応できます。
Gitを気軽に使える
WEB開発を勧めていく上で、身につけたいスキルがGitを使いこなせるようになること。
チームで変更を管理しながら開発を進めていけるGitは、採用している企業も多いソフトウェアです。
Gitを使うには、通常だとコマンドを実行する必要があります。
でも、Visual Studio Codeだと画面上からボタンをクリックするだけで実行できます。
Gitの仕組みを学ぶのにもVisual Studio Codeは向いているのです。
※Visual Studio Code上でGitを使うには、事前にGitのインストールが必要です。
Gitのインストール方法は次の記事を確認してください。
Visual Studio Codeのインストール手順
Visual Studio Codeのダウンロードサイトにアクセスします。
次のリンクをクリックしてください。
Visual Studio Code – コード エディター | Microsoft Azure
「今すぐダウンロード」をクリックします。
自身のPC環境に合わせたインストーラーをダウンロードしてください。
今回は、「Windows(Windows 8,10,11)」をクリックします。
インストーラーがダウンロードできたら、クリックして立ち上げてください。
ライセンスを確認して、問題がなければ、「同意する」にチェックを入れて「次へ」をクリックします。
Visual Studio Codeのインストール先を指定します。
特にこだわりがなければデフォルトのままでOKです。
指定できたら、「次へ」をクリックします。
スタートメニューで表示される名前の指定です。
デフォルトだと、「Visual Studio Code」という名前でスタートメニューが作成されます。
こちらも特にこだわりがなければデフォルトのままでOK。
指定できたら、「次へ」をクリックします。
インストール時のオプションの指定です。
すべてチェックを付けてしまって問題ありません。
それぞれのオプションの意味は次のとおりです。
| オプション | 意味 |
|---|---|
| デスクトップ上にアイコンを作成する | デスクトップ上にVisual Studio Codeのショートカットアイコンを作成します |
| エクスプローラーのファイルコンテキストメニューに[Codeで開く]アクションを追加する | ファイルを右クリックしたときに、Visual Studio Codeですぐに開けるようになります。 |
| エクスプローラーのディレクトリコンテキストメニューに[Codeで開く]アクションを追加する | フォルダーを右クリックしたときに、Visual Studio Codeですぐに開けるようになります。 |
| サポートされているファイルの種類のエディターとしてCodeを登録する | ファイルを「プログラムから開く」オプションで開く際に、Visual Studio Codeが表示されます |
| PATHへの追加 | 環境変数のPATHに追加します。すぐに使うオプションではありませんが、必要になったときに設定するのが大変なので、チェックを付けておくことをおすすめします。 |
インストール内容の確認画面が表示されます。
内容を再確認して、問題がなければ「インストール」をクリックします。
問題があった場合は、「戻る」を押して、修正しましょう。
インストールが開始されると進捗バーが表示されます。
完了するまで待ちます。
完了画面が表示されました。
「Visual Studio Codeを実行する」にチェックを入れて、Visual Studio Codeを起動します。
最初は英語の表示になっています。
初回起動時に、「表示言語を日本語に変更するには～」のポップアップが表示されます。
「インストールして再起動」をクリックします。
日本語化がされました。
もし、ポップアップのクリックを逃してしまった場合は、拡張機能を手動でインストールすることも可能です。
Visual Studio Codeがインストールできている状態で、下記のリンクにアクセスしてください。
Japanese Language Pack for Visual Studio Code – Visual Studio Marketplace
「Install」をクリックすると、日本語化の拡張機能がVisual Studio Codeに追加されます。
インストール手順は以上です。
Visual Studio Codeを使って、たくさんコードを書いていきましょう！