Edited at

コーディング用フォント「 Cascadia Code」の紹介

VS CodeでMicrosoft社が開発した開発環境向けの等幅フォント「Cascadia Code」を使ってみたところ、Font Liguatureによって===や'>='の表示が非常にわかりやすくなった。特にJavaScriptやTypeScriptなどで頻繁に使用される===と==の違いや、!==と!=の違いを際立たせてくれるので、これらの言語を書く機会がある人は是非とも試してほしい。


Cascadia Code

Cascadia CodeはMicrosoftが開発した開発環境向けの等幅フォントである。Windows Terminalでモダンなルック&フィールを提供する目的で設計した。Windows Terminalの開発コードがCacadiaだったことから、この名称が付けられている。

リガチャー(合字)をサポートし、コードエディタや開発環境向けとしている。ライセンスはOpen Fontライセンスである。


Font Liguature(合字)とは?

Font Ligature(以下、日本語で合字と表記する)とは2つ以上の文字を1つの文字に合体させたもので、記号をわかりやすく表示できる。

特に、プログラミングコードには多くの記号が必要なうえに、頻繁に組み合わせて使用するので、合字を使用できる利点は大きい。例えばJavaScriptでは、2つの値が同じかどうかを比較する等価演算子として、=を2つ並べて次のように記述する。

a == b

しかし、javascriptではややこしいことに、等価演算子==と厳密等価演算子===の2種類の等価演算子があり、間違えやすい。

そこで、1つの意味を1つの文字で表してコード全体の可読性向上を図るのが、合字である。合字を用いると、前述の等価演算子の違いは下記のように記述できる。

image.png

なお、合字はあくまで「フォントの見た目」を変えるだけであり、コードそのものを書き換えるわけではない。合字によってコードが書き換わってしまうことはないので安心してほしい。


Cascadia Codeフォントをインストールする



  1. https://github.com/microsoft/cascadia-code/releases からCascadia.ttfをダウンロードする。

  2. ダウンロードしたファイルをクリックすると、Fontの表示画面が開くので、その画面にあるインストールボタンをクリックする。


Visual Studio Codeで有効にする


  1. メニューバーのFile > Preferences を選択して設定画面を表示する。

  2. 設定画面左のText Editor > Font を選択する。

  3. Font Familyの欄に'Cascadia Code', Consolas, 'Courier New', monospace と入力する。

  4. Font Ligaturesの欄にチェックを入れて有効にする。

  5. VS Codeを再起動する。