日本語が見やすいプログラミング用フォント集 (NerdFontとFiraCodeもあるよ)

コード書く気にならない時はフォントを弄ってモチベを上げよう
プログラミング用のフォントたち
1. フォント選びのポイント
2. フォントの使い方
おすすめフォント集
最後に比較用のまとめ
1. 皆さんの好みのフォントは見つかりましたか?

コード書く気にならない時はフォントを弄ってモチベを上げよう

こんにちは～! いきなりですが、コード書いてますか?

私は今年からもっぱらコーディング作業ばっかりで、ほとんど実験をしなくなりました。

今週は特に会議・打ち合わせが極端に少なく、大好きなコーディング作業が捗ったのはいいものの、今週末はもうコード書きたくないわ💢😠🙅‍♂️となるレベルでした。

ということで今回、やる気が出ないのでとりあえず見た目をかっこよくしてモチベを上げることにしました 😙

プログラミング用のフォントたち

いきなりですが、プログラミング向けのフォントが存在するのはご存じでしょうか?

WinOSに標準で入っているconsolasとかはご存じかもしれませんが、少しフォント好きな方ならfiracodeあたりもご存じかと思います。

私もfiracodeでこの二年以上満足していたのですが、ブログを書くようになってから日本語の見た目が気になって仕方が無い病になってしまいました・・・

調べてみたところ、既存のオープンソースフォント(firacodeなど)と日本語フォントを合成したフリーフォントなどが結構な種類あって、テンション上がっちゃいましたので、おすすめどころを紹介しようと思います🔥

フォント選びのポイント

「プログラミング　フォント　日本語」でググれば、良さそうなフォントが沢山でてきます。が、あまりに種類が多くて選ぶのは結構しんどいと思います。

💡フォント選びでは以下の点を抑えておくと良いでしょう💡

日本語フォントを取り入れているか

今回調べてみて思ったのですが、日本語フォントを組込んでいるかどうかは結構大事です🀄

特に指定をせずにただfiracodeを使っていると、メイリオあたりが勝手に使われると思いますが、勝手に使われるメイリオと英数字のフォント幅バランスや、フォントの雰囲気などが英数字と調和しないケースが多々あります。

有名どころのオープンソース日本語フォントは限られていますので、以下のフォントが組み込まれているかどうかが見極めポイントではないでしょうか。

源ノ角ゴシック (Source Han Sans)
IPA
M+
Plex

文字幅

日本語フォントにこだわったフォントファミリーは英数字と日本語の幅が一定のルールでそろえられています。

多いパターンとしては、①日本語:英数字=2:1、または②日本語:英数字=5:3、のどっちかだと思います。

これは完全に好みだと思いますが、この文字幅にこだわりすぎると異様なくらい英数字が細長いものになってしまいます。

私は最初2:1比フォントを好んで使っていましたが、最近は英数字もある程度の幅がある5:3フォントを使っています。

注意

こういう文字幅はフォント作成者の方が頑張って文字幅を揃えてくれた結果なので、日本語フォント調整がされていないfiracodeなどではこの文字幅にはなりません。

Nerdfontが入っているか

Nerdfontは特殊なアイコン集です。

Nerdfontを意識的に使う機会はほとんど無いですが、ターミナルの装飾には欠かせません。

powerlevel-10kやoh-my-poshを使用している場合は必須になりますので、ターミナルで使用したいなら要チェック。

フォントリガチャーが入っているか

フォントによってはFiracodeのリガチャー(合字)を組み込んでくれている場合があります。

私はfiracode愛用歴が長いので、<-がきれいな矢印マークになってくれないとかなり寂しい思いをします。

フォントの使い方

オススメフォントを紹介する前に、VSCodeやRstudioでのフォント設定方法を説明しておきます🔰

Rstudioデスクトップ版

GitHubなどで配布されているフォントファイル(.ttf, .ttc)をインストールしてからアプリを再起動すれば使用可能になっていると思います。

Tools -> Global Options -> Appearence -> Editor Fontから変更可能です。

Rstudio-server

WSL、Linux問わずRstudio serverの場合、フォントのインストール先に一癖あります🛠️

/etc/rstudio/fonts以下にフォントをコピーするのが一つの方法ですが、root権限が無いとこのフォルダに書き込むことはできません。

管理者権限がない場合は~/.config/rstudio/fonts以下へのコピーでも問題ありません。

この方法については以下のブログにて知りました(感謝…!)

RStudio Serverで任意のフォントを使用する - mana.bi

RStudio Server (のエディタ部分) で任意のフォントを使用する方法を紹介します。

VisualStudio Code

VSCodeではsettings(UI)かsettings.jsonへの記入をすることになりますが、フォントファミリー名を一言一句間違えずに自分で書く必要があります

このフォントファミリー名をどう調べるか?が問題です🤔

私は今Macを使っていないので確認方法は分かりませんが・・・Windowsでは以下のようにします。

まず、コントロールパネル -> フォントからフォント一覧を開きます。

普通のエクスプローラー画面が開けばOKです。

Info

前回紹介したOneCommanderで標準エクスプローラーを変更していた場合、このフォント設定画面がうまく開かない現象が発生することを確認しています。この設定を解除するか、右クリックから「開く」によりエクスプローラーを使用することで回避できます。

この画面が開いた後、表示を「詳細」に切り替えて、「ファミリー」を表示させます。

あとはファミリー名を設定に記入すればOKです。参考までに私の設定は以下です。

    // "editor.fontFamily": "Ricty Diminished Discord with Fira Code",
    "editor.fontFamily": "UDEV Gothic 35NFLG",
    // "editor.fontFamily": "Firge35Nerd",
    // "editor.fontFamily": "HackGen35Nerd",
    // "editor.fontFamily": "Cica",
    // "editor.fontFamily": "源ノ角ゴシック Code JP"
    // "editor.fontFamily": "源暎モノコード",
    // "editor.fontFamily": "Myrica M",

コメントアウトを外せばそのまま使えます👍

Info

うまく反映されない場合はVSCodeを再起動しましょう。