CI環境を構築して「ESLint」で静的解析を実行してみよう

設計／手法／テスト

技術解説

連載 [第24回] :

DevOpsを実現するために行うこと・考えること

2024年7月26日(金)

石本達也

実践編第8回の今回は、「Dev Containers」でCI環境を構築し、静的解析ツール「ESLint」で静的解析を実行するまでの流れを解説します。

はじめに

第23回では、テストツールの「Jest」と「Testing Library」を使って、CIで自動テストを実行する方法について学びました。

今回は、テストツールと同じくらいCI環境でよく実行されている静的解析ツール「ESLint」」を使って、静的解析を行う際のツールの準備からCI環境で実行するまでの流れを解説します。

事前準備

まず、前回と同様に開発環境の準備から始めましょう。今回もDev Containersを使って構築します。詳しい手順については、第19回を参照してください。

開発環境が準備できたら、次のコマンドを実行してプロジェクトを作成します。前回と同様にディレクトリを移動して、アプリケーションが実行できるところまで確認が済んでいるところからスタートします。

`1`	`npm init vite my-app -- --template react-ts`

ESLintのインストール

Webブラウザを開いてtypescript 静的解析などと検索すると様々なツールが出てきますが、今回はよく使用されているツールの1つであるESLintを使います。次のコマンドを実行して必要なパッケージをインストールしましょう。

`1`	`npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin`

インストールができたら、eslintのコマンドが実行できるか確認します。

`1`	`npx eslint -v`

ESLintには200以上のルールがあり、必要なものを有効にして設定を変更しながら個人やチームの開発スタイルに会うようにカスタマイズしていきますが、さらに力強くサポートしてくれるような新たなルールを1から育てていくことはかなりの労力と時間を要してしまいます。

そのため既に成熟しているルールを導入するという方法もありますが、これから入門しようと考えている方にはあまりお勧めしません。参考までに紹介すると、Airbnbなどが公開しているスタイルガイドに準拠した形でESLintの設定がパッケージとして公開されています。

既存プロジェクトに導入するとエラーが多発して解消するまでに苦労しますが、最初を乗り越えられると非常に使いやすいパッケージではあるので、興味がある方は試してみてください。

今回は、エラーの表示などが簡単になるように、前述したようなパッケージを使わず、1から設定を有効にしてみます。

ESLintを使うために必要な設定ファイルを準備します。
view source
print ?
1 touch tsconfig.eslint.json
ファイルが作成できたら、先ほど作成したtsconfig.eslint.jsonに次の内容を記述して保存します。
view source
print ?
1 {
2     "extends": "./tsconfig.json",
3     "compilerOptions": {
4         "allowJs": true
5     },
6     "include": ["src", ".*.js", "*.js", "*.cjs"],
7 }
ファイルを保存し、次のコマンドを実行して記述した内容が反映されているかを確認します。
view source
print ?
1 npx tsc --showConfig --project tsconfig.eslint.json
既にある.eslintrc.cjsファイルに次の内容を追記します。変更していない一部のコードは省略しています。
view source
print ?
01 module.exports = {
02    ],
03    ignorePatterns: ['dist', '.eslintrc.cjs'],
04    parser: '@typescript-eslint/parser',
05 - plugins: ['react-refresh'],
06 + plugins: [
07 +    'react-refresh',
08 +    '@typescript-eslint'
09 + ],
10    rules: {
11      'react-refresh/only-export-components': [
12        'warn',
13        { allowConstantExport: true },
14      ],
15 +    '@typescript-eslint/quotes': ['error', 'double'],
16 + },
17 + parserOptions: {
18 +    ecmaVersion: 'latest',
19 +    sourceType: 'module',
20 +    project: './tsconfig.eslint.json',
21 +    tsconfigRootDir: __dirname,
22    },
23 }
ファイルを変更できたら、次のコマンドを実行して静的解析を実行します。
view source
print ?
1 npx eslint .
静的解析を実行後にエラーの一部を見てみると、次のように表示されています。
view source
print ?
1 /Users/ismt7/Documents/works/thinkit/thinkit2-4-2/src/App.tsx
2   1:26 error Strings must use doublequote @typescript-eslint/quotes
3   2:23 error Strings must use doublequote @typescript-eslint/quotes
4   3:22 error Strings must use doublequote @typescript-eslint/quotes
5   4:8   error Strings must use doublequote @typescript-eslint/quotes
Strings must use doublequoteはダブルクォート(")が使用されていないことで表示されているエラーです。.eslintrc.cjsで追加した@typescript-eslint/quotes': ['error', 'double']のルールが効いていることが分かります。

エラーを解消してみましょう。エラーが表示されているファイルを開き、シングルクォート('）になっている箇所を探して修正します。ただし、数が多い場合には1つ1つ修正していくのは大変なので、事前にESLintの自動修正機能を実行してみます。

`1`	`npx eslint src/App.tsx --fix`

自動修正を実行すると、次のように変更されました。今回は自動修正機能で上手くいきました。

01-import { useState } from 'react'
02-import reactLogo from './assets/react.svg'
03-import viteLogo from '/vite.svg'
04-import './App.css'
05+import { useState } from "react"
06+import reactLogo from "./assets/react.svg"
07+import viteLogo from "/vite.svg"
08+import "./App.css"
09  
10 function App() {
11   const [count, setCount] = useState(0)

ここでもう1度静的解析を実行してみると、先ほど表示されていたエラーが消えていることを確認できました。

`1`	`npx eslint .`

今回は紹介しませんが、Visual Studio Codeの拡張機能を活用することでエディタ上にリアルタイムで警告を表示できるほか、ソースコードを保存するときにESLintのルールに反したコードを自動的に修正する機能もあります。これらを活用することで、毎回コードのフォーマットを意識することなく、綺麗なコードを書けるようになります。

CIで静的解析ツールを動かしてみよう

ここから、実際にCI環境でESListを動かして行きましょう。GitHub Actionsの公式ドキュメントにあるサンプルコードをベースにして書き換えます。

.github/workflows/actions.ymlにファイルを作成します。
view source
print ?
01 @@ -2,7 +2,7 @@ name: GitHub Actions Demo
02 run-name: ${{ github.actor }} is testing out GitHub Actions 🚀
03 on: [push]
04 jobs:
05 - Explore-GitHub-Actions:
06 + Lint:
07      runs-on: ubuntu-latest
08      steps:
09        - run: echo "🎉 The job was automatically triggered by a ${{ github.event_name }} event."
10 @@ -16,3 +16,9 @@ jobs:
11          run: |
12            ls ${{ github.workspace }}
13        - run: echo "🍏 This job's status is ${{ job.status }}."
14 +      - name: Install packages
15 +        run: |
16 +          npm ci
17 +      - name: Run linter
18 +        run: |
19 +          npx eslint .
ファイルの作成ができたらGitHubのリモートリポジトリにプッシュします。
CIが動き出し、処理が終わると下図のように何か問題が起きているようなアイコンが表示されます。
エラー箇所を見ると、ESLintの実行部分で警告が表示されていることが確認できます。