デジタルイノベーション推進室のbenishougaです。昨今、コード品質を保つために静的解析ツールを導入しているプロジェクトも多いと思います。本記事では、クレスコで新しく取り扱い始めたSonarQubeの紹介も兼ねて、自身が社内で推進しているWeb Frontend技術で良く使われるESLintと比較します。
目次
- ツールの概要
- SonarQubeとESLintの比較
- 使いどころの整理
- まとめ
1. ツールの概要
- ESLintとは
ESLintはJavaScript/TypeScript向けのオープンソースの静的解析ツールで、コーディング規約やベストプラクティスから外れたコードを検出します。OSSのツールで、Reactなどの開発で広く使われており、エコシステムが育ち、多くのプラグインが作られています。コマンドラインから利用し、結果を表示するのが基本ですが、IDE用のプラグインでリアルタイムに問題を表示することもできます。
- SonarQubeとは
SonarQubeとは、静的解析ツールであり、コード品質改善プラットフォームという側面も持つツールです。スイスのSonarSource社が開発行っており、ESLint同様に規約などのチェックのほか、OSSではカバーしづらい脆弱性や保守性の解析も可能です。SonarQubeは基本的にサーバーを要し、クライアント側のコマンドと連携し、解析を行います。分析結果はサーバーに蓄積され、ブラウザからアクセスし確認できます。SonarQubeもIDE用のプラグイン（SonarQube for IDE）が提供されており、リアルタイムに問題を表示することが可能です。
2. SonarQubeとESLintの比較
以下、観点ごとにESLintとSonarQubeを比較していきます。
- 対応言語
ESLintは、JavaScript / TypeScript を主な対応言語として対応しています。最近では、JSONやMarkdownなどにも対応されたようです。
対して SonarQube はデフォルトで非常に多くの言語に対応しており、JavaScript / TypeScriptに加え、Python、C/C++、Java、Goといった人気の言語、COBOLなどレガシーな言語にも対応しています。最近ではDart、Rustのサポートも進んでいるようです。プログラミング言語以外でDockerや、TerraformなどのIaCにも対応しています。そのため様々な言語／プラットフォームでアプリケーションの開発を行っているプロジェクトや組織で、横断的にチェックできるという強みがあります。なお、対応言語は使用するEditionによって差がある点、注意ください。
- 検出内容
概要でも記載しましたが、ESLintはコーディング規約やベストプラクティスから外れたコードを検出します。
SonarQubeではESLint同様の規約やプラクティスを元にした検出に加え、品質低下の兆候を示すコードスメルや、セキュリティ脆弱性も検出します。コードスメルや脆弱性の検出は、ESLintでもプラグインで可能ですが、SonarQubeと同等のルールセットとするためには、非常に多くのプラグインを要し、その設定や管理は煩雑なものになってしまいます。
またSonarQubeではコードカバレッジや、重複コードの有無なども情報として収集し、トラッキングされます。このあたりはコード品質改善プラットフォームとしての側面からくる機能だと感じます。
- 導入方法
概要で少し触れた通り、ESLintとSonarQubeではその導入方法は大きな違いがあります。
ESLintはJavaScriptの開発で利用されるnpmを使って容易にインストールすることができます。最近では、その導入に以下のような init コマンドを使う方法が主流のようです。
| npm init @eslint/config@latest |
一方SonarQubeはサーバーが必要で、自身でセットアップするか、Sonar社が提供するSaaSを利用します。自身でセットアップする場合は、データベースの用意と、Javaで作られたSonarQube Serverをインストールする必要があります。なおDockerイメージも公開されているので、データベース含めDockerで立ててしまうのが慣れている方には楽そうです。概要で触れたSonarQube for IDEは、静的解析のみの利用になりますが、サーバーと接続せず単体で使うことができます。ただサーバーと接続せずに使う場合、チーム内でのルールの共有ができない点、注意が必要です。
- 分析の実行方法
どちらもCLIやIDEプラグインを用いる点で共通しています。ただしCLIからの実行時は、その結果の確認方法に差があります。ESLintでは実行したCLI上にそのままテキストで出力されるのに対し、SonarQubeでは解析結果をSonarQube Serverに蓄積するため、ブラウザ等でアクセスし確認する必要があります。SonarQubeではCIとの連携も可能で、PullRequestに合わせて解析することや、レビューコメント付与を行うことができます。
- コストについて
ESLintはオープンソースで開発されており、無償で利用可です。
一方SonarQubeは無償のCommunity Editionのほかに、有償のDeveloper EditionとEnterprise Editionなどがあります。Editionごとに対応言語や、サポートしている機能に差があり、より大規模な組織的な品質管理を行いたい場合、より高いEditionを選択するという考え方になります。チーム開発で必要となるPullRequest連携、ブランチごと分析は、Developer Edition以上のEditionで提供されています。
- Reactへの対応について
ESLintとSonarQubeのReactに対するサポートを比較します。
ESLintについて、Reactの公式のガイドではeslint-plugin-react-hooksと、eslint-config-react-appというプラグインが紹介されています。特に、eslint-plugin-react-hooksはReactにおけるHooksの利用規則をチェックし、誤った使用を防ぎます。eslint-config-react-appは現在メンテナンスが滞っているように見えるため、その利用は慎重になる必要がありそうです。他に eslint-plugin-reactがあり、昨今ではeslint-plugin-reactとeslint-plugin-react-hooksを組み合わせて導入しているプロジェクトが多い印象です。
SonarQubeにおいても、Reactに対する専用のルールセットが実装されています。これらはESLintのプラグインでは検出できない誤用、例えばsetState関数による無限ループの問題を指摘してくれます。
3. 使いどころの整理
ESLintは手軽に導入できる反面、特定の言語や領域に特化しているため、使用する技術スタックによっては補完的な役割が必要になることがあると思います。一方、SonarQubeはプロジェクト全体のコード品質を総合的に向上させるための強力なツールですが、導入や運用には一定のコストと知識が必要です。
これらの特徴から、ESLintとSonarQubeは互いに補完し合う関係にあると考えます。小規模なプロジェクトではESLintとSonarQube IDEから活用をはじめ、大規模化または組織的に品質を上げたいとなった場合、SonarQubeを導入することで、プロジェクト全体のコード品質を向上させることができます。特に、セキュリティ脆弱性への対応や保守性の確保、複数言語への対応が求められる状況では両者を併用すれば、より高い品質を維持できるようになると考えます。
4. まとめ
今回はWeb Frontend技術でスタンダードとなっている ESLintと、クレスコで扱い始めたSonarQubeという製品について、比較しながら情報を整理してみました。ESLintがスタンダードとなっているWeb Frontend 界隈の開発でもSonarQubeが十分効果を発揮すると思います。検討の発端になればうれしいです。
