ESLintのno-unused-expressionsエラーを効果的に解決する方法

はじめに (対象読者・この記事でわかること)

この記事は、JavaScript開発者でESLintの設定に悩んでいる方を対象にしています。特に、no-unused-expressionsというルールによるエラーに直面している方々に向けた解決策を提供します。この記事を読むことで、なぜそのエラーが発生するのか、そして具体的な解決方法を理解できます。また、不要な警告を抑止しつつもコードの品質を維持するためのベストプラクティスを学ぶことができます。ESLintを適切に活用して、よりクリーンで保守性の高いコードを書くための知識を身につけることができます。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 - JavaScriptの基本的な知識 - npm/yarnの基本的な操作 - ESLintの基本的な概念

no-unused-expressionsルールの基本と背景

ESLintのno-unused-expressionsルールは、式文が副作用を持たない場合に警告を出すルールです。このルールは、意図しないコーディングミスを防ぐために導入されています。例えば、変数の代入を忘れた場合や、関数を呼び出したがその戻り値を使用しない場合などに警告が表示されます。

このルールは、特に大規模な開発チームにおいてコードの一貫性を保ち、バグの早期発見に役立ちます。しかし、意図的に値を破棄する場合（例：Promiseチェーンのcatchブロックでのエラーハンドリング）や、テストコードなどで一時的に不要な式がある場合には、不要な警告が表示されることがあります。

no-unused-expressionsエラーの具体的な解決方法

エラーが発生するコード例

まず、no-unused-expressionsエラーが発生する典型的なコード例を見てみましょう。

Javascript

// エラー例1: 戻り値を使用しない関数呼び出し
doSomething();

// エラー例2: 意図しない変数の代入ミス
x + 1; // 代入ではなく式になっている

// エラー例3: 条件文が式になっている
if (isTrue) console.log("True");

解決策1: コードの修正

最も基本的な解決策は、コードを修正して意図を明確にすることです。

Javascript

// 解決策1.1: 戻り値を使用する
const result = doSomething();
console.log(result);

// 解決策1.2: 正しい代入を行う
x = x + 1;

// 解決策1.3: 明示的な条件分岐
if (isTrue) {
    console.log("True");
}

解決策2: ESLintディレクティブの使用

コードを修正できない場合や、意図的に値を使用しない場合は、ESLintディレクティブを使用して警告を抑制できます。

Javascript

/* eslint-disable no-unused-expressions */
doSomething(); // この行では警告を抑制

// または行単位で
doSomething(); /* eslint-disable-line no-unused-expressions */

解決策3: ESLint設定のカスタマイズ

プロジェクト全体や特定のファイルでルールを無効にすることも可能です。

Javascript

// .eslintrc.js
module.exports = {
    rules: {
        "no-unused-expressions": "off" // ルールを完全に無効化
        // または警告レベルを変更
        // "no-unused-expressions": "warn"
    }
};

解決策4: コメントによる一時的な抑制

特定の箇所で一時的にルールを無効にするには、コメントを使用します。

Javascript

// 一時的にルールを無効化
/* eslint-disable no-unused-expressions */
legacyCode(); // 古いコードで戻り値を使用しない場合

// または特定の行のみ
const result = doSomething(); /* eslint-disable-line no-unused-expressions */

解決策5: 式を文に変換

一部の場合、式を文に変換することで警告を回避できます。

Javascript

// 式を文に変換
void doSomething(); // 明示的に値を破棄

// または即時関数で囲む
(function() {
    doSomething();
})();

解決策6: ESLintのallowTernaryオプション

三項演算子を使用している場合、allowTernaryオプションを有効にできます。

Javascript

// .eslintrc.js
module.exports = {
    rules: {
        "no-unused-expressions": ["error", { "allowTernary": true }]
    }
};

解決策7: allowShortCircuitオプション

短絡評価（&&や||）を使用している場合、allowShortCircuitオプションを有化できます。

Javascript

// .eslintrc.js
module.exports = {
    rules: {
        "no-unused-expressions": ["error", { "allowShortCircuit": true }]
    }
};

ハマった点やエラー解決

問題1: テストコードでのエラー

テストコードで意図的に値を使用しない場合、エラーが頻発します。

Javascript

// テストコードでエラーが発生する例
describe("MyFunction", () => {
    it("should return true", () => {
        myFunction(); // 戻り値を使用しないためエラー
    });
});

解決策: テストファイル内ではルールを無効化します。

Javascript

// test.js
/* eslint-disable no-unused-expressions */

describe("MyFunction", () => {
    it("should return true", () => {
        expect(myFunction()).toBeTruthy();
    });
});

問題2: 非同期コードでのエラー

非同期処理でエラーハンドリングを行う場合、catchブロックで意図的に値を使用しないことがあります。

Javascript

// 非同期処理でエラーが発生する例
fetchData()
    .then(data => processData(data))
    .catch(error => console.error(error)); // catchブロックで値を使用しないためエラー

解決策: void演算子を使用して値を明示的に破棄します。

Javascript

fetchData()
    .then(data => processData(data))
    .catch(error => void console.error(error));

ベストプラクティス

ルールの無効化は最終手段とする: ルールを無効化する前に、コードの修正を検討しましょう。
プロジェクトルールの統一: チーム全体でルールの適用方法を統一します。
カスタムルールの検討: 特定のパターンで頻繁にエラーが発生する場合は、カスタムルールの作成を検討します。
ESLintプラグインの活用: 既存のプラグインが解決策を提供している場合もあります。

まとめ

本記事では、ESLintのno-unused-expressionsエラーの原因と具体的な解決方法について詳しく解説しました。

no-unused-expressionsルールは、意図しないコーディングミスを防ぐために役立つ
コードの修正、ESLintディレクティブ、設定のカスタマイズなど、状況に応じた解決策がある
テストコードや非同期処理など、特定のケースでは特別な対応が必要

この記事を通して、ESLintの警告を効果的に管理し、コード品質を維持するための知識を身につけることができたはずです。今後は、プロジェクトに合わせたESLint設定の最適化についても記事にする予定です。

ESLintのno-unused-expressionsエラーを効果的に解決する方法🔍