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

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

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

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

そもそも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を立ち上げる~~

【参考】：[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)

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

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

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

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

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

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

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

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

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

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

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

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

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

Eclipseとは？統合開発環境を日本語プラグインで快適に構築する方法を解説！

Eclipse（読み方：エクリプス）は、プログラミングの際に統合開発環境（IDE）として広く利用される、無料でオープンソースのソフトウェアです。

EclipseはJavaの開発環境としてよく知られていますが、C++やRuby、PHPなど、*他のプログラミング言語にも対応しており、豊富なプラグインと活発なコミュニティを有する点が主な特徴です。*

この記事では、Windows11にEclipseをインストールする方法を中心に紹介します。これからJavaなどのプログラミングを学びたい方や、IDEについて理解を深めたい方はぜひ参考にしてください。

【参考】：[オープンなコラボレーションとイノベーションのためのコミュニティ | Eclipse Foundation](https://www.eclipse.org/)

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

Eclipseにはどのような特徴があるのか確認しておきましょう。EclipseはJavaエンジニアにとって強力なツールであり、**様々な言語やフレームワークにも対応できるのが大きな特徴と言えます。**

*■オープンソース*
Eclipseは無料での利用が可能なオープンソースソフトウェアとして公開されています。

*■プラグインによる拡張性*
Eclipseは多くのプラグインが提供されており、Java以外にもPython、PHP、C/C++など様々なプログラミング言語に対応できます。

*■豊富な開発支援機能*
Eclipseはコード補完、デバッグツール、ビルド管理ツールなどが統合されており、開発効率を大幅に向上させられます。

*■マルチプラットフォーム対応*
EclipseはWindows、MacOS、Linuxなど、様々なOSで利用可能なため、柔軟に開発環境を構築でき、開発時間や開発コストを低減できます。

*■コミュニティのサポート*
Eclipseはオープンソースコミュニティによる定期的な更新やバグフィックスが実施されており、常に最新技術に対応しています。また、コミュニティには問題解決のための情報が豊富で、サポートを受けやすい点も特徴の1つです。


EclipseはJava開発環境において必要不可欠のIDEですが、Eclipseを導入するためには何が必要なのでしょうか。以降はWindos11 OSでの利用を前提にしています。

Javaでできること8選を紹介！初心者に向けてわかりやすく解説

Javaの開発環境では、まずJDK（Java Development Kit）をインストールしましょう。*Eclipse自体はJDKがなくとも動作しますが、Javaの開発にはインストールしておくことをおすすめします。*最新のJDKは、Oracleの公式サイトやOpenJDKのサイトからダウンロードできます。

【参考】：[Java Downloads | Oracle 日本](https://www.oracle.com/jp/java/technologies/downloads/)
【参考】：[Open JDK](https://openjdk.org/)

Eclipseの公式サイトから最新バージョンをダウンロードします。Eclipseには様々なパッケージがあり、Java開発向けの「Eclipse IDE for Java Developers」など、用途に応じたものを選択できます。

【参考】：[Eclipse Downloads | The Eclipse Foundation](https://www.eclipse.org/downloads/)

### Pleiadesプラグイン（日本語化）

PleiadesはEclipseを日本語化するためのプラグインです。*Pleiades All in Oneパッケージを使用すると、最初から日本語化されたEclipseを利用できます。*

【参考】：[Java 統合開発環境 Eclipse 日本語化プロジェクト ｜ Pleiades](https://willbrains.jp/)

ここまで挙げたツールなどのダウンロードやインストール時にインターネット接続環境が必要です。また、プラグインの追加や更新にも必要ですので、インターネット環境の有無を確認しておきましょう。


Windows11でEclipse環境を整えるためのインストール手順を紹介していきます。既に最新のJDKをインストールしている方はEclipseのインストールに進んでください。

JDKをダウンロードするには、OracleのJavaダウンロードページにアクセスします。

ダウンロードページにアクセスしたら、「JDK Development Kit 22.0.2 downloads」の下にある「Linux macOS Windows」のタブから「Windows」を選択し、「Windows x64 Installer」をクリックしてダウンロードします。

【参考】：[Java Downloads | Oracle 日本](https://www.oracle.com/jp/java/technologies/downloads/)

~~【画像】：　JDKのダウンロード選択画面　~~

今さら聞けないOracleとは？エンジニアとしての必須知識を解説！

ダウンロードしたインストーラファイル（例：jdk-22\_windows-x64\_bin.exe）をダブルクリックして実行します。

インストールウィザードが起動したら、「次へ」をクリックします。

~~【画像】：　JDKのインストールウィザード画面　~~

続いて、インストール先を選択しますが、デフォルトのインストール先で問題なければ、そのまま「次へ」をクリックしてインストールを開始します。

インストールが完了したら、「閉じる」をクリックしてウィザードを終了します。

JDKのインストールが済んだら、次に環境変数の設定を行います。

「スタート」メニューを右クリックし、「システム」を選択します。次に右ペインの「バージョン情報」を選択し、「システムの詳細設定」をクリックします。

~~【画像】：　システム>バージョン情報>システムの詳細設定　~~

「システムのプロパティ」ウィンドウで「環境変数」ボタンをクリックします。

~~【画像】：システム>バージョン情報>システムの詳細設定>システムのプロパティ>環境変数　~~

「システム環境変数」セクションで「新規」ボタンをクリックします。

変数名に「JAVA_HOME」を入力し、変数値にJDKのインストールディレクトリ（例：C:\Program Files\Java\jdk-22）を入力し、「OK」をクリックして設定を保存します。

~~【画像】：　Java環境設定変数設定画面　~~

「システム環境変数」セクションの「Path」を選択し、「編集」ボタンをクリックします。

「新規」ボタンを選択後「%JAVA_HOME%\bin」を入力し、「OK」をクリックして設定を保存します。

~~【画像】：　JavaのPath変数の設定画面>　~~

JDKのインストールが確実に行われていることを確認します。

「スタート」メニューを開き、「cmd」と入力してコマンドプロンプトを開きます。コマンドプロンプトで「java -version」と入力し、Javaのバージョン情報が表示されることを確認します。

~~【画像】：コマンドプロンプトでJavaのバージョンを確認　~~


EclipseをEclipseの公式サイトからダウンロードする場合は、後ほど日本語化の対応が必要です。そこで、ここでは、*日本語化までオールインワンの【Pleiades All in One ダウンロードサイト】を利用する方法を紹介します。*

続いて、統合開発環境（IDE）のEclipseを導入する手順を紹介します。

「Pleiades All in One」は、Eclipse本体及び日本語プラグインのPleiadesなどをまとめたオールインワンのサイトです。今回はこのサイトを利用してEclipseをダウンロードします。

Pleiades All in Oneのダウンロード画面が表示されたら、ここでは最新の「Eclipse 2024」を選択します。

~~【画像】：Pleiades All in One　ダウンロードサイト>「Eclipse 2024」　~~

次の画面が表示されたら、JavaのFull Edition（赤枠）をクリックし、ダウンロードのリンクが表示されたら、リンクをクリックします。

~~【画像】：Pleiades All in One>「Eclipse 2024」>Java Download　~~

ダウンロードした自己解凍形式のファイル（例：pleiades-2024-06-java-win-64bit-jre_20240626.exe）をダブルクリックして実行します。作成先フォルダを入力し、［解凍］をクリックします。解凍には数分程度掛かります。

~~【画像】：Pleiades All in One>「Eclipse 2024」>Java Download>自己解凍書庫解凍　~~

解凍したフォルダ内にある「eclipse.exe」をダブルクリックして起動します。インストーラーによるインストールではないため、ショートカットはされません。必要に応じてショートカットを作成することをおすすめします。

~~【画像】：ExploreにてEclipseフォルダーを開き、Eclipseを起動　~~

Eclipseが起動すると、ワークスペースとして利用するフォルダを尋ねてきます。ワークスペースとは、Eclipseで作業するためのプロジェクトや設定が保存される場所であり、初回起動時に設定する必要があります。

デフォルトの場所で問題なければ、［起動］をクリックします。次のような画面が表示されれば、Eclipseの起動は成功です。全て日本語で表示されていることが確認できれば、日本語化も完了しています。

~~【画像】：　Eclipseの起動画面　~~


## Eclipseを活用してJavaの開発環境を向上させよう

この記事ではEclipseの概要、JDKやEclipseのインストール方法、起動方法について紹介しました。EclipseはJavaエンジニアにおすすめのIDE（統合開発環境）です。これからJavaエンジニアを目指す方には手放せないツールになるでしょう。

Eclipseに興味を持ったら、**この記事を参考にしてEclipseをインストールし、開発力の向上にぜひ活用してください。**

Eclipseは統合開発環境（IDE）として広く利用される、無料でオープンソースのソフトウェアです。豊富なプラグインと活発なコミュニティが特徴で、開発効率の向上に役立ちます。この記事では、Eclipseの概要やWindows11へのインストール方法を解説します。

EclipseはJava以外の開発にも適したIDE（統合開発環境）であり、無料で利用ができる

Eclipseはオープンソースだが豊富な機能を有しており、開発効率の向上に役立つ

Eclipseは先にJDKをインストールしてJavaの開発環境を整えてから導入すると良い

EclipseをインストールしてJavaの開発環境を整えよう

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のおすすめフォントから最適なものを選びましょう

お役立ち記事