はじめに
今どきのエンジニアの皆さんは、GitHub CopilotやChat GPTの支援を受けながら日々コードを書かれておられるかと思います。私も滅茶苦茶使っています。最高ですよね。
最高なんですが、必ずしも最高に品質が高いコードを書いてくれるわけではない…。
そう感じたなら、是非SonarLintを試してみてほしいです。
SonarLintとは
SonarLintは、SonarSource社が開発した静的コード解析ツールで、主にコード品質の向上を目的としています。SonarLintは、Eclipse、IntelliJ IDEA、Visual Studioなどの主要なIDE向けにプラグイン形式で提供されており、SonarQubeのルールに基づいてリアルタイムでコードの問題を検出します。
https://www.sonarsource.com/products/sonarlint/
ESLintと何が違うの？
それぞれ以下のように得意分野が違います。
-
ESLint
- JavaScriptに特化した静的解析ツールで、コーディング標準の強制や潜在的な問題の特定を行います。
-
SonarLint
- 複数のプログラミング言語に対応しており、セキュリティ脆弱性やコードの重複、アーキテクチャの問題などを検出します。
ですので、私は両方入れています。
ちなみにSonarLintはエディタのプラグイン形式で提供されますので、ESLintのようにプロジェクトのpackage.jsonでは入ってきません。個人で導入する必要があります。
それでは、SoanrLintの何がいいのかを見ていきましょう。
SonarLintが指摘してくれる内容の具体例（VSCodeの場合）
コードの認知的複雑性が高い箇所を指摘
こんな感じで、異常なネストが発生していたとします。
export function Test () {
let flg1, flg2, flg3, flg4, flg5, flg6 = true;
if(flg1) {
if(flg2) {
if(flg3) {
if(flg4) {
if(flg5) {
if(flg6) {
return "test";
}
}
}
}
}
}
}
すると、お前のソースは読みづらいんじゃい！と指摘してくれます
修正例
export function Test(){
let flg1, flg2, flg3, flg4, flg5, flg6 = true;
if(flg1 && flg2 && flg3 && flg4 && flg5 && flg6) {
return "test";
}
}
異常なネストが解消され、読みやすくなりました
イミュータブルであるべき値はreadonlyにしろと叱ってくれる
こんな風にPropsを定義すると…
inteface Props {
userName: string;
}
export function TestComponent (props:Props) {
// 以下略
}
componentのpropsはreadonlyであるべきやろがい！と叱ってくれます😂
修正例
inteface Props {
readonly userName: string;
}
export function TestComponent (props:Props) {
// 以下略
}
そもそもpropsはイミュータブルなのでは…1とか、propsを上書きするコード書くなよとは思いますが…
私はこの指摘で、interface型にreadonlyが付与できることに気づきました。
その演算子で大丈夫か？と指摘してくれる
こんな感じで、値が無い場合は空文字を入れる処理を書いたとします。
const userId = session?.userId || "";
すると、falsyな値で引っかけるのは危ないで！と駆けつけてきます。
修正例
const userId = session?.userId ?? "";
TODOコメントを残すな😡
そのまんまです。コード内にTODOコメントが残っていると、こんな風に指摘してくれます、
いかがでしょうか？
これはほんの一例ですが、ESLintとは役割が違うということはお判りいただけたと思います。
正直、全部の指摘に従って書くのは厳しいときもありますが、「固い」コードを書きたいときは非常に参考になりますし、「なんとなく」で書いていたコードからワンランク上を目指したいときは、非常に心強いパートナーになってくれると思います。
-
完全なイミュータブルではない ↩