VSCodeのインストール方法について解説する【初心者向き】

みやしも ローカル開発環境

今回は人気のテキストエディタ『Visual Studio Code』のインストール方法と、日本語化の手順について解説してゆきます。



▼この記事を書いたひと

フリーランスのみやしも(@miyashimo_eng)です。プログラミングやWEB制作に関するIT情報を、幅広くお届けしてゆきます。

Visual Studio Codeとは

VisualStudioCode公式サイト
Microsoft『Visual Studio Code』公式サイト

『Visual Studio Code(ビジュアル・スタジオ・コード)』とは、文字を入力するために使用するテキストエディタと呼ばれる種類のソフトで、Microsoftが開発・提供をしています。

略して『VSCode(ブイエスコード)』とも呼ばれています。

プログラミングにおいて、主にはプログラムのコードを書くために使用され、軽量かつ高機能なことから多くのエンジニアが愛用しています。



また、書籍やスクールなどの学習教材でも採用されていることもあり、初心者向きのテキストエディタとして広く浸透しつつあります。

プログラミング初心者の方はテキストエディタに『Visual Studio Code』を利用すると学習がしやすくなります。

VS Codeの特徴

Visual Studio Codeには次のような特徴があります。



▼VS Codeの特徴

  • オープンソースなので誰でも無料で利用ができる
  • Windows・Mac・Linuxなどの幅広いOSで利用ができる
  • 色付きでコードが見やすくなるハイライト機能がある
  • コードの自動補完機能があり、効率的なプログラミングができる
  • 『拡張機能』という仕組みで機能を自由にカスタマイズできる



VSCodeにはハイライトやコードの自動補完などのプログラミング作業に必要な機能が標準搭載されているほか、『拡張機能』によって機能を自由にカスタマイズできる点が大きな特徴として挙がります。

例えばサーバーと接続して作業をする。GitHubと連携して複数人の作業環境に適用させる。といった、複合的な使用方法が可能になります。

VS Codeのメリット・デメリット

Visual Studio Codeを使うメリット・デメリットには以下の様な物があります。



▼VS Codeのメリット

  • 軽量かつ高機能、標準で多くの言語をサポートしている
  • 拡張性が高く多くのプログラム開発に利用ができる
  • 利用者が多く、使用方法などについて多くの情報が得られる



▼VS Codeのデメリット

  • 作業目的にあわせたカスタマイズの難易度が高め



VSCodeはカスタマイズ性の高さが効率的なプログラミングの実現において大きなメリットとなる反面、その拡張性の高さから、カスタマイズは比較的難しくなります。



とはいえネットには情報も豊富にあり、検索して情報収集をすることで目的に合わせて使用していくことも十分に可能となります。

高機能なので標準でも十分に利用ができる。プログラミング初心者でも学習を進めていく過程でカスタマイズしてゆく事ができる。

VSCodeをインストールする方法

それでは『VisualStudioCode』のインストール方法について解説を行います。



▼インストール手順

  1. インストーラーをダウンロードする
  2. Visual Studio Codeをインストールする

インストーラーをダウンロードする

VisualStudioCodeダウンロード
VS Codeのダウンロードページ

まずはMicrosoft公式サイトからVisual Studio Codeのインストーラーをダウンロードしてゆきます。



▼Microsoft公式サイト

Visual Studio Code※クリックで別ウィンドウで表示します



ダウンロードのページにはWindows・Linux・Macといった、それぞれOS別のインストーラーが用意されていますので、自分のPCにあったものを選択しましょう。



ボタンを押すとインストーラーのダウンロードが開始されます。

今回は『Windows7,8,10』と書かれたボタンを押してダウンロードできるインストーラーを使った方法で解説してゆきます。

VSCodeをインストールする

PC上にダウンロードしたインストーラーを実行して、インストール作業を行います。

VisualStudioCodeインストーラー
他のWindowsのソフトと同様に、かんたんな操作で完了できます。

規約に同意する

まずはインストールするための規約に同意します。ここでは『同意する』にチェックを入れた状態で、『次へ』をクリックしましょう。

VisualStudioCode_インストール作業①
『次へ』をクリックして進みましょう

インストール先の指定

続けてインストール先の指定を行います。特別に必要がなければ、ここは初期値のままで問題ありません。

VisualStudioCode_インストール作業②
『次へ』をクリックして進みましょう

スタートメニューフォルダーの指定

Windowsのスタートメニューにショートカットを作成するかの選択ができますが、ここも初期値のままで問題ありません。

VisualStudioCode_インストール作業③
『次へ』をクリックして進みましょう

