タグ: ESLint

TypeScript や JavaScript で開発をしていると、ESLint から警告が出ることがあります。
例えば、未使用の変数や推奨されていない構文に対してエラーや警告を表示してくれます。これは便利ですが、開発中に一時的に無効にしたいケースも出てきます。

この記事では、ESLint の警告の中でもよく見る @typescript-eslint/no-unused-vars を「一行だけ」または「ファイル全体」で無効にする方法を紹介します。
加えて、ESLint が非推奨とする var を使った シングルトンパターンの実装例と、それに対するルール無効化の方法も併せて紹介します。

1. ESLintとは？

ESLint は JavaScript や TypeScript のコード品質をチェックする静的解析ツールです。
未使用の変数、インデント、var の使用など、さまざまなスタイルや安全性のルールを設定できます。

例えば、以下のようなコードを書いたとき：

const unusedValue = 123;

SLint は「unusedValue は使われていない」という警告を出します。
これは @typescript-eslint/no-unused-vars というルールに基づいています。

2. @typescript-eslint/no-unused-vars を無効にするには？

このルールが有効になっていると、次のようなコードに警告が出ます：

function greet(name: string) {
  // name を使わなければ警告される
}

一行だけ無効にする方法

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const unused = "This won't trigger an ESLint warning";

ファイル全体を無効にする方法

ファイルの先頭に以下を記述することで、そのファイル内のすべての unused-vars 警告が無効になります。

/* eslint-disable @typescript-eslint/no-unused-vars */

一時的に無効にして、再び有効にする方法

/* eslint-disable @typescript-eslint/no-unused-vars */

const temp = "This won't be warned";

/* eslint-enable @typescript-eslint/no-unused-vars */

const again = "This will trigger a warning";

3. var を使ったときに出る警告と no-var のルール

現代の JavaScript では、let や const の使用が推奨されています。
そのため ESLint の no-var ルールが有効だと、次のような警告が出ます。

var name = "Shota";
// 警告：'var' declarations are forbidden. Use 'let' or 'const' instead.

しかし、ES5 環境との互換性を保ちたい、あるいは教育・学習目的で var を使用したい場合もあるでしょう。

4. var を許可するには？

特定のファイルで var の使用を許可したい場合、ファイル先頭に以下を追加します：

/* eslint-disable no-var */

特定の行だけを無効にしたい場合は：

// eslint-disable-next-line no-var
var value = "Allowed just for this line";

5. var を使ったシングルトンパターンの実装例

ここからは実用的なコード例として、var を使ってシングルトンを実装する方法を紹介します。
ES5 環境や古いブラウザをターゲットにしたい場合などに便利です。

コード全体（ESLintのルール無効化も含む）

/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable no-var */

var Singleton = (function () {
  var instance;

  function createInstance() {
    var obj = new Object("I am the instance");
    return obj;
  }

  return {
    getInstance: function () {
      if (!instance) {
        instance = createInstance();
      }
      return instance;
    }
  };
})();

// 使用例
var a = Singleton.getInstance();
var b = Singleton.getInstance();

console.log(a === b); // true（同じインスタンス）
console.log(a);       // "I am the instance"

6. 解説：なぜこの実装でシングルトンになるのか？

• Singleton は即時関数（IIFE）で囲まれています。
• instance は関数スコープ内のローカル変数なので、外部から直接アクセスできません。
• getInstance メソッドを通じて、初回はインスタンスを生成し、2回目以降は同じものを返すようになっています。

この仕組みにより、どこで呼び出しても 常に同じオブジェクトが返ってくるのです。

7. ESLintのルールは柔軟に活用しよう

ESLint はあくまで「ガイドライン」です。プロジェクトや状況に応じてルールを柔軟に無効化・変更して使いましょう。

例えば：

• ライブラリ開発中に一時的に未使用変数が出る
• 古いブラウザに対応するため var を使う必要がある
• 外部APIの仕様上、未使用に見える変数がどうしても必要

こうした状況では、**「ルールを完全に無視する」のではなく、「必要な範囲で一時的に制御する」**ことが大切です。

まとめ

おわりに

この記事では、ESLint のルールを制御する方法と、JavaScript での実用的な設計パターンであるシングルトンの例を紹介しました。

ESLint のルールをすべて守るのではなく、「なぜそのルールがあるのか」を理解した上で、適切に制御することが、柔軟で保守性の高いコードにつながります。

今後もあなたの開発が快適でスムーズに進むことを願っています！