深いインデントであっても色付けすれば見やすく「JavaScript Scope Context Coloring」
JavaScript Scope Context Coloringはシンタックスやスコープによる色づけができるJavaScript用ハイライトライブラリです。
JavaScriptのプログラミングではコールバック方式のコーディングが多いため、インデントが深くなりがちではないでしょうか。そこで使ってみたいカラーリングツールがJavaScript Scope Context Coloringです。
[](http://images.moongift.jp/2013/04/Screenshot 2013-04-08 14.12.25.1365407446.png)
分かるでしょうか。スコープによってカラーリングが変わっています。
[](http://images.moongift.jp/2013/04/Screenshot 2013-04-08 14.12.29.1365407451.png)
こちらは通常のシンタックスによるカラーリング。
[](http://images.moongift.jp/2013/04/Screenshot 2013-04-08 14.12.47.1365407455.png)
さらに分かりやすくするとこんな感じに。8階層までサポートされています。
インデントがあまり深くなると可読性が下がるために個人的には好きではないのですが、深くなってしまうのであればそれに向いた見せ方があると思われます。変数のスコープも色づけで分かるようになったりすると変な不具合が紛れ込まなくなっていいかも知れません。
JavaScript Scope Context ColoringはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。
MOONGIFTはこう見る
JavaScriptはスコープやプロトタイプなどがあって非常に分かりづらい印象を受けます。表面的なコーディングはできても、深淵の部分にまで踏み込むと突然不具合だらけになる印象です。だからこそJavaScriptを生成するプログラミング言語が必要とされるのでしょう。
しかし今後のWebを考える上でJavaScriptは決して避けることができません。CoffeeScriptやTypeScript、Dartで全てのプロジェクトがまかなえる訳ではありません。逃げず取り組むためにも、より可読性の高いJavaScriptを組むようにしましょう。