Fira Codeのインストールと設定メモ

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

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

### Fira Codeとは？
***
[プログラミング用フォント](https://github.com/tonsky/FiraCode)で、
オープンソースのフォントなので誰でも自由に利用可能。
また合字（リガチャ）[^1]に対応している。　

◆MSゴシックの場合（みんな大好きさくらエディタ）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536171/d2c43223-6a4b-11d1-a683-7cfdf83aea1b.png)
◆FiraCodeの場合
丸っこくてなんか見やすい…！！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536171/d88aec47-e251-27f3-d0fd-9e8bd789ef1f.png)
#### リガチャってこういうこと
リガチャはエディタによって利用可能なものと利用できないものがあります。
◆以下はJavaScriptなどでよく利用する文字列の見た目（リガチャしていない）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536171/791b61af-5a9c-1db7-30ce-63a16221b897.png)
◆以下はJavaScriptなどでよく利用する文字列の見た目（リガチャしている）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536171/ffcc5397-1fa0-1aa4-b781-5b5f429442ca.png)
[^1]: 特定の順番に文字を入力すると文字の見た目が変わる仕組みで、例えばJavaScriptでよく利用する「->」や「===」の見た目を以下のように変えてくれる。

### インストール：Windows10の場合
***
[github](https://github.com/tonsky/FiraCode) のページの中にある以下を押下してフォントをダウンロードします。記事作成時のverは5.2でした。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536171/aed45600-39f6-970d-579b-19492dc9db55.png)
ダウンロードしたzipファイルを任意フォルダに解凍します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536171/90a9b34b-e806-7642-f88a-e0a0694ec2a6.png)
解凍したフォルダに格納されている.ttf拡張子のファイルをダブルクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536171/737390c7-9c31-c3cc-4444-6c37a061cc56.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536171/fd9bdfeb-8075-5ed5-f35b-b4e3e7f43d30.png)
「印刷」と「インストール」ボタンが表示されている画面が起動するので、「インストール」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536171/04333b53-8281-81cf-43b6-a754714f767b.png)
「.ttf」ファイルを右クリックメニューの中からインストールでも可
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536171/9e9d3485-c71a-ae46-d529-f9eacad85212.png)
以下でも可
Windowsの検索欄で「フォント」と入力すると表示されるフォント設定を選択後、表示されるフォントの追加欄に「.ttf」ファイルをドラッグアンドドロップでも可
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536171/0d399fbb-b377-f402-a244-334a305b5987.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536171/d668f397-9f9d-88fd-00df-eea9f89a5a86.png)

### インストール：Macの場合
***
[github](https://github.com/tonsky/FiraCode) のページの中にある以下を押下してフォントをダウンロードします。記事作成時のverは5.2でした。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536171/aed45600-39f6-970d-579b-19492dc9db55.png)
ダウンロードしたzipを任意のフォルダに解凍する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536171/955c5d29-d33a-b445-715a-c68b73aab3c3.png)
解凍したフォルダを開いて、ttfフォルダを開きます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536171/bfa5badc-6df0-f1ac-d076-7eda59999b24.png)
中に入ってるttf拡張子のファイルを全て選択する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536171/28f60133-db6e-a00d-b476-63cf77583b0f.png)
右クリックメニュー > このアプリケーションで開く > Font Book.appを押下する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536171/60ddad6f-5838-eb83-0700-743540d14917.png)
以下の画面でフォントをインストールを押下します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536171/d30bb6df-d442-a527-d1fa-970b9da4a112.png)

### VisualStudioCodeの設定
***
ファイル > ユーザー設定 > 設定　を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536171/a8e133bf-6e50-4913-276f-4ee7e1246fcc.png)
表示される設定画面上部の検索欄に「フォント」と入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536171/4dfb7359-ece8-a97c-e9a3-02efa9491443.png)
検索欄以下に表示される「Editor:Font Family」の入力欄に「Fira Code」を追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536171/2aaff16a-73d9-0297-73b7-9d8c82516ad9.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536171/ac59f3f9-077d-5778-695e-ce16dd0372e2.png)
検索欄以下に表示される「Editor:Fot Ligatures」欄に表示されている「setting.jsonで編集」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536171/d0d77407-011d-4503-48d7-52926dea01d3.png)
表示される「setting.json」で`"editor.fontLigatures": null`を`"editor.fontLigatures": true`に変更して上書き保存します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536171/a415de4d-cb58-01b1-4dd6-063d6832bd17.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536171/830d7c5a-3689-14a0-afd0-4213479c0aae.png)
`Ctrl`+`Shift`+`P`のショートカットコマンドで表示される入力欄に`reload`と入力すると候補として表示される`Reload Window`を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536171/b89af6c1-7a04-edb1-a2a4-23ebd593ea80.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536171/e4cdaff4-16c0-7cf3-9814-d6c3ee3eca49.png)
以下のように設定されたフォントとリガチャの設定が反映されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536171/07f62427-0385-e490-9191-5a6963817b67.png)

### WebStormの設定
***
メニュー > Fileを押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536171/adabf30c-de91-9b6b-a025-ff5d3f6cb3db.png)
File > Settingsを押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536171/b45bc4ce-c3ab-29de-7661-2574a69809a3.png)
Settings画面の Editor > Fontを押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536171/fc9811b7-fdb6-b963-062b-533f1426ba4f.png)
Fontに`Fira Code`を入力して、`Enable Ligatures`を`ON`にしてApplyとOKを押下します。※`Enable Ligatures`を`OFF`でリガチャは使用しない設定になる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536171/096c642c-c055-8d1c-67ab-9599b22c446a.png)
こんな感じで利用できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536171/4097f6c4-d82b-8d80-df59-e0733d27d8e0.png)

### さくらエディタの設定
***
※リガチャは利用不可？ぽい
メニュー「設定」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536171/98522d19-65be-6b2a-7474-16ce04dcf152.png)
設定 > フォント設定を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536171/54bbf366-b089-9d66-5e57-da82f5be7d80.png)
フォント設定画面で`Fira Code`と入力して、OKを押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536171/c19f4786-13d1-7baf-ebeb-4b97299c171c.png)