前の記事でカルーセルが干渉しちゃった話をしたんですが、それと同時にGithubでもエラーがでまして…。
- ESLintで未使用変数を検出し、コード品質を維持
- CI/CDに組み込んで品質を強制的に担保
環境
- Swiper.js 11.x
- HubSpot CMS（カスタムモジュール）
- ESLint 8.x
- GitHub Actions
ESLintによるコード品質管理
修正後のコードをGitHubにプッシュしたところ、ESLintエラーが発生しました。
ESLintエラー内容
Error: 6:41 error 'index' is defined but never used no-unused-vars
Error: 74:9 error 'swiper' is assigned a value but never used no-unused-vars
問題のコード
エラー1: 未使用のパラメータ
// ❌ 問題のあるコード
allCarousels.forEach(function(rootEl, index) {
var allSlides = Array.from(rootEl.querySelectorAll('.swiper-wrapper > .swiper-slide'));
var slideCount = allSlides.length;
// indexを一切使っていない
});
問題点：
-
forEachの第2引数indexを受け取っているが使用していない - コードレビュー時に「これ必要？」と混乱を招く
- メンテナンス性が低下
エラー2: 未使用の変数
// ❌ 問題のあるコード
var swiper = new Swiper(rootEl, swiperConfig);
function highlightActiveSlide(sw) {
// swiper変数を使わず、sw引数を使用
}
問題点：
-
swiper変数に代入しているが、その後参照していない - インスタンス化は必要だが変数保持は不要
修正方法
修正1: 不要なパラメータを削除
// ✅ 修正後
allCarousels.forEach(function(rootEl) { // indexを削除
var allSlides = Array.from(rootEl.querySelectorAll('.swiper-wrapper > .swiper-slide'));
var slideCount = allSlides.length;
// ...
});
修正2: 変数への代入を削除
// ✅ 修正後
new Swiper(rootEl, swiperConfig); // 変数に代入せず直接実行
function highlightActiveSlide(sw) {
// コールバック内で渡されるswを使用
}
なぜESLintが重要か
1. 可読性の向上
// ❌ ノイズが多い
function process(data, options, callback, debug, verbose) {
return data.map(x => x * 2); // optionsとか使ってないじゃん...
}
// ✅ 意図が明確
function process(data) {
return data.map(x => x * 2);
}
2. バグの早期発見
// タイポによる未使用変数
var userName = 'Alice';
console.log(usrName); // undefined（タイポ）
// ESLintが「userNameが未使用」と警告
3. リファクタリングの支援
- 不要なコードを削除しやすい
- 依存関係が明確になる
CI/CDへの組み込み
GitHub Actions 設定例
name: Lint and Deploy
on:
push:
branches: [main]
jobs:
lint:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: '20'
- run: npm install
- run: npm run eslint # ここでエラーチェック
deploy:
needs: lint # lintが成功したら実行
runs-on: ubuntu-latest
steps:
# デプロイ処理
ポイント：
- lintジョブが失敗するとデプロイされない
- コード品質を強制的に担保
ESLint設定のベストプラクティス
// .eslintrc.js
module.exports = {
rules: {
'no-unused-vars': ['error', {
'argsIgnorePattern': '^_', // _で始まる引数は許可
'varsIgnorePattern': '^_',
}]
}
};
意図的に未使用にする場合：
// _プレフィックスで「意図的に未使用」を明示
allCarousels.forEach(function(rootEl, _index) {
// indexは必要ないが、シグネチャ的に残したい場合
});
まとめ
コード品質管理
✅ 未使用変数/パラメータは削除する
✅ ESLintで自動検出してコード品質を維持
✅ CI/CDに組み込んで品質を強制
✅ 意図的に未使用にする場合は_プレフィックスで明示
教訓：
「動けばいい」ではなく「読みやすく、メンテしやすく、拡張しやすいコード」を目指すことで、長期的な開発効率が向上します。（とCursorが言ってました）