はじめに
この記事はVisual Studio Codeを使ってみたいけどインストール方法がわからない・インストールで失敗したくないという人に向けた記事になります。
PC初心者の人に向けてVisual Studio Codeの特徴やインストール方法、日本語化までを解説いたします。なるべく分かりやすい内容を心がけているので、Visual Studio Codeを使ってみたいという人はぜひ最後までお読みください。
この記事の対象者
- Visual Studio Codeのインストール方法を知りたい人
- Visual Studio Codeのインストールで失敗したくない人
- Visual Studio Codeのインストーラーの選び方がわからない人
この記事の目標
- Visual Studio Codeについて知る
- Visual Studio Codeをインストールする
- Visual Studio Codeを日本語化する
- Visual Studio Codeの拡張機能をインストールできるようになる
Visual Studio Code（VSCode）とは？
VSCodeはプログラミングに特化した高機能なテキストエディタで、コードエディタと呼ばれたりもします。
初心者から上級者まで多くのエンジニアに好まれており、以下のような特徴があります。
- インストールや拡張機能の追加が簡単で初心者でも使いやすい
- プログラミングを行う上で便利な機能が標準で搭載されている
- オープンソースで開発されているため拡張機能が豊富にあり、今後もさまざまな機能が追加されることを期待できる
- Windows、Mac、LinuxのPCでインストールできる
また、推奨スペックがクロック周波数1.6GHのCPU、1GB以上のRAMとシステム要件も高くないので、極端に古いPCでなければ問題なく動作するでしょう。
VSCodeのインストール方法
VSCodeのサイトではお使いのPCのOSを自動で判別してくれる便利なダウンロードボタンがありますが、PCやブラウザなどの環境によっては正しいものがインストールされない可能性があるので今回は違う方法をご紹介します。
以下の手順でVSCodeのインストールを行います。
- システムの確認
- インストーラーのダウンロード
- VSCodeのインストール
それでは始めましょう。
システムの確認
VSCodeのインストーラーはシステム毎に違うものを選ばないといけないので、初めにお使いのPCのシステムの確認を行います。
設定 ＞ システム ＞ バージョン情報と進んでいただくとシステムの種類を確認できます。OSの種類やバージョンによってはバージョン情報ではなく詳細情報などになっている場合があります。
上の画像はWindows11、バージョン：22H2のものです。x64ベースのシステムであることが確認できました。
おそらく2023年現在で使用されているほとんどのPCは64ビットの構成になっていると思いますが、違う場合は32ビットやx86ベースプロセッサなどと表示されています。
また、スマホやタブレットで使用されているようなバッテリー持ちの良いCPUが搭載されている場合はARMx64などの記載がある可能性があります。こちらも見落とさないようにしましょう。
インストーラーのダウンロード
システムの確認ができたのでVSCodeのインストーラーをダウンロードします。以下のページにアクセスしてください。
VSCodeのインストーラーにはUser InstallerとSystem Installerがあります。
System Installerでインストールを行うと、PCを使用するすべてのアカウントでVSCodeを使用することができます。ただし、管理者権限のあるアカウントでなければSystem Installerでインストールを行うことはできません。
User Installerでインストールを行うと、ログイン中のアカウントでのみVSCodeを使用することができます。管理者権限も必要なく、一つのPCを異なるアカウントで使用している場合でも他の使用者に影響を与えないので、特別な理由がなければこちらをオススメします。
ボタンをクリックするとダウンロードが始まります。システムの種類に対応したインストーラーをダウンロードしてください。
VSCodeのインストール
ダウンロードが完了したらVSCodeUserSetup-x64-〇.○○.〇.exe（〇はVSCodeのバージョン）というファイルがダウンロード先のフォルダで確認できます。ダブルクリックをして実行してください。
実行すると使用許諾契約書の同意を求められます。同意できない場合は次に進めることができないので、よく読んでから問題がなければ「同意する」にチェックして「次へ」をクリックします。
次にインストール先のフォルダを選択します。初期値で問題ないかと思いますが、都合が悪い場合は「参照」をクリックして違う場所を選択できます。「次へ」をクリックしたら先に進みます。
「スタートメニューフォルダーの設定」では、Windowsのスタートメニューにショートカットを作成するか選択できます。必要がなければ「スタートメニューフォルダを作成しない」にチェックを入れます。お好みで選択してください。
続いて追加タスクの選択を求められます。
「デスクトップ上にアイコンを作成する」にチェックを入れると、デスクトップにVSCodeのショートカットが作成されます。デスクトップに不要なものを置きたくないという人はチェックをせず、インストール後にタスクバー等に追加するとよいでしょう。
「エクスプローラーのファイルコンテキストメニューに【Codeで開く】アクションを追加する」にチェックを入れると、エクスプローラー上でファイルを右クリックしたときのメニューに「Codeで開く」という項目が追加されます。チェックすることをオススメします。
「エクスプローラーのディレクトリコンテキストメニューに【Codeで開く】アクションを追加する」にチェックを入れると、エクスプローラー上でフォルダを右クリックしたときのメニューに「Codeで開く」という項目が追加されます。チェックすることをオススメします。
「サポートされているファイルの種類のエディターとしてCodeを登録する」にチェックを入れると、Windowsの設定の「ファイルの種類ごとに既定のアプリを選ぶ」に「Visual Studio Code」が追加されます。欠点として、エクスプローラー上でファイルをダブルクリックしたときに予期せずVSCodeで開いてしまうことがあるのでこの記事ではオススメしません。ファイルの種類ごとに厳密にアプリを管理したい場合はチェックしても良いかと思います。
「PATHへの追加（再起動後に使用可能）」にチェックを入れると、コマンドプロンプトやPower ShellといったコマンドラインからVSCodeを実行することができるようになります。コマンドラインはプログラミングを学ぶ上で必要不可欠なのでチェックすることをオススメします。
追加タスクの選択が終わったら「次へ」をクリックします。
「インストール準備完了」という画面が表示され、設定内容を見直すことができます。「インストール」をクリックするとインストールが開始され、「Visual Studio Codeセットアップウィザードの完了」という画面が表示されます。このまま「完了」をクリックすればVSCodeが起動します。
VSCodeの日本語化
VSCodeはインストール直後では英語表記になっています。「Japanese Language Pack for Visual Studio Code」という拡張機能を追加することで簡単に日本語表示にすることができるので、こちらも続けて行いましょう。英語でOKという人はこの作業は省略して構いません。
以下はVSCodeを起動した直後の画面です。Welcomeページのみが表示されています。
左側の足りないテトリスみたいな四角形のアイコンをクリックすると拡張機能のメニューが表示されます。
メニューの右端をドラッグするとパネルの幅を変更することができるので、パネルの幅が狭くて見づらい場合は調整すると良いでしょう。
メニューの一番上に検索バーがあります。こちらに「japan」と入力してください。
検索結果にはいろんな拡張機能が表示されますが、結果の上部に「Japanese Language Pack for Visual Studio Code」の項目があります。拡張機能の説明を読みたい場合は「Install」ボタン以外の領域をクリックすると表示されます。「Install」ボタンをクリックするとインストールが開始され、拡張機能がVSCode上にインストールされます。
あとはVSCodeを再起動したら日本語化が反映されます。画面右下の「Restart Now」ボタンをクリックしてください。
以上で終わりです。「Japanese Language Pack for Visual Studio Code」を使用してVSCodeの日本語化を行いました。
最後に
PC初心者の人に向けてVisual Studio Codeの特徴についてと、インストールから日本語化までの方法を解説いたしました。
日本語化にするために「Japanese Language Pack for Visual Studio Code」というプラグインをインストールしましたが、Visual Studio Codeには他にも便利な拡張機能がたくさんあります。ネットで検索したらたくさんの情報が見つかるので、欲しい機能などがあれば調べてみると良いでしょう。