追加タスクの選択

ここでは、デスクトップ上にアイコンを作成するか、などの選択が出来ます。

VisualStudioCode_インストール作業④
チェックを入れて『次へ』をクリックします
今後『VisualStudioCode』を起動しやすくするためにも、次の内容にチェックを入れておくのがおススメです。

▼おススメのチェック項目

  • デスクトップ上にアイコンを作成する
  • エクスプローラーのファイルコンテキストメニューに[Code で開く]アクションを追加する
  • エクスプローラーのディレクトリコンテキストメニューに[Code で開く]アクションを追加する

インストール準備完了

以上でVisualStudioCodeのセットアップは完了です。問題が無ければインストールを開始しましょう。

VisualStudioCode_インストール作業⑤
『インストール』をクリックしましょう

インストール状況の表示

VisualStudioCodeのインストールには数秒ほどかかりますので、しばらく待ちます。

VisualStudioCode_インストール作業⑥
数秒ほどでインストールが完了します

インストールの完了

インストールが終わると次の画面が表示されますので、最後に『完了』をクリックします。

VisualStudioCode_インストール作業⑦
完了をクリックするとインストーラーが閉じるのと同時にVisualStudioCodeが起動します。
VisualStudioCode_インストール作業⑧
最後にVisual Studio Codeが開きます

以上でインストール作業は完了です。

VisualStudioCodeはインストール時点では英語表示となります。日本語で表示させるためには、別途『日本語化』の作業が必要です。
続けて日本語化の作業もすすめてゆきましょう!

VSCodeを日本語化する方法

日本語化を行うには、Visual Studio Codeに含まれる『拡張機能』のしくみを利用して作業を行います。



▼日本語化の作業の流れ

  1. 拡張機能のメニューを開く
  2. 日本語化の拡張機能を検索する
  3. 日本語化の拡張機能をインストールする
  4. Visual Studio Codeを再起動する


また今回は、次の拡張機能を利用します。

▼今回使用する拡張機能
『Japanese Language Pack for Visual Studio Code』

拡張機能のメニューを開く

日本語化を行うために、まずは左側のアイコンをクリックして拡張機能のメニューを開きます。

VisualStudioCodeの日本語化①
拡張機能のメニューを開く方法
この際にドラッグしてパネルを右に広げると表示されるメニューが見やすくなります。

日本語化の拡張機能を検索する

続けて上部の検索フォームで『Japanese』と入力して拡張機能を検索します。



するとリストの上部に目的の拡張機能が表示されると思いますので、そのまま選択します。

VisualStudioCodeの日本語化②
日本語化の拡張機能を検索する方法

日本語化の拡張機能をインストールする

拡張機能を選択したら『Install』のボタンを押して拡張機能をインストールをします。

VisualStudioCodeの日本語化③
拡張機能をインストールする方法

Visual Studio Codeを再起動する

インストールが完了したら、最後に画面の右下に表示される『Restart Now』のボタンを押してVisual Studio Codeを再起動しましょう。

VisualStudioCodeの日本語化④
Visual Studio Codeを再起動する方法
ここまで作業が完了すると、最後に日本語化されたVisual Studio Codeが起動します。
VisualStudioCodeの日本語化⑤
日本語されたVisual Studio Code

以上で日本語化の作業は終わりです。

ここまでの作業、お疲れ様でした!

この記事のまとめ

今回は、人気のテキストエディタ『Visual Studio Code(VS Code)』のインストール方法と、日本語化の手順について詳しく解説を行いました。



VSCodeは軽量かつ高機能なことから多くのエンジニアも愛用しており、また書籍やスクールなどの学習教材でも広く採用されていることから、初心者にもおススメができるテキストエディタです。

筆者も日頃から愛用しています。ぜひ使ってみて下さいね!

プログラミング初心者の方には次の記事もおすすめです。

ローカル開発環境を導入する方法

XAMPPと呼ばれるソフトを使用してPCにローカル開発環境を導入する方法について解説しています。

PHPのプログラミング環境を導入する

XAMPPを含めたPHPのプログラミング環境をまとめて導入したいといった方には、次の記事が参考になります。

『eclipse』+『XAMPP』の組み合わせによる本格的なPHPのプログラミング環境を構築することが出来るため、これからPHPの学習を始めようと考えている方におススメな内容です。

FTPサーバーに接続する方法

サーバーにファイルをアップロードするために必要な『FTPソフト』の使用方法について解説をしています。

作成したHTML&CSSやプログラムをアップロードしたい、WEBサイトを作ってみたい。といった方におススメな内容です。

関連記事

最新記事