スマホのハイブリットアプリを作る際に準備したJavaScriptの静的解析ツール とSublimeプラグイン

はじめに

現在、私は業務でmonacaを用いてハイブリットアプリ開発を行っています。
そのため、言語はHTML5/JavaScriptをベースとして、FWにAngularJSとOnsen-UIを用いた開発を行っています。
HTML5/JavaScriptなので、エディタはSublime Textを用いて開発を進めているのですが、
今回は私が開発を進める中で困った「Sublimeのプラグイン探し」と「JavaScriptの静的解析ツール決め」の話をしたいと思います。
(最近、monacaやCordovaを用いたハイブリットアプリ開発が流行っているので、少しでも本記事が役立てばと思っています。)

※ 「そもそも、AngularJSやOnsen-UIとは何だ?」という方は下記をご覧ください。
AngularJSとは
Onsen-UIとは

環境情報

Sublime Text3(build 3126)

困ったこと①：JavaScript向け(特にAngularJS向け)のSublimeプラグインが見つからない

早速開発しようと思ったのですが、意外にもJavaScript向けのSublimeプラグインが検索してもあまり出てきませんでした。
(AngularJS向けになると更に見つかりませんでした。。。)
そのため、ここではJavaScript向け(AngularJS含む)のオススメSublimeプラグインをまとめたいと思います。

JavaScript Completions

JavaScriptの入力補完を行ってくれるプラグインです。
それなりに強力な入力補完で、jQueryやCSSにも対応しています。
(ただし、jQueryやCSSはデフォルトでは対応していないため、設定が必要です。)

JavaScript Console

JavaScript Consoleはブラウザが実装しているConsole APIに特化した入力補完を行います。
Console APIはデバック時に非常に良く使うので、入れておいて損はないと思います。
使い方は>の後に、consoleのメソッド名を入力して、tabキーで展開するだけです。
例)>log→tabキー押下→console.log('');
といった具合です。
展開できるConsole APIは本家のサイトにまとまっています。

jQuery

jQueryのパッケージをインストールすると、jQueryのコード補完が利用できるようになります。
構文を忘れてしまった場合も、適当に2,3字入力して補完ダイアログを表示させて思い出すということもできます。
(ググる手間が省けてGood!)

AngularJS

AngularJSのコード補完を行うパッケージです。
基本的なHTMLタグのディレクティブやAngularJSのコード補完はインストールすることで利用することが出来ます。
かなり詳細に設定可能で、詳しくはGitHubを参考に

困ったこと②：JavaScriptの静的解析ツールをどれにすれば良いかわからない

JavaScript用の静的解析ツールは調べてみると、代表的なモノとしてJSLint/JSHint/ESLintがありました。
JavaScript初心者で静的解析ツール初体験の私は、まず上記3つの違いから調べ、使用するツールを選定しました。

JSLint

2007年にリリースされたJavaScriptの静的解析ツールとしては最も歴史あるツールです。
公式ページはこちら。
非常に厳格なチェックが行われるのが特徴です。
どの程度厳しいかと言うと、JSLintの公式ドキュメントに
「Warning: JSLint will hurt your feelings.」(警告!JSLintはあなたの気持ちを傷つけるだろう)という脅し文句が書かれている程です。
しかし、非常に厳格にチェックしてくれるため、JavaScriptの正しいコーディング作法が身に付くことが期待できます。

JSLintの弱点は独自のルールを設定できない点と既存のルールを緩めることが出来ない点(つまり、既存のルールを外すか適用するかしなく、その中間の設定が出来ない)です。
そのため、プロジェクト独自のルールが適用できない点やルールの調整が出来ない点からJSLintの使用は断念しました。
(気持ちが傷つかなくて、良かった…と密かに思いました。)

JSHint

2011年にリリースされたJSLintから厳格さを取り除き、より柔軟に設定を行うことが出来るように誕生した静的解析ツールです。
公式ページはこちら。
上記のような開発思想ゆえデフォルト設定によるチェックは比較的甘いです。
そのため、適切な設定を自分で行う必要がある。(設定はJSON形式で行う。)
JSHintの特徴としてAtom/Sublime/Vim/Emacsなど様々なエディタでプラグインが配布されているため、エディタでチェックを実行することができます。また、SaaSからJSHintを実行することができるのも特徴です(SideCIやHoundCIなど)。

JSHintの弱点はJSLint同様独自のルール設定が出来ない点とインデントのスペース数などのコーディングスタイルに関するチェックを行う事が出来ない点です。
プラグインとしてエディタで使用できるのは魅力的だったのですが、コーディングスタイルに関するチェックが行えないのはチーム開発の中でコーディングのブレを生む可能性が高いので、JSHintの使用は断念しました。

ESLint

ESLintは2013年にリリースされた静的解析ツールです。
公式ページはこちら。
最大の特徴はルールの拡張を自由に行うことが出来ることです。
そのため、自分のプロジェクトに合わせたカスタムルールを作成することが出来、
JSHintでは出来なかったコーディングスタイルに関するチェックも行う事ができます。
また、JSLint/JSHintの互換ルールもデフォルトで用意されているため、JSLint/JSHintからの移行も簡単です。
そして、それぞれのルールはルール名で区別され、1つ1つ個別にON/OFF設定することが出来ます。
ESLintはJSHint同様、AtomやSublime Textといったエディタにプラグインとして組み込むことが出来るのも特徴の一つです。

ESLintの弱点は実行速度がJSHintに比べて遅いことです。
具体的には、JSHintに比べて1ファイル当たり2~3倍の時間が掛かります。
とはいえ、それでも十分実用には耐えうるレベルの速度なので、今回はESLintを採用することにしました。

まとめ

上記のSublimeプラグインをチームに横展開した結果、各開発者の生産性は上昇し、
静的解析ツールのおかげで、チーム開発の際のコーディングのブレも減り、コードの可読性や保守性が担保されるようになりました。
「もっとこうした方が良い」という意見がありましたら、遠慮なくお願い致します。

今後

ソースコードの可読性や保守性が上がっても、テストコードがなければカバレッジが取れてるとは言えません。
そのため、今後は効率の良いハイブリットアプリのテストの方法の知見を深めていきたいと思います。

参考サイト

Sublime PackageControl
JSLintを使おう
JavaScript用lintツール、JSHintとそのおすすめ設定(jshintrc, jshintignore)
時代はESLint。JSLintでもJSHintでもなくESLint