Help us understand the problem. What is going on with this article?

リガチャ(合字)を使ってコードをかっこよくしよう -WebStorm・IntelliJ IDEA編-

More than 1 year has passed since last update.

プログラミングコードには多くの記号が必要です。例えばJavaScriptでは、2つの値が同じかどうかを比較する等価演算子として、=を2つ並べて次のように記述します。

a == b

ある値がある値よりも大きいまたは等しいかどうかを調べるには、>=を用いて下記のように記述します。

a >= b

コードを読む場合、 =という文字が、=単体の意味なのか、==と繋がるのか、脳内で判断をするストレスがあります。

これに対し、1つの意味を1つの文字で表してコード全体の可読性向上を図るのが、リガチャ(合字)です。リガチャを用いると、前述の等価演算子と関係演算子は下記のように記述可能です。

IntelliJ IDEAやWebStormではリガチャを使用可能

JetBrains製のIDEであるIntelliJ IDEAWebStorm等の2016.3では、リガチャを用いることができます。記号と文字を一対一で対応させることができるので、すっきりとコードを記述可能です。

リガチャの設定方法

リガチャは全てのフォントで使えるわけではなく、リガチャに対応したフォントを用いる必要があります。
今回はFira Codeというリガチャ対応フォントを用います。

GitHubにアクセスし、[Solution]→[Download v~]の箇所より、フォントをダウンロードします。

macOSの場合は、**.ttf等のファイルをダブルクリックすればフォントをインストールできます。

WebStormを起動し、[Editor]→[Color & Fonts]→[Font]よりフォント設定ウインドウを開きます。[Primary font]を[Fira Code]に選択し、[Enable font ligatures]にチェックを入れます。

以上で、WebStorm(IntelliJ IDEA)で記述するプログラミングコードにおいて、リガチャが使用可能となります。

(2016/11/25追記)リガチャはフォントの見た目を変えるだけ

本エントリー公開後に質問をいただいたのですが、リガチャはあくまで「フォントの見た目」を変えるだけであり、コードそのものを書き換えるわけではありません

// 等価演算子
a == b

// 比較演算子
a >= b

のコードと、

のコードは、見た目が違うだけで全く同じものです。WebStorm(IntelliJ IDEA)から、リガチャに対応していないエディターにコピペしてみると、リガチャの見た目が解除されるのがわかります。

また、GitHubのフォントはリガチャに対応していないため、前述のコードをGitHubにアップした場合、リガチャの見た目は解除されます。

コードを特殊なものに書き換えるわけではないので、リガチャゆえにプログラムが動作しなくなることはありえませんのでご安心ください。

tonkotsuboy_com
ICSのインタラクションデザイナーです。「JavaScriptコードレシピ集」の著者。CSS Nite 2017・2018でベストセッションの1人に選出されました。 アプリ開発やWebページ制作が専門で、フロントエンドの情報を随時発信しています。猫の名前は「うに」です。九州大学芸術工学部音響設計学科出身。
https://ics.media
ics
インタラクションデザイン専門のプロダクション。最先端のウェブテクノロジーを駆使し、オンスクリーンメディアの表現分野で活動しています。最新のウェブ技術を発信するサイト「ICS MEDIA」を運営。
https://ics.media/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away