はじめに

ハンズオンに参加したときに事前設定として、フォント「Fira Code」使うといいよ！と記載されていて、実際にインストールして使ってみたところ、見やすい！かわいい！MecchaEE！と感じた(ハンズオン開催してくれた側からするときっとそこかよ的な部分だと思っている・・・）ので、自分用に環境別のインストール手順とテキストエディタの設定手順を残しておく。
といっても普通にテキストファイルをインストールするやり方です。

※インストール＆利用方法はgithubにちゃんとあります。
私がフォントあんまりインストールしないもので、また良きフォントがあったときにインストールどうやるんだっけってなりそうなので、スクショと合わせてインストール方法をまとめたメモです。

Fira Codeとは？

プログラミング用フォントで、
オープンソースのフォントなので誰でも自由に利用可能。
また合字（リガチャ）¹に対応している。　

◆MSゴシックの場合（みんな大好きさくらエディタ）

◆FiraCodeの場合
丸っこくてなんか見やすい…！！

リガチャってこういうこと

リガチャはエディタによって利用可能なものと利用できないものがあります。
◆以下はJavaScriptなどでよく利用する文字列の見た目（リガチャしていない）

◆以下はJavaScriptなどでよく利用する文字列の見た目（リガチャしている）

インストール：Windows10の場合

github のページの中にある以下を押下してフォントをダウンロードします。記事作成時のverは5.2でした。

ダウンロードしたzipファイルを任意フォルダに解凍します。

解凍したフォルダに格納されている.ttf拡張子のファイルをダブルクリックします。

「印刷」と「インストール」ボタンが表示されている画面が起動するので、「インストール」を押下します。

「.ttf」ファイルを右クリックメニューの中からインストールでも可

以下でも可
Windowsの検索欄で「フォント」と入力すると表示されるフォント設定を選択後、表示されるフォントの追加欄に「.ttf」ファイルをドラッグアンドドロップでも可

インストール：Macの場合

github のページの中にある以下を押下してフォントをダウンロードします。記事作成時のverは5.2でした。

ダウンロードしたzipを任意のフォルダに解凍する

解凍したフォルダを開いて、ttfフォルダを開きます

中に入ってるttf拡張子のファイルを全て選択する

右クリックメニュー > このアプリケーションで開く > Font Book.appを押下する

以下の画面でフォントをインストールを押下します

VisualStudioCodeの設定

ファイル > ユーザー設定 > 設定　を選択します。

表示される設定画面上部の検索欄に「フォント」と入力します。

検索欄以下に表示される「Editor:Font Family」の入力欄に「Fira Code」を追加します。

検索欄以下に表示される「Editor:Fot Ligatures」欄に表示されている「setting.jsonで編集」を押下します。

表示される「setting.json」で"editor.fontLigatures": nullを"editor.fontLigatures": trueに変更して上書き保存します。

Ctrl+Shift+Pのショートカットコマンドで表示される入力欄にreloadと入力すると候補として表示されるReload Windowを選択します。

以下のように設定されたフォントとリガチャの設定が反映されます。

WebStormの設定

メニュー > Fileを押下します。

File > Settingsを押下します。

Settings画面の Editor > Fontを押下します。

FontにFira Codeを入力して、Enable LigaturesをONにしてApplyとOKを押下します。※Enable LigaturesをOFFでリガチャは使用しない設定になる。

こんな感じで利用できます。

さくらエディタの設定

※リガチャは利用不可？ぽい
メニュー「設定」を押下します。

設定 > フォント設定を押下します。

フォント設定画面でFira Codeと入力して、OKを押下します。

特定の順番に文字を入力すると文字の見た目が変わる仕組みで、例えばJavaScriptでよく利用する「->」や「===」の見た目を以下のように変えてくれる。 ↩