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

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

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

【参考】：[Microsoft Visual Studio Code](https://azure.microsoft.com/ja-jp/products/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](https://azure.microsoft.com/ja-jp/products/visual-studio-code)
【参考】：[Visual Studio Code](https://code.visualstudio.com/)

VSCodeとは？定番のコードエディタを他のエディタと比較して解説

IDEとは？詳細やメリット、おすすめのIDEを紹介します！

*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](https://code.visualstudio.com/docs/supporting/requirements)

### Visual Studio Codeのダウンロード

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

~~　【図】：Visual Studio Codeをダウンロードする~~

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

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

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

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

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

【参考】：[Microsoft Visual Studio Code](https://azure.microsoft.com/ja-jp/products/visual-studio-code)
【参考】：[Visual Studio Code](https://code.visualstudio.com/)
【参考】：[Download Visual Studio Code](https://code.visualstudio.com/download)

### Visual Studio Codeのインストール

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

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

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

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

~~　【図】：インストールの実行と完了~~

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

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

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

【参考】：[Visual Studio Code on Windows](https://code.visualstudio.com/docs/setup/windows)
【参考】：[Visual Studio Code on Linux](https://code.visualstudio.com/docs/setup/linux)
【参考】：[Visual Studio Code on macOS](https://code.visualstudio.com/docs/setup/mac)

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

## Visual Studio Codeを日本語化する

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

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

【参考】：[Visual Studio Marketplace: Japanese Language Pack for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja)

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

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

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

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

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

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

~~　【図】：Japanese Language Packを選択し表示する~~

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

~~　【図】：Japanese Language Packをインストールする~~

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

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

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

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

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

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

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

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

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

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

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

~~　【図】：Configure Display Languageコマンドを使用する~~

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

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

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

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

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

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

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

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

【参考】：[Visual Studio Code Keyboard Shortcuts Reference - Windows](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf)
【参考】：[Visual Studio Code Keyboard Shortcuts Reference - Linux](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-linux.pdf)
【参考】：[Visual Studio Code Keyboard Shortcuts Reference - macOS](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf)

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

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

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

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

<center>*＼転職するか迷っていてもOK！／*<br/>[*マイナビエージェントに無料登録して*<br/>*転職サポートを受ける*](https://mynavi-agent.jp/entry/?utm_source=and-engineer&utm_medium=content-text&utm_campaign=acv17)</center>

VS Codeのプラグインとは？導入方法やおすすめの拡張機能も紹介

VS Code Serverが登場！インストール方法や使い方・開発方法を解説

VSCodeの使い方を図解！画面説明からよくある質問・操作方法まで解説

VSCodeのテーマの変更方法とおすすめテーマをご紹介！

Visual Studio Codeは、マルチプラットフォームで動作するソースコードエディタです。セットアップやインストールが簡単で、すぐに使用することができます。ここでは、セットアップやインストール方法とともに、日本語表示の手順について学んでいきます。

Visual Studio Codeは、WindowsやLinux、macOSにインストールすることができます

インストールが完了したら、拡張機能を使ってVisual Studio Codeを日本語化することが可能です

その後、必要なプログラミング言語パックを導入し、プログラミングに活用することができます

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

*VSCode（Visual Studio Code）には、grep検索が標準で搭載されています。*grep検索を使うには、拡張機能を使うことなく、通常の検索と同じような操作でgrep検索が利用できます。ここでは、実際にVSCodeを操作してgrep検索を図解していきます。

そもそもgrepとは、UNIX系システムに搭載されているコマンドであり、正規表現を使って指定する複数のテキストファイルから、該当する行と結果を表示するものです。

grepは「global regular expression print」の略で、ファイル全体（global）から正規表現（regular expression）を使って結果を表示する（print）という役割そのものを意味します。

grepは同一ファイル内の検索だけではなく複数ファイルから検索結果を抽出し、表示する特徴があります。*大規模なプログラム開発では、複数ファイルに分散してコーディングする場合が多いので、grep検索するメリットが大きいと言えるでしょう。*

### コードエディタやテキストエディタのgrep検索機能

grepは複数ファイルから検索結果を抽出し、表示します。コードエディタやテキストエディタにおいても、複数のファイルにまたがって検索する機能をgrep検索と呼びます。

テキスト検索を行うことを「grepする」や「grep検索する」などと言い、*テキストコードエディタでは、VSCodeの他、サクラエディタも同様の機能を提供しています。*

通常の検索は、同一ファイル内の検索に限定されるため必要なテキストファイルをその都度開いて検索する必要があります。grep検索では、複数のテキストファイルを一括検索することができるので変更履歴の管理も簡単です。

【参考】：[サクラエディタ](https://sakura-editor.github.io/)
【参考】：[サクラエディタ ヘルプ: Grep](https://sakura-editor.github.io/help/HLP000067.html)

ここからは、VSCode（Visual Studio Code）のgrep検索を使って操作方法を確認していきます。*VSCodeは、多機能なコードエディタで、操作を行う場合もメニューやアイコン、キーボードショートカットなどから行うことができます。*

キーボードショートカットは、多くの機能がマッピングされていますので、作業の効率化のために学んでおくと良いでしょう。

【参考】：[Key Bindings for Visual Studio Code: Keyboard Shortcuts Reference](https://code.visualstudio.com/docs/getstarted/keybindings#_keyboard-shortcuts-reference)

VSCodeのgrep検索を使うために、Visual Studio Codeを起動します。必要なダウンロードやインストールは、事前に行っておく必要があります。*Windowsの場合は、スタートメニューから「Visual Studio Code」をクリックし、起動します。*

~~　【図】：Visual Studio Codeを立ち上げる~~

*VSCodeのgrep検索を使うには、テキストコードやテキスト文章の格納されているフォルダーを指定します。*指定したフォルダーのテキストファイルは、grep機能で一括検索することができます。

フォルダーを開くには、ウェルカムページから開く方法、エクスプローラーのアイコンから開く方法、ファイルメニューから開く方法などがあります。

*・ウェルカムページから開く方法*
ウェルカムページは、「ようこそ」と表示される最初の画面です。ウェルカムページから開くには、表示画面の「フォルダーを開く」をクリックし、フォルダーを選択します（①）。

~~　【図】：ウェルカムページからフォルダーを開く~~

*・エクスプローラーのアイコンから開く方法*
VSCodeの左ペインには、アイコンがいくつか表示されています。フォルダーを開くには、次のように1番目のアイコンもしくは2番目のアイコンをクリックします。

~~　【図】：エクスプローラーのアイコンからフォルダーを開く~~

1番目のアイコンはエクスプローラーのアイコンです。このアイコンをクリックし（①）、「フォルダーを開く」をクリックしてフォルダーを選択します（②）。

2番目のアイコンは検索アイコンです。このアイコンをクリックし（③）、「フォルダーを開く」をクリックしてフォルダーを選択します（④）。

*・ファイルメニューから開く方法*
ファイルメニューから開くには、「ファイル」「フォルダーを開く」とメニューをクリックします（①②）。

~~　【図】：ファイルメニューからフォルダーを開く~~

この操作は、ショートカットキーの「Ctrl」＋K、あるいは「Ctrl」＋Oが利用できます。

### VSCodeで開くフォルダーを選択する

*「フォルダーを開く」をクリックすると、「フォルダーを開く」とタイトル表示されたファイルエクスプローラーが表われます。*ここでは、任意のフォルダーを指定し「フォルダーの選択」をクリックすると、そのフォルダーがVSCodeのエクスプローラーに表示されます（①②）。

~~　【図】：VSCodeで開くフォルダーを選択する~~

この例では、指定したフォルダーの「Program Code」が、フォルダーの上位に「PROGRAM CODE」と記載されており、複数階層を持つフォルダーも正しく取り込まれます。

### VSCodeで複数ファイルにgrep検索する

*フォルダーが指定されたら、grep検索が可能です。*ここでは、検索アイコンからgrep検索する方法、編集メニューからgrep検索する方法があります。grep検索は、検索画面が表示され次第使用することができます。

*・検索アイコンから検索画面を表示する*
左ペインの2番目のアイコンは検索アイコンです。このアイコンをクリックすると、中央ペインに検索画面が表示されます（①②）。

~~　【図】：検索アイコンから検索画面を表示する~~

*・編集メニューから検索画面を表示する*
編集メニューから検索画面を表示するには、「編集」「フォルダーを指定して検索」と順にメニューをクリックします（①②③）。

~~　【図】：編集メニューから検索画面を表示する~~

「フォルダーを指定して検索」には、「Ctrl」＋「Shift」＋Fのショートカットキーが設定されています。通常の「検索」が「Ctrl」＋Fですので、通常の検索のショートカットに「Shift」を追加して使用します。

実際に使用する場合は、検索アイコンあるいはショートカットキーを用いてgrep検索するのがおすすめです。

### VSCodeの検索画面で検索する文字列を入力する

ここでは、実際に文字列を入力してgrep検索を進めていきます。

今回指定したフォルダーには、HTMLやJava、Pythonのプログラムコードが格納されています。検索する文字列は自由に決められますが、この例では ”Moth.pow” を指定します。Moth.powは、数学ライブラリで良く用いられる累乗（べき乗）計算の関数です。

検索の入力欄に ”Moth.pow” と入力すると（①）、検索結果が下部の表示欄に反映されます（②）。

~~　【図】：検索画面で検索する文字列を入力する~~

*検索結果は瞬時に表示され、待たされることがありません。*ここでは、5つのファイルが表示されており、Javaが4つのファイルで該当箇所4つ、Pythonが1つのファイルで該当箇所4つでした。

試しに1番目の表示結果をクリックすると、次のように右ペインに対象となるプログラムコードが表示されます（①②）。該当する箇所がハイライト表示されており、判別しやすい工夫がされています。

~~　【図】：検索結果の該当コードを表示する~~

ここで表示されている、検索結果一覧の全体を選択すると結果のコピーが可能ですので、grep検索の一覧抽出も可能です。

### VSCodeでgrep検索の条件を変更する

*grep検索の条件は、簡単に追加することができます。*今回の例では、 ”Moth.pow” を指定しましたが、デフォルトでは大文字と小文字の区別はありません。

大文字と小文字を区別するには、検索入力欄の右側「Aa」のアイコンをクリックすると（①）、「大文字と小文字を区別する」状態に切り替わります（②）。

~~　【図】：grep検索の条件を変更する~~

その結果、Pythonの ”math.pow” という小文字の数学ライブラリは除外され、Javaの4つのファイル、4か所のみが表示されます（③④）。

表示アイコンは入力欄右側の「Aa」のアイコンが、「大文字と小文字を区別する」モードで、ショートカットキー「Alt」＋Cに割り当てられています。

その右側の「ab」のアイコンが「単語単位で検索する」モードで、ショートカットキー「Alt」＋W、そして右端の「.＊」のアイコンが、「正規表現を使用する」モードで、ショートカットキー「Alt」＋Rで呼び出すことができます。

検索のファイル指定も柔軟で、含めるファイルと除外するファイルを指定することもできます。検索する文字コードも指定可能のため、複数条件を組み合わせて活用することが簡単にできます。

## VSCodeのgrep機能は便利で作業効率が向上する

VSCodeのgrep機能は、フォルダー全体を検索してくれるため操作性が高いものです。結果は瞬時に表示され、置換も簡単にできます。**日常的にコード開発を行う方や、大規模なプロジェクトで使用する場合は、開発生産性の向上に期待できるでしょう。**

その他、VSCodeに関連する内容は、下記の記事でもご紹介しています。ぜひ参考にご覧ください。

VSCodeではgrep検索が標準で搭載されており、通常の検索と同じような操作でgrep検索が利用できます。ここでは、grep検索の概要を解説するとともに、VSCodeを操作して複数のテキストファイルを一括検索する実際の使い方まで図解していきます。

VSCodeでは、拡張機能を使うことなく、通常の検索と同じような操作でgrep検索が利用できます

grep検索では、簡単に複数のテキストファイルを一括検索することが可能です

複数のファイルに分散されたコードの検索や保全が簡単で、開発生産性の向上に期待できます

VSCodeのgrep検索！grep検索の概要から使い方まで図解

VSCode（Visual Studio Code）は、多機能なコードエディタです。*カスタマイズ機能が充実しており、表示するフォントもお気に入りのフォントに切り替えることができます。*ここでは、コードエディタに最適なおすすめフォント5選、そしてその設定方法を図解していきます。

### コードエディタでフォントを設定する理由

プログラミングで使用するコードエディタは、プログラミング言語を記述するとともにコメント入力やマニュアルページやヘルプガイドの作成など、文章の作成にも使用されます。

プログラミング言語のコメントアウトでは、日本語の説明文を記述することも多く、全角と半角の調和がとれていないとメンテナンス性が低下する可能性があります。

このことから、*テキストエディタやコードエディタでは、フォントの選択やサイズ変更を行って、表示を最適化するのが有効です。*

特に全角と半角のフォントは、文字幅比率を1：2とすることで、コーディングの部分とコメントの記述の表示を統一させることができます。それぞれの文字の幅が異なると、表示のずれを生じるため、プログラミングフォントでは等幅フォントが好まれます。

ここでは、VSCodeでフォントを変更して表示の違いを確認していきます。*VSCodeがインストールされるとデフォルトで標準フォントが設定されます。*標準では、「Consolas, 'Courier New', monospace」の3種類が登録されています。

フォントの違いを確認するために、JavaScriptのコードにコメントを追加し、表示を確認します。最初に標準フォントの表示を示します。

~~　【図】：VSCodeでデフォルトフォントを使用する~~

表示では、半角スペースと全角スペースの幅や表示の違いが確認できます。同様に数字の0と、アルファベットのoとOの違いや、数字の1と、アルファベットのiとIの違いなども気になるポイントです。以降では、おすすめフォントの概要と表示例を図解していきます。

*Source Han Code JPは、Adobeが公開するフォントでSource Han Sans JP（源ノ角ゴシック Code）をベースとし、14種類のフォントファミリで構成されています。*コーディング用に開発されたSource Code Proとの調和がされており、見やすさが追求されています。

最新版は「2.012R」で、「SourceHanCodeJP.ttc」をインストールして使います。VSCodeでは、 ’源ノ角ゴシック Code JP’ をフォントファミリに指定します。

~~　【図】：VSCodeでSource Han Sans JPフォントを使用する~~

表示を見ると標準フォントと比べて、半角スペースや全角スペース、数字の0などに違いがあります。

【参考】：[GitHub adobe-fonts/source-han-code-jp](https://github.com/adobe-fonts/source-han-code-jp)
【参考】：[GitHub adobe-fonts/source-han-code-jp Releases 2.012R](https://github.com/adobe-fonts/source-han-code-jp/releases/tag/2.012R)

*PlemolJP（プレモル ジェイピー）は、IBM Plex Mono と IBM Plex Sans JPを合成した日本語プログラミングフォントです。*ウェイト（太さ）はThinからBoldまで8種類が提供されます。

フォントファミリは、文字幅比率1：2の通常版PlemolJPのほか、コンソール表示用PlemolJP Console、文字幅比率3：5のPlemolJP35、PlemolJP Consoleを文字幅比率3：5に変更したPlemolJP35 Consoleから選べます。

最新版は「v1.7.1」で、「PlemolJP_v1.7.1.zip」をダウンロードして使います。ZIPファイルの通常版PlemolJPフォルダーには、16のフォントが含まれます。

~~　【図】：VSCodeでPlemolJPフォントを使用する~~

全角スペースは、型抜きがされた表示で半角スペースとの違いが分かります。数字の0や1もアルファベットのOやIと区別がつきやすいです。

【参考】：[GitHub yuru7/PlemolJP](https://github.com/yuru7/PlemolJP)
【参考】：[GitHub yuru7/PlemolJP Releases v1.7.1](https://github.com/yuru7/PlemolJP/releases/tag/v1.7.1)

*HackGen（白源、はくげん）は、英文フォントHack と、源ノ角ゴシックの派生フォント源柔ゴシックを合成したフォントです。*

フォントファミリは、文字幅比率1：2の通常版HackGenのほか、コンソール表示用HackGen Console、文字幅比率3：5のHackGen35、HackGen Consoleを文字幅比率3：5に変更したHackGen35 Consoleから選べます。

最新版は「v2.9.0」であり、「HackGen_v2.9.0.zip」をダウンロードして使います。

~~　【図】：VSCodeでHackGenフォントを使用する~~

半角スペースと全角スペースは等幅に構成されています。全角スペースは、型抜きがされた表示で半角スペースとの違いが分かりやすいです。数字の0や1もアルファベットのOやIと区別がつきやすいです。

【参考】：[GitHub yuru7/HackGen](https://github.com/yuru7/HackGen)
【参考】：[GitHub yuru7/HackGen Releases v2.9.0](https://github.com/yuru7/HackGen/releases/tag/v2.9.0)

*Moralerspace は、欧文フォントMonaspaceと、日本語フォントのIBM Plex Sans JPなどを合成したフォントです。*

最新版は「v1.0.2」であり、文字幅比率3：5が通常版で、「Moralerspace_v1.0.2.zip」です。20のフォントがZIPファイルに含まれます。

この他、文字幅比率1：2、通常版に記号類を全角幅にしたフォント、文字幅比率1：2に記号類を全角幅にしたフォント、Nerd Fontsを追加合成したものなど、6種類が個別のzipファイルで提供されます。

フォントの種類が非常に多いので、ここでは ’Moralerspace Neon’ を使用して確認します。

~~　【図】：VSCodeでMoralerspaceフォントを使用する~~

このフォントも、全角スペースは型抜きがされた表示で半角スペースとの違いが分かりやすく、数字の0や1もアルファベットのOやIと区別がつきやすいことが分かります。文字幅比率1：2は、「MoralerspaceHW_v1.0.2.zip」に含まれますので、違いを比べながら設定することもできます。

【参考】：[GitHub yuru7/moralerspace](https://github.com/yuru7/moralerspace)
【参考】：[GitHub yuru7/moralerspace Releases v1.0.2](https://github.com/yuru7/moralerspace/releases/tag/v1.0.2)

*M+ Fontsはモダンな各ゴシック体のフォントですが、丸みを帯びたかわいい字体を採用しています。*GF Latin Plusのグリフセットに対応したサンセリフ書体と、5,700字以上の漢字を含む日本語で構成されています。ウェイトはThinからBoldまで9種類が提供されます。

ここでは、 ‘M PLUS 1’ を登録し表示を確認します。

~~　【図】：VSCodeでM+ Fontsフォントを使用する~~

このフォントは、やわらかいデザインでかわいい印象を受けます。数字の0は、アルファベットのOに近い印象があるフォントですので、このフォントを使用する場合は区別がつくように使用すると良いでしょう。

【参考】：[M+ Fonts](https://mplusfonts.github.io/)
【参考】：[Google Fonts M+ Fonts](https://fonts.google.com/?query=Coji+Morishita&vfonly=true)
【参考】：[GitHub M+ Fonts](https://github.com/coz-m/MPLUS_FONTS)

*VSCodeのフォントを設定するには、使用するOSの操作手順に従ってフォントをあらかじめシステムに登録する必要があります。*システムに登録されたフォントはVSCodeで使用できます。ここでは、システムの登録からVSCodeの設定まで、一連の設定方法を図解していきます。

### フォントをシステムに登録する

フォントをシステムに登録するには、OS毎に手順が定められています。VSCodeで最も利用されているOSはWindowsですので、ここではWindowsの環境を使用してフォントの設定方法を確認していきます。

*登録するフォントは、フォントのダウンロードサイトからローカルPCに、あらかじめダウンロードしておきます。*ダウンロードファイルのZipファイルは、ファイルの中を直接開くか展開して使用します。

下の例では、今回紹介するおすすめフォント5選をフォルダに保存しておき、ttfやttcのフォントファイルは右クリックメニューからインストールすることができます（①②）。

~~　【図】：右クリックメニューからインストールする~~

ファイルをダブルクリックすると、フォントビューアが立ち上がりますので、そこから「インストール」をクリックしてインストールすることもできます（①）。

~~　【図】：フォントを開いてインストールする~~

システムに登録されているフォント一覧は、「設定」アプリの「個人用設定」「フォント」から確認できます。同様に、 ”C:¥Windows￥Fonts” のフォルダ、あるいは「コントロールパネル」の「フォント」からも確認することができます。

*VSCodeでは、左ペインに表示されるActivity Barに、主要なアイコンが表示されています。*左ペイン下部の設定アイコンをクリックすると（①）、表示されたメニューから「設定」をクリックし（②）、設定画面を開くことができます。

~~　【図】：VSCode左ペインの設定アイコンから設定を開く~~

この設定画面は、「編集」メニューの「ユーザー設定」「設定」でも表示させることができます。ショートカットキーは、「Ctrl」＋「,」に割り当てられています。

### 設定画面でフォントファミリを変更する

*設定画面が開いたら、「フォントファミリ（Font Family）」でフォントを指定することができます。*フォントファミリは、「よく使用するもの」に表示されています。

~~　【図】：設定画面の「よく使用するもの」からフォントファミリを設定する~~

フォントファミリが「よく使用するもの」に見当たらない場合は、次のように「テキストエディター」の「フォント」に項目があります（①②）。

~~　【図】：設定画面の「フォント」からフォントファミリを設定する~~

フォントを登録するには、フォントファミリの先頭に追記します。スペース（空白）を含む名称は、クォーテーションで囲みます。

~~　【図】：フォントファミリに使用フォントを追加する~~

VSCodeの記事（1ページ目）