logologo
Visual Studio Codeのインストール!日本語化の手順を図解
thumb_visualstudiocode_01

Visual Studio Codeのインストール!日本語化の手順を図解

アンドエンジニア編集部
2024.10.28
この記事でわかること
Visual Studio Codeは、WindowsやLinux、macOSにインストールすることができます
インストールが完了したら、拡張機能を使ってVisual Studio Codeを日本語化することが可能です
その後、必要なプログラミング言語パックを導入し、プログラミングに活用することができます

Visual Studio Codeのインストールと日本語化

img_visualstudiocode_01

Visual Studio Codeは、多くのユーザが使用するソースコードエディタです。マルチプラットフォームで動作するため、気軽にプログラミングを始めることができます。

ここでは、Visual Studio Codeのセットアップやインストール方法、そしてユーザインターフェースの日本語表示の仕方について学んでいきます。

【参考】:Microsoft Visual Studio Code

Visual Studio Codeの概要

Visual Studio Codeは「VS Code」とも呼ばれ、多くのコード開発者が使用しています。無料版で商用利用することが可能で、WindowsやLinux、macOSで動作し、ウェブ版も提供されています。カスタマイズ機能に優れており、拡張機能を選択して導入することができます。

プログラミング言語は標準でJavaScriptやTypeScript、CSSやHTML、Node.jsなどに対応します。さらに拡張機能を用いると、PythonやJava、C言語・C++やC#など、およそ100以上の言語に対応しています。

拡張機能ではIDE(統合開発環境)の役割も提供されるため、エディタのレベルを超えたソフトウェア開発環境と言えるでしょう。

【参考】:Microsoft Azure: Visual Studio Code 【参考】:Visual Studio Code

VSCodeとは?定番のコードエディタを他のエディタと比較して解説
IDEとは?詳細やメリット、おすすめのIDEを紹介します!

Visual Studio Codeの動作環境

Visual Studio Codeの動作環境は、軽量のテキストコードエディタのため厳しい制限がありません。1GBのメモリ、1.6GHz以上のCPUが推奨されており、ダウンロードサイズは200MB未満です。

動作OSは、Windows10および11です。macOSは最新版と前の2世代がサポート対象です。Linuxは、Debian系がUbuntu Desktop 20.04、およびDebian 10、そしてRed Hat系がRed Hat Enterprise Linux 8、およびFedora 36でサポートされます。

【参考】:Requirements for Visual Studio Code

Visual Studio Codeのダウンロード

Visual Studio Codeのダウンロードは、マイクロソフトのサイト、あるいはVisual Studio Codeのサイトから行います。マイクロソフトのサイトは、次のようにAzureのVisual Studio Codeのリンクをクリックします(①)。

img_visualstudiocode_02
 【図】:Visual Studio Codeをダウンロードする

Visual Studio Codeのサイトからも同様に「Download」リンクをクリックすることができます。その後、ウェブページがVisual Studio Codeのダウンロードサイトに遷移します。ここでは、ダウンロードするモジュールを選択することができます。

ここでは、次のようにWindows版セットアップモジュールをダウンロードします(①)。

img_visualstudiocode_03
 【図】:ダウンロードするモジュールを選択する

ダウンロードするモジュールをクリックすると、ローカルフォルダにモジュールがダウンロードされます。この例では、Windows版のため、ダウンロードされたファイルは「ダウンロード」フォルダに格納されます(①②)。

img_visualstudiocode_04
 【図】:Windows版モジュールをダウンロードする

【参考】:Microsoft Visual Studio Code 【参考】:Visual Studio Code 【参考】:Download Visual Studio Code

Visual Studio Codeのインストール

ダウンロード済みのセットアップモジュールやインストーラーは、Windowsではダブルクリックで起動できます。ここでは、ダウンロードした2024年8月版の「VSCodeUserSetup-x64-1.93.0.exe」をダブルクリックすると、セットアップウィザードが起動します。

ライセンス表示に「同意する」から「次へ」と進むと(①②)、追加タスクの選択が可能です。項目を確認して「次へ」をクリックします(③)。

img_visualstudiocode_05
 【図】:セットアップウィザードのライセンス表示と追加タスクの選択

その後、インストールの確認画面が表示されますので「インストール」をクリックし(④)、終了後に「完了」をクリックします(⑤)。

img_visualstudiocode_06
 【図】:インストールの実行と完了

完了時には、デフォルト設定で「Visual Studio Codeを実行する」がチェックされますので、「完了」をクリックするとVisual Studio Codeが起動します。

img_visualstudiocode_07
 【図】:インストール直後のVisual Studio Codeの起動画面

この例ではWindows版を使用しましたが、LinuxやmacOSに導入する場合は、以下のリンク先のセットアップ手順を合わせて確認しましょう。

【参考】:Visual Studio Code on Windows 【参考】:Visual Studio Code on Linux 【参考】:Visual Studio Code on macOS

VSCodeをインストールする方法とは?設定方法まで丁寧に解説

Visual Studio Codeを日本語化する

img_visualstudiocode_08

インストール直後のVisual Studio Codeはそのまま利用できますが、デフォルトは英語表示です。Visual Studio Codeを日本語化するには、拡張機能を用いて言語パックを導入します。

ここでは、もっともポピュラーな日本語化パックである「Japanese Language Pack for Visual Studio Code」を用いて、日本語化を進めていきます。

【参考】:Visual Studio Marketplace: Japanese Language Pack for Visual Studio Code

Visual Studio Codeの日本語化パックを使用する

Visual Studio Codeの日本語化パックを使用するには、拡張機能をマーケットプレイスからインストールします。使い方は、マーケットプレイスで拡張機能を選択し、インストールボタンを押すだけなので簡単です。

マーケットプレイスは、Visual Studio Codeの左ペインに表示されている下側のアイコンをクリックします(①)。そして中央ペインに、「EXTENSIONS MARKETPLACE」の表記の下に検索欄が表示されます。

そこで、「Japanese Language Pack」と入力します(②)。入力する文字は大文字でも小文字でも構いません。キー入力の最中に該当する拡張機能が、入力欄の下側に表示されます。

img_visualstudiocode_09
 【図】:マーケットプレイスでJapanese Language Packを検索する

候補となる項目は非常に多いですが、最初に表示される「Japanese Language Pack」は「Microsoft」製であることが確認できます。そこで、ここで表示される「Japanese Language Pack」を選択すると(①)、右ペインに詳細が表示されます(②)。

img_visualstudiocode_10
 【図】:Japanese Language Packを選択し表示する

右ペインを拡大したものが、次の図です。ここで表示される「Install」をクリックすると(①)、拡張機能がインストールされ、表記が「Uninstall」に更新されます(②)。

img_visualstudiocode_11
 【図】:Japanese Language Packをインストールする

【参考】:Visual Studio Marketplace: Japanese Language Pack for Visual Studio Code

Visual Studio Codeの表示を日本語化する

Visual Studio Codeの表示を日本語化するには、Visual Studio Codeを再起動します。Japanese Language Packをインストールすると、下部に次のように再起動を促す表示がされます。

ここで、「Change Language and Restart」をクリックすると、設定が登録されてVisual Studio Codeが再起動します(①)。

img_visualstudiocode_12
 【図】:日本語表示を有効化するために再起動する

再起動すると、次のようにメニューや項目が日本語で表示されることが分かります(①②)。

img_visualstudiocode_13
 【図】:日本語に切り替わったメニューと項目の表示

Visual Studio Codeの言語を手動で変更する

Visual Studio Codeの言語は、手動で変更することもできます。手動で変更するには、コマンドパレットを使用します。コマンドパレットは、メニューの「表示」「コマンドパレット」と順にクリックします(①②③)。

ディスプレイの解像度の都合でメニューに「表示」が見当たらない場合は、「・・・」を開くと「表示」の項目があります。

img_visualstudiocode_14
 【図】:Visual Studio Codeの言語を手動で変更する

この例は日本語のメニューですが、英語のメニューからは、「View」「Command Palette」の表記から開くことができます。コマンドパレットが開いたら、「Configure Display Language」と順にキー入力します(①)。キー入力の間に、候補が入力欄の下に表示されます(②)。

img_visualstudiocode_15
 【図】:Configure Display Languageコマンドを使用する

表示された「Configure Display Language」をクリックすると、現行の言語選択が表示されますので、任意の言語に変更が可能です。

img_visualstudiocode_16
 【図】:ユーザインターフェースで使用する言語を指定する

選択時に雲のマークがある言語はまだダウンロードされていないものですが、クリックすることでダウンロードが開始され、その後インストールが行われます。

誤って他言語を選択した場合の対処方法

コマンドパレットの「Configure Display Language」で、他言語を誤って選択した場合は、再起動後のメニュー表記が分からなくなってしまいます。この場合も慌てずに設定し直すことができます。

Visual Studio Codeは、豊富なショートカットキーが特徴です。ここでは、ショートカットキーを使ってコマンドパレットを開くことができます。

コマンドパレットのショートカットキーは、「Shift」+「Ctrl」+Pです。このショートカットキーで、コマンドパレットが開きますので、履歴の候補から「Configure Display Language」を選択し、言語を再設定できます。

このような事態に備えて、ショートカットキーを事前に学ぶか、以下のリンク先のようなショートカット一覧を手元に置くと良いでしょう。

【参考】:Visual Studio Code Keyboard Shortcuts Reference - Windows 【参考】:Visual Studio Code Keyboard Shortcuts Reference - Linux 【参考】:Visual Studio Code Keyboard Shortcuts Reference - macOS

VSCodeのショートカット一覧!開発作業を効率化する秘訣を解説

Visual Studio Codeを日本語化してプログラミングに活用しよう

img_visualstudiocode_17

Visual Studio Codeは、豊富なカスタマイズ機能が搭載されています。その最初の一歩が日本語化です。ご自身の希望に合わせて設定を行い、必要なプログラミング言語パックを拡張機能を使って導入します。

このように、Visual Studio Codeの日本語化が完了したら、プログラミングに有効活用すると良いでしょう。

\転職するか迷っていてもOK!/
マイナビエージェントに無料登録して
転職サポートを受ける

VS Codeのプラグインとは?導入方法やおすすめの拡張機能も紹介
VS Code Serverが登場!インストール方法や使い方・開発方法を解説
VSCodeの使い方を図解!画面説明からよくある質問・操作方法まで解説
VSCodeのテーマの変更方法とおすすめテーマをご紹介!
気になる人のXをフォローしよう!
公式LINE
公式YouTube
マイナビITエージェント

編集部オススメコンテンツ

thumb_gptowten_01
ChatGPTの面白い使い方15選!ビジネスや遊び相手になる事例
アンドエンジニア編集部
2024.02.19

アンドエンジニアへの取材依頼、情報提供などはこちらから

お問い合わせ・情報提供

カテゴリー

編集部おすすめコンテンツ

アンドエンジニアへの取材依頼、情報提供などはこちらから

logologo
Powered by マイナビ AGENT