静的解析で設定しておきたいルールを解説

Hiroyuki Kikuchi

2023.10.30

Technology部の菊池です。

この記事では静的解析で設定しておきたいルールについて解説します。

なお、チェックに使用する静的解析ツールは「ESlint」を使う前提で記載しています。技術選定を実施するアーキテクトやSE、テクニカルディレクターの方のご参考になれば幸いです。

静的解析が必要な理由

静的解析とは、プログラムを実行することなくソースコードに問題がないかを検証する手法のことを指します。静的解析が必要な理由は以下の通りです。
※ESlint以外でルール設定が可能な項目に関しても記載しています。

まず、コードの構造や書き方に関する問題をチェックしてコードの品質を向上させることで、保守性や拡張性を高める目的があります。

たとえば、コンポーネント、ファイル、メソッド、クラスの追加が発生した際も対応しやすいように整える、修正時に他のクラスやコンポーネント、モジュールへの影響を発生させないようにするといった意図です。

エンジニアによってコーディングされたコードが、コーディング規約に従って書かれているかどうかもチェックできます。

コーディング規約に従って書かれたコードは可読性が高く、ひいては保守性の向上にもつながります。

悪意のあるユーザーによるSQLインジェクションやXSS攻撃などを仕掛けられるリスクに備え、セキュリティの観点でコードが問題ないかを検出するという目的もあります。

なお、セキュリティチェックを実施するためには、Coverityなどの静的解析ツールを利用します。

メモリリークの危険の発見、セミコロンの欠落など、バグのリスクになりうる要素の早期発見につなげる狙いもあります。

静的解析はPull Request実施時のCI／CDにおいて実施することで、レビュー時にエンジニアが事前確認することが可能です。

結果として、本流ブランチの品質担保につなげることができます。

ESlintでは、特定のコーディングスタイルや、フレームワークに対するルールパッケージがプラグインとして提供されています。

パッケージ名	説明
eslint-config-airbnb	AirbnbのJavaScriptスタイルガイドに基づくESLint設定。ReactやJSXもサポートしています。
eslint-config-google	GoogleのJavaScriptスタイルガイドに基づくESLint設定。
eslint-config-standard	JavaScript Standard Styleに基づくESLint設定。シンプルで一貫性のあるスタイルが特徴です。
eslint-config-prettier	PrettierとESLintが競合しないように、Prettierと互換性のあるルールセットを提供するESLint設定。
eslint-plugin-react	Reactのベストプラクティスとアンチパターンに対するルールを提供するプラグイン。
eslint-plugin-jsx-a11y	JSX要素のアクセシビリティルールを提供するプラグイン。
eslint-plugin-import	ES2015+のimport/export構文に関するルールを提供するプラグイン。
eslint-plugin-node	Node.jsのベストプラクティスと標準スタイルに関するルールを提供するプラグイン